What is most valuable than time in our nowadays globalized civilization? The Countdown widget lets you display a counting-down clock to create expectation, emergency or near-scarcity.
This widget is useful for yearly recurring events such as: Christmas, Thanksgiving, Halloween, Fashion Week, Black Friday, Valentine's day... but also for your own events: product release, new feature, new collection, anniversary, special offer, live event, webinar... and many other use cases.
Try using the different options in the conditions tab (triggering and recurrence) in order to display it the smartest way possible (the most unobtrusive way) and fine tune the recurring options to remind your visitors.
Select a layout
We offer 4 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 only in the modal layout.
Content will end on
As this widget is a countdown, the first thing you will be asked to do is to define an end date and hour. You cannot use a past date / hour.
By default, in order to show you a clock already counting down, we define the default end date / hour based on the moment you create the countdown and we add: 1 day, 1 hour and 2 minutes. So you should see 01 days, 01 hours, 01 minutes, 59 seconds, 58, 57... counting down.
When you want to be precise in dates and in hours management, you have to consider handling timezones and daylight saving times. In the "Timezone Settings" collapsible group, you will have two main options to manage timezones with your countdown widget:
1) "Follow the sun" toggled / on (default)
(Will end at this time in each timezone)
Ideal for special offers, games, draws...
We chose to use this setting as a default because it is the easiest to set.
Let's imagine you have run a business based in Belgium and your catchment area is Belgium. If you use this option, your countdown will end at the defined date and hour. The fact that it will end at this exact date and hour in each and every timezone is not really a problem for you.
Now let's imagine you run a business whose catchment area covers more than 1 timezone. In the USA, China, Russia, Brazil, Canada... even in France with overseas regions, we have clients who operate over several timezones (even within the same country). Not to mention our worldwide accounts who are present in all countries. Having the "Follow the sun" option enabled will let you define an end date & hour which will be the same in each timezone.
For example, if you decide to end the countdown at 4:00 PM, it will end @ 4:00 PM in Tokyo, @ 4:00 PM in Mumbai, @ 4:00 PM in Berlin, @ 4:00 PM in Rio... the same day. It will take 24 hours to end all over the globe.
As a website visitor, depending on where you will see the countdown widget from (depending on your timezone), you will not see the same remaining time. So, as the user who sets the countdown widget up, you can use the "Preview in timezone" dropdown to preview the time remaining in any desired timezone.
If you set up a countdown for today @ 10:00 AM, but you're in Paris and it's already 9:00 AM, this hour (10:00 AM) is already "past" in Tokyo. Therefore, in all the timezones where the local time is past 10:00 AM, the visitors will see the countdown as ended.
2) "Follow the sun" untoggled / off
(Will end at this time in one timezone)
By default, this timezone is the one defined in your account settings. You can override it for the purpose of this widget and it will not change your account settings.
Ideal for events which will be happening at the same moment anywhere in the world. For example: Apple Keynote, Olympics Opening Ceremony, Elections results...
For example, if you decide to end the countdown at 2:00 PM in Paris, it will end @ 2:00 PM in Paris and at this exact moment in the whole world whatever the local time is. (But that would be 8:00 PM in Singapore, 8:00 AM in New York, 5:00 AM in San Francisco).
As the user who sets the countdown widget up, you must define a timezone in the "Timezone to base end hour on" dropdown. You can override (for the purpose/scope of this widget only) the timezone defined in your account settings.
Does it support Daylight Saving Time (DST)? And what does that mean?
Yes, it does. It means that 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 6 months ahead.
Known issue for DST.
For summer or winter time switches in countries who do apply a Daylight Saving Time (DST), there are two moments each year (dates vary depending on the country) when, in summer you go from 3:00 to 2:00 AM and in winter from 2:00 AM to 3:00 PM. These two hours don't really "exist". We do not guarantee this widget will work if you schedule its end at that precise moment.
Display an image
This feature is only available if you use the modal layout. Usual restrictions apply.
The message is mandatory. You have to fill the textarea in.
The textarea supports multi-lines messages. You can add HTML markup if you need. We recommend you to set all the styling aspects through the "Style tab".
Display a button
You can decide to display a button or not in the widget.
By toggling it (toggled by default), you will see: an input for button text, an input for button URL and a toggler to open the link in a new tab (or not).
By default, the legend of the countdown is: Days, Hours, Minutes & Seconds for each respective 2-digits block. But you can customize it. Main reason is to adapt it to a specific language. Klingon for example:
Important thing to know, the width of all of the 2-digits blocks adapt to the largest block. In the example below: the seconds.
Once the countdown has ended
The first goal of the countdown widget is create tension and drive attention. Ok but does happen when it ends? You have 5 different options:
- Hide the whole widget
When the countdown ends, the whole widget is removed. Nothing is shown any longer.
- Hide the countdown and display a text
When the countdown ends, the widget remains displayed but there is only a text in it. You can define the text you want.
- Display the countdown (00:00) and a text
When the countdown ends, the widget remains and it contains a the ended countdown and a text. You can define the text you want.
- Hide the countdown, display a text and a button
When the countdown ends, 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
When the countdown ends, the widget remains and it contains a the ended countdown, a text and a button. You can define the text, the button text and the URL you want.
- For the widgets with the modal layout and which include an image, it is no longer displayed when the countdown has ended.
- If you add a button after the countdown is ended, we strongly advise you to offer an alternative for the visitors who just missed the opportunity. It can be a coupon code, a subscription to a newsletter for receiving a previous alert, or a link to the event itself (live, webinar...). Avoid "back to home" links at any cost.
In the style tab, you will be able to define the size, color, border, background... of each element of the countdown widget: digits, legend, message, button, container... Uncollapse each group and adapt the widget to your website color palette and style.
By default, the widget inherits from the font-face of your website. But you can override it with the 1,000 Google Fonts available.
Refer to the Widget Style options article for more information on all available Style options.
If, in the content tab, in the "Once the countdown has ended" section, if you've opted for any other option than "hide the widget", you will be able to preview as if the countdown was already ended to visually check the visual rendering, spelling...
By default, the option selected is "During the countdown" but you can select "Once the countdown has ended" in order to preview it.
Select the Triggering and Recurrence options you want to apply to this widget.
Refer to the "Conditions" tab article for details.