Skip to main content

Marketing Elements

Marketing elements are an effective way of boosting awareness of Hokodo and giving information on how to pay with Hokodo at checkout. Making buyers aware that flexible payment options are available will also help to increase both the Conversion Rate and the Average Order Value.

Marketing elements should be visible at multiple stages of the buyer’s journey, including the homepage, trade/wholesale pages, and product pages. Displaying them as early as possible in the buyer’s journey will have the biggest impact on the take-up rate at checkout.

Setup​

Follow these steps to get the Hokodo SDK as a JavaScript object on your page.

Include the Hokodo SDK in your page​

Include the Hokodo script on pages where you wish to access the SDK. It should always be loaded directly from https://js.hokodo.co or js-sandbox.hokodo.co/hokodo-js/v1/, rather than being included in a bundle or hosted yourself.

<!--Sandbox URL for use whilst developing-->
<script src="https://js-sandbox.hokodo.co/hokodo-js/v1" />

<!--Production URL-->
<script src="https://js.hokodo.co/hokodo-js/v1" />
Important

The script tag should be part of your initial DOM structure rather than added dynamically via JavaScript, as dynamically added script tags can be blocked by ad blockers since they're viewed as third-party scripts at that point.

When using async or defer tags, any SDK methods must only be executed after the script has finished loading. You'll need to account for this in your code if you use these attributes.

You will now have an object named Hokodo in the global scope:

window.Hokodo;
// or
Hokodo;

Instantiate the SDK object with your Public Key​

Pass your SDK Public Token into the Hokodo object to instantiate it:

const hokodo = Hokodo("pk_test_xxxx", {
  locale: "en-GB",
  currency: "GBP",
});

If you have already identified the buyer with Hokodo platform, you can pass in userId, organisationId and companyId to the Hokodo object at the time of instantiation. This allows the credit limit banners to display the credit limit without going through the company selection flow.

const hokodo = Hokodo("pk_test_xxxx", {
  locale: "en-GB",
  currency: "GBP",
  userId: "user-xxxx",
  organisationId: "org-xxxx",
  companyId: "co-xxxx",
});
Global options​

The following global options are available on the Hokodo object:

ParameterRequiredDefaultDescription
localefalseen-GBLanguage and region of the customer.
Supported locales are en-GB, es, fr, de and nl.
currencyfalseGBPCurrency to be displayed in the marketing elements. Supported values are GBP and EUR.
userIdfalseHokodo User object ID.
organisationIdfalseHokodo Organisation object ID.
companyIdfalseHokodo Company object ID.
bannerLinkfalsehttps://www.hokodo.co/hokodo-for-buyersThis page opens when a buyer clicks on the banner.

This option is not applicable for lightbox, FAQ, badge, product description page banner, and discount banners.
faqLinkfalsehttps://www.hokodo.co/hokodo-for-buyersUse this option to provide a URL for the FAQ page.
countryOptionsfalseUse this option to provide the list of allowed countries in the company search for credit limit banners. e.g. ["GB", "ES", "FR", "DE", "NL", "BE"]
countryfalseGBUse this option to provide the preselected country in the company search for credit limit banners.

Initialise marketing elements​

The marketing materials provided by the SDK can now be initialised using:

hokodo.marketing();

Content security policy​

If you deploy a content security policy, you will need to add the following in order to fully support Hokodo's frontend SDK:

For Sandbox

For Production

Updating global options​

If you want to update the global options at any point after initialisation you can use the hokodo.update method:

hokodo.update({
  locale: "fr",
  currency: "EUR",
});

Marketing Elements​

Here, we have put together a set of ready-made responsive marketing elements which you can add to your site when you launch Hokodo, as well as some guidance on when and where to use them.

Note

Payment plan details within marketing material are populated based on your contract e.g. Pay in 30 days or Pay in 60 days.

Available element types​

The element types provided by the SDK can be grouped into four different categories: the standard static banners, banners that allow buyers to check their credit limits, frequently asked questions element and multiple variations of banners to display promotional discount from Hokodo.

Standard​
Frequently Asked Questions​
Credit Limit​
Discount​