Example
Introduction
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.
Layout tab
Layout
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.
Dimensions
Widget dimensions based on content
By default, the "Widget dimensions based on content" toggler is toggled. It helps you not to worry about modals dimensions. If you upload a very large image, your pop-in will adapt accordingly based on the image (and text) ratio (length).
But, for many of our users, this default dimensions management was not enough. So we came up with something trickier but more flexible. If you untoggle the toggler, we will be able to define both width and height of the pop-in. And, last but not least, you will able to define them (independently) in several dimensional units:
- px (pixels)
- % (percentage)
- em (element, which actually 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)
Depending on what you want to achieve and how responsive your pop-in needs to be, you may select one unit or another. Some of you may think that being able to define height in vw or width in vh doesn't make sense and that it is a bug or an oblivion on our side's but it is not. It can be useful to do, in some very edgy cases, that is for sure.
We voluntarily did not offer those units: cm, mm, in, pt, pc and ex as, in short, they are not best-practices. We are still open to discussion for implementing rem unit.
If you're digging the dimensional units in CSS, we strongly advise you read this W3C article which is a good starting point.
Preserve ratio (automatic height)
By default, the height toggler of the modal is enabled and set to "Preserve ratio (automatic height)". This way, you don't have to set any 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 in it to read everything.
Know issue: the widget configuration form not overlapping the website
In the past, we've chosen to make the widget configuration form not overlapping the website, especially if you want to position a widget in a corner or on the left side. Therefore the global website width is "squeezed" in the editor. Now, once you're 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. And results can be surprising...
We understand that defining the pop-in size without seeing the full rendering of the page is tricky. Until now, we haven't find a better solution to help you do that. Make sure, when you dimension your pop-in that it will adapt to all windows widths by showing/hiding the widget form or let the "Widget dimensions based on content" toggle toggled.
Layer
Layer Position (z-index)
If you've selected "modal", "top banner" or "bottom banner" layout, you can define the position of the widget on the z axis in order to manage if you want the widget: on top of everything, under everything or precisely fine-tune its position.
Please read the dedicated article on the matter: Z-index demystified.
Content tab
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.
Timezone settings
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.
Message
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".
Select widget link type
You can now decide if your widget will contain a clickable button (to close or redirect), if the widget will be entirely clickable (to close or redirect) or will have no link at all.
If you pick:
- "The button is a link", you will have to precise 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 precise a button text. The widget will display a button.
- "The whole widget is a link", you will have to precise 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", well, nothing else is required. The widget will not be clickable.
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.
Important
- 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.
Style tab
Select the style options (Text, Buttons, Container, Border, Close button) you want to apply to your widget and customize the banner.
Refer to the Widget Style options article for more information on all available Style options.
Preview
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.
Conditions tab
Select the Triggering and Recurrence options you want to apply to the Promotional Banner widget. Refer to the Widget Condition options article for more information on the available Condition options.
If you want to: edit, duplicate, rename, delete such a widget, please check the Widget Frequently Asked Questions article.
Comments
0 comments
Article is closed for comments.