Developer Documentation
Search…
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.
1
document.addEventListener("exportator-loaded", function() {
2
// some code..
3
}
Copied!
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:
1
var exportatorData = JSON.parse(localStorage.getItem('exportator'));
Copied!
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.
1
const containerElement = document.body;
2
containerElement.insertBefore(bannerElement, containerElement.firstChild);
Copied!
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:
1
<script>
2
// Listen to Exportator to be loaded
3
document.addEventListener("exportator-loaded", function() {
4
// Retrieve fresh Exportator data from local storage.
5
var exportatorData = JSON.parse(localStorage.getItem('exportator'));
6
var countryName = exportatorData.visitor.location.country_name;
7
var promotionLabel = exportatorData.promotion.label;
8
9
// Create a basic banner
10
var bannerElement = document.createElement("div");
11
bannerElement.classList.add("text-center");
12
bannerElement.setAttribute("id","promo-banner");
13
bannerElement.textContent = "Hello visitor from " + countryName + "! Here is you promo code: " + promotionLabel;
14
15
// Insert it on your page
16
var containerElement = document.body;
17
containerElement.insertBefore(bannerElement, containerElement.firstChild);
18
});
19
</script>
Copied!
Last modified 4mo ago