« Back to guides

NOTE ! The banners requires that the Custobar tracking script is installed on the site so that we can identify the customers when they land on the site.

To get started with banners proceed as follows:

1 .Define the banner slots in Custobar under Settings -> Advanced Settings -> Web tracking script. Then later on when you create your banner campaigns, you define where the banner goes by using these slots.

Slot : The name for the slot in Custobar, this is the one you then choose as the slot when activating the campaign

CSS Selector: This is the selector that you add to the site, so that Custobar knows where on the site to push the banner

slots

2. Define in your web-site template, where the Custobar banner will be placed.

3. Create a banner template in Custobar (Settings/Content templates). One sample template can be found below at the bottom of this article. The sample below is a “hero” image style banner.

4. Create the banner campaign event in Custobar:

  • First choose and/or edit the content of the banner you wish to use.

Edit dropdown
* Once you are done you can click on save and exit in the upper right corner. Then you have to define which slot the banner should be visible on in the “Banner slot” drop down menu. This is the name you defined in the “Slot” field under the Settings/Web tracking script.

Edit dropdown
* You can also define the date for how long this banner will be active:

banner activation

5. The next step would be to click on Edit audience and choose the segment or choose the audience to whom this banner should be visible.

Edit audience

NOTE : This sample template is with the width 1056 and the templates can and has to be modified according to your sites settings. You can for example use the product modules from your Custobar to lift up product recommendations on your site too. Just remember that the templates has to be modified according to your layout.

Sample banner template

This sample banner template looks like this. It is a simple hero image sized slot to which you can simply drag the image that you want from Custobar:

code

And the code can be found here :

<body>
<div class="cb-module-wrapper">
{% if content %}
{{ content|safe }}
{% else %}
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="1056" style="margin: auto;" class="email-container cb-module">
<tr>
<td bgcolor="#ffffff">
<img src="/static/email-editor/placeholders/image-landscape.png" alt="" border="0" align="center" class="cb-module-image" style="width: 100%; background: #dddddd; font-family: helvetica; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555;">
</td>
</tr>
</table>
{% endif %}
</div>
{{ editor_scripts|safe }}
</body>