Countdown Timer

This component allows for adding countdown timers with support for evergreen timers, recurring timers that can be scheduled and restarted after a set number of days, or simply count down to a particular fixed time & date, the same for every visitor.

Modes

The countdown timer component comes with three main modes.. (all can be populated via dynamic data).

[Note – make sure if you’re adding the date manually into the date/time field, you have your year written in the format YYYY/MM/DD not YYYY-MM-DD]

Fixed time – Set the timer to countdown to a time and date at a particular timezone. Ideal for events that have a real time of expiry such as a product sale or a lauch. The end time/date itself can be populated with dynamic data.

Evergreen – Evergreen timers will start the countdown from when the user first visits the site. Set the weeks, days, hours, minutes and seconds of how long you want the countdown to end from that point. The clock will start seperately for each user as they first visit the site.

Recurring – With recurring timers you can set a real time/date for the countdown to start and then choose the length of time you want the countdown to last for. The timer can be set to restart after a set number of days.

Time Format

Choose which items to show in the timer. Weeks, days, hours, minutes or seconds. ‘Auto’ will mean that each will only show if the number isn’t zero. ie if the end time is in five days time, the ‘weeks’ item will no longer be showing.

Note that if you hide the weeks, but the countdown timer is for in two weeks time, the extra time will be shown on the days as 14 days. As is the same with hours if days are removed yet the end date is further in the future than one day and so on.

Labels

The labels for weeks, days, hours, minutes and seconds are optional and can be changed to match the single/plural use of the language needed. Note that labels are currently limited to single words.

Expire Action

There a number of actions for when the countdown timer expires..

Count back up – The timer will go past zero and keep counting upwards.

Hide timer – The timer is hidden on the page.

Redirect – The user is redirected to the entered URL.

Show text – The timer is replaced with some text.

…or if you’re expecting users to be viewing the countdown in real time, you can also trigger some other components as the countdown hits zero.

Open offcanvas – Will open an offcanvas on the page, just add the selector for the offcanvas.

Open alert box – Will open an alert box component on the page, just add the selector for the alert box and set the alert box trigger to ‘custom’