Countdown banner




This widget allows you to display a countdown on your site. You can choose to display it above your page or inside the content of your page; in both cases the settings to be made are the same, only the choice of position will be different.

If you do not know how to add a preset widget to an A/B test, read our article on this topic.

Date and time

Start with setting up date and time to define the end of your countdown.

Click on “Choose a date” to see the calendar and define your date. Note that you cannot choose a past date.

Click on “Choose a time” to define the ending time of your countdown. Use the arrows to set up hours and minutes, then click on “OK” to validate.

Clickable banner

You get to choose if the banner will be clickable or not, in other words if the visitor is redirected to an URL when clicking on your banner.

If you select “Yes”, a new field appear allowing you to fill in the URL of your choice.


You can, if you want to, add a text to your banner.

To do so, type in your text in the corresponding field. Some formatting tools are available.

Background color

By default, the background is black, but you can choose any background color.

If you already know it, you can fill in the hexadecimal code of your color, starting with “#”.

Otherwise, click on the colored square to use the color chart and select the color of your choice.


By default, the banner will fill your page width. However, you can chose a custom size.

To do so, select “Custom size”.

The fields “Headband width” and “Headband height” appear to let you choose your size. Use the arrows or type in the value of your choice to resize the banner.


If your widget is inside the content of your page:

The banner can be located at the top of your page (header), at the bottom (footer) or at a precise position.

If you choose “At a precise position”, fill in the fields “Position on X” and “Position on Y”.

  • Position on X is the distance, in pixels, between the left border of your website and the beginning of the banner
  • Position on Y is the distance, in pixels, between the top border of your website and the beginning of the banner

If your widget is above your page:

You must indicate a CSS selector to determine the position of the banner.

To create a CSS selector, you can ask your developer for help or use the Kameleoon graphic editor. For further information, please read our article about CSS selector creation (A/B testing).


By default, your content will be at the center of your banner. To set up the horizontal or vertical alignment, check the corresponding box.

  • Horizontal alignment: you can align your content on the left, on the center or on the right
  • Vertical alignment: you can align your content on the top, on the center or on the bottom

Display for devices

With a few simple clicks, you can decide on which devices you want to display your widget: computers, smartphones or tablets. By default, all devices are selected. Click on the icon of your choice to unselect this device.

Note: You can also include or exclude devices when you create your segment.


Do not forget to click on “Save” to validate the creation of your widget!