Developer Documentation
Search…
Welcome!
get started
Quick Start
Integrate with Stripe Checkout
Create a custom banner
API
Visitors
Promotions
Other
Changelog
Powered By GitBook
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>
get started - Previous
Integrate with Stripe Checkout
Next - API
Visitors
Last modified 8mo ago
Copy link
On this page
Set Campaign display to "custom"
Create the banner on your site
1. Listen for the "exportator-loaded" event
2. Retrieve Exportator data from Local Storage
3. Design your own banner
Custom banner integration example