Create a custom banner

Learn how you can create your very own custom banner in just a few lines of code.

Set Campaign display to "custom"

When creating or updating your campaign's display, select "Custom"

Create the banner on your site

1. Listen for the "exportator-loaded" event

When the data related to your visitor and promotion is loaded, Exportator will send you a "exportator-loaded" event. Listen to it to know when you can start building your custom banner.

document.addEventListener("exportator-loaded", function() {
  // some code..
}

2. Retrieve Exportator data from Local Storage

In order to fetch data faster, Exportator stores the information related to your visitor and its promotion in its browser's local storage. You can asses it like so:

var exportatorData = JSON.parse(localStorage.getItem('exportator'));

3. Design your own banner

You can now generate and build your own banner however you want. Here is how you can get your first banner to appear on your page. Feel free to share your design with us on Twitter.

const containerElement = document.body;
containerElement.insertBefore(bannerElement, containerElement.firstChild);

Avoid classes/IDs conflicts. All the exportator CSS classes and HTML IDs start by "exportator-...". In order to avoid conflicting code, try avoiding those classes by picking a different wording.

Custom banner integration example

Here is a basic boilerplate code snippet of how you can start designing your custom banner:

<script>
  // Listen to Exportator to be loaded
  document.addEventListener("exportator-loaded", function() {
    // Retrieve fresh Exportator data from local storage.
    var exportatorData = JSON.parse(localStorage.getItem('exportator'));
    var countryName = exportatorData.visitor.location.country_name;
    var promotionLabel = exportatorData.promotion.label;
    
    // Create a basic banner
    var bannerElement = document.createElement("div");
    bannerElement.classList.add("text-center");
    bannerElement.setAttribute("id","promo-banner");
    bannerElement.textContent = "Hello visitor from " + countryName + "! Here is you promo code: " + promotionLabel;

    // Insert it on your page
    var containerElement = document.body;
    containerElement.insertBefore(bannerElement, containerElement.firstChild);
  });
</script>