Countdown widget
Last updated
Was this helpful?
Last updated
Was this helpful?
The Countdown widget is part of the Promotional Content widget category. For more information on the widgets, please refer to .
The Countdown widget lets you display a countdown clock to create expectation, urgency, or near-scarcity.
This widget is useful for yearly recurring events such as Christmas, Thanksgiving, Halloween, Fashion Week, Black Friday, Valentine's Day, etc., as well as for your own events: product release, new feature, new collection, anniversary, special offer, live event, webinar, etc. and many other use cases.
You can select the display of the digits (remaining days, hours, minutes and seconds):
We have four different layouts:
modal (pop-in)
top banner
bottom banner
free placement (which allows you to place the widget wherever you want in the page flow)
You can add an image in the modal layout only.
Widget dimensions based on content By default, the "Widget dimensions based on content" toggler is toggled. This saves you from having to worry about pop-in dimensions. If you upload a very large image, your pop-in will adapt accordingly based on the image (and text) ratio (length).
If you untoggle the toggler, you will be able to define both the width and the height of the pop-in. These can be configured (independently) in several dimensional units:
px (pixels)
% (percentage)
em (element, which means that it is based on the size of the text of the element: if your font size is 18 px, then 1 em = 18 px)
vw (1/100th of the window's (or viewport) width)
vh (1/100th of the window's (or viewport) height)
vmin (whichever is the smallest of vw or vh)
vmax (whichever is the highest of vw or vh)
Preserve ratio (automatic height)
By default, the height toggler of the modal is toggled and set to "preserve ratio (automatic height)". This way, you don't have to set a height, it takes what the modal needs and can even reach 100% of the available height in the viewport.
If you do define a height and your content is longer than the defined modal height, the modal will be scrollable so users can scroll down to read everything.
Known issue: the widget configuration form not overlapping the website
In the past, we've chosen to make the widget configuration form not overlap the website, especially for positioning a widget in a corner or on the left side. Therefore, the overall website width is "squeezed" in the editor. Now, once you've finished editing the pop-in dimensions and click on save or hide the widget configuration form, the modal is re-dimensioned to the available viewport/window's width. We understand that defining the pop-in size without seeing the full-page rendering is tricky. When you dimension your pop-in, it will adapt to all window widths by showing/hiding the widget form or leaving the "Widget dimensions based on content" toggle toggled.
Layer Position (z-index)
Suppose you've selected "modal", "top banner" or "bottom banner" layout. In that case, you can define the position of the widget on the z-axis in order to manage the widget position: above everything, below everything, or precisely fine-tuned.
As this widget is a countdown, the first thing you will be asked to do is define an end date and time. You cannot use a past date/time.
By default, in order to show you a running countdown clock, we define the default end date/time based on the moment you create the countdown, incremented by 1 day, 1 hour and 2 minutes. So you should see 01 days, 01 hours, 01 minutes, 59 seconds, 58, 57, etc., counting down.
For precision in date and in time management, you have to consider time zones and daylight saving times. In the "Time Zone Settings'' collapsible group, there are two main options to manage time zones with your countdown widget:
"Follow the sun" option
This option is useful and should be toggled ON in the following situation:
Your ecommerce website is based in France but your clients buy from all over the world. You want to end your countdown at midnight exactly for every time zone because this is the exact moment the Black Friday sale will officially start.
So in this case, the countdown will end at 12am in Tokyo, 12am in Mumbai, 12am in Paris, 12am in Rio de Janeiro, all on the same day. It will take 24 hours to end all over the globe.
As a website visitor, depending on where you see the countdown widget from (depending on your time zone), you will not see the same remaining time.
This option is not useful and should remain OFF in the following situations:
Beginning of a big international event: Apple keynote, Olympic Games Opening Ceremony, elections results, etc.
For example, if you decide to end the countdown at 2pm in Paris, it will end at 2pm in Paris and at this exact moment in the whole world, whatever the local time is – so 8pm in Singapore, 8am in New York, 5am in San Francisco, etc.
As the user who sets up the countdown widget, you must define a time zone in the "Time zone to base end time on" dropdown. You can override (for the purpose/scope of this widget only) the time zone defined in your account settings.
Daylight Saving Time (DST)
If one of your visitors lives in a place where winter/summer daylight saving time is applied, you won't have to worry about this 1-hour delta if you schedule your countdown widget six months ahead.
Known issue for DST:
For spring or fall time switches in countries that do apply Daylight Saving Time (DST), there are two moments each year (dates vary depending on the country) when, in spring you go from 2am to 3am and in fall from 2am to 1am (or from 3am to 2am, depending on your location). These two hours don't really "exist". We cannot guarantee that this widget will work if you schedule its end at that precise moment.
This feature is only available if you use the modal or the banners (top and bottom) layouts.
You can click the button and then select an image from the Asset Libraru or upload a new one.
AB Tasty supports the following formats: jpg, png, gif, svg, webp & avif and the maximum width is 2MB.
The message is mandatory, you have to fill the text area in.
The text area supports multi-line messages, and you can add HTML markup if needed. We recommend setting all the styling aspects through the Style tab.
You can decide whether your widget should contain a clickable button (to close or redirect), whether it should be entirely clickable (to close or redirect) or whether it should have no link at all.
If you pick:
"The button is a link": you will have to specify a button URL and a button text. The widget will display a button.
"A click on the button closes the widget": you will have to specify a button text. The widget will display a button.
"The whole widget is a link": you will have to specify a URL. The widget will not display a button.
"A click on the whole widget closes the widget": you won't have anything to add. The widget will not display a button.
"None": the widget will not be clickable.
If you toggle on the “Add a second link” option, you can configure a second link/ CTA in your widget, the same way as the first one.
By default, the legend of the countdown is days, hours, minutes, and seconds for each 2-digit block, respectively. But you can customize it to adapt it to a specific language.
Important: the width of all the 2-digit blocks adapts to the largest block.
When the countdown ends
You have five different options:
Hide the whole widget: once the countdown has ended, the whole widget is removed. Nothing is shown any longer.
Hide the countdown and display a text: once the countdown has ended, the widget remains displayed but contains only text. You can define the text you want.
Display the countdown (00:00) and a text: once the countdown has ended, the widget remains and contains the ended countdown and text. You can define the text you want to show.
Hide the countdown, display a text and a button: once the countdown has ended, the widget remains displayed but there is only a text and a button in it. You can define the text, the button text and the URL you want.
Display the countdown (00:00), a text and a button: once the countdown has ended, the widget remains and contains the ended countdown, a text and a button. You can define the text, the button text and the URL you want.
Important
For the widgets with the modal layout and which include an image, it is no longer displayed once the countdown has ended.
If you add a button after the countdown has ended, we strongly advise you to offer an alternative for the visitors who just missed the opportunity. This can be a coupon code, a subscription to a newsletter to receive notifications, or a link to the event itself (live, webinar, etc.). Avoid "back to home page" links at all costs.
Select the style options (Text, Buttons, Container, Border, Close button) you want to apply to your widget and customize the banner.
Background can be set up with an image using the image-fitting policy
4 options are provided:
"Cover": the image is resized keeping the aspect ratio to fill the background container even if, by doing this resize, the image may overflow the background container.
"Contains": the image is resized keeping the aspect ratio so that the whole image is included in the background container (no overflow)
"Fill": the image is resized to fill the background container without keeping the aspect ratio
"None": the image is left unchanged.
Select the Triggering and Recurrence options you want to apply to the Promotional Banner widget.
In a block: each digit is displayed in a separate block
In a text: the digits are included in the text
Depending on what you want to achieve and how responsive your pop-in needs to be, you may select one unit or another. If you're digging the dimensional units in CSS, we recommend reading .