Countdown Timer – what is it and how to customize it?

Explore the features and the customization process of Countdown Timer widget

Have you ever had a special time-limited offer for your clients or maybe you wanted to draw the visitors’ attention to a very important event by showing them the amount of time to wait? Or, perhaps your website is under construction and you would love to cheer up your customers showing that there are only 2 days left to start shopping? We are delighted to announce that all these cases and even more are reflected in our Countdown Timer widget and we can’t help but start the presentation!

Selecting a template

Templates are an extremely convenient thing that show you all possible variants you can have in a widget. There are 12 ready-made templates so the choice is yours, which one will be the best solution for your use-case.

We’ve chosen the very first template as an example to carry you through the setting process and show you all the advantages of the features.

Timer tab

On Timer tab the first thing you need to do is to choose the type of timer:

Let’s choose Remaining time counter per visitor type as an example and find out these features’ advantages.

Remaining time counter per visitor type lets you set the unique time which will count down in a logical way for every visitor.

You can set the time period and show it in the most appropriate format for you – in days, hours, minutes or/and seconds.

Important! You can set a widget on your website in advance and it will not be displayed there until the start time. The widget will be visible in your Elfsight account and appear on your website only at the set date and time.

In Position section, you can choose the place for a widget to display.

Floating banner means that the timer will follow users’ scroll and will always stay visible at the top or at the bottom.

Message before timer field lets you put any text to display it above the widget.

And there are three sections left on this tab.

Having clicked on Counters and Labels section, you will be able to adjust the timer’s count way – to show or hide days, hours, minutes or seconds.

Also, in Label fields you can change the titles by adding any text you like:

On Action After Timer Finishes section you can set the timer to get hidden once the time’s up – 1

You can also keep a widget on your website after the timer finishes and display any message under the widget.

Timer Align will let you set a button on the left, on the right or to the center under a widget:

Button tab

On this tab you can adjust the button – insert the link to redirect visitors to the website you like (1), change the button’s title (2) and decide whether to open the inserted link in a new tab or not (3).

Several widgets can be set to be clickable at its any place, however, this feature doesn’t work in this very template.

Style tab

The first two options on Style tab let you choose the timer’s style and its background theme.

Three other sections will be described in some more details.

On Colors section, you can adjust the timer’s appearance by changing color of its different elements.

Important! You can change color only in case no themes are applied.

With the help of Sizes and Fonts section, you are able to try different sizes for the timer itself and for the button. Also, you can make the text above the timer have the most appropriate size.

Animation section will let you choose the way of time to change. There are 5 options for you to apply:

Here it is! All you need to do now is install the widget on your website.