How to add a Countdown timer in your popup

Published in EngageBox
Updated 09 Dec, 2022
Heads up! The Countdown shortcode is available in the latest EngageBox development release.

Would you like to introduce urgency for an upcoming sale or excite your users to take an action for a particular event? Then adding a Countdown timer in your popup is what you're looking for.

EngageBox provides a shortcode that allows you to add a Countdown timer, similarly to the one above, in your popup providing a plethora of settings that lets you customize the look and feel of your countdown timer to fit your theme and style. You can create both a countdown timer that ends on a specific date or an "evergreen" timer where all visitors get the same time frame, regardless of when they enter the page.

How to add a countdown timer in your popup

To add a countdown timer in your popup, you'll need to use the {ebCountdown ...} shortcode. This shortcode accepts a variety of settings that let you customize it as you desire.

Let's see a few examples:

Examples

Default style

{ebCountdown value="2023-12-31 23:59:59"}

One Line

{ebCountdown value="2023-12-31 23:59:59" digits_font_size="16" label_font_size="16" days_label=" days" hours_label=" hours" minutes_label=" minutes" seconds_label=" seconds" theme="oneline"}

Custom format

{ebCountdown value="2023-12-31 23:59:59" theme="custom" format="Countdown till our biggest sale yet: {days} days, {hours} hours, {minutes} minutes and {seconds} seconds"}

Configuring the countdown timer

The Countdown timer shortcode settings can be found below:

Key Description
countdown_type The type of the countdown. This can either be static or evergreen.

Static (Default): The default countdowns that require a fixed date to countdown to.

Evergreen: This countdown requires a set of days/hours/minutes/seconds to countdown to. Each user that views the countdown will see the same countdown.
value The fixed date that a static countdown will use to countdown to.

Example format: 2023-12-31 23:59:59
timezone The timezone that will be used in the countdown. This can either be server or client.

Server (Default): The given date will be transformed to UTC and then the server (site's) timezone will be applied to it.

Client: The given date will automatically be adjusted to the client's (user's) timezone.

Note: This will only work for Static countdowns.
dynamic_days The days to countdown to.

Note: This will only work for Evergreen countdowns.
dynamic_hours The hours to countdown to.

Note: This will only work for Evergreen countdowns.
dynamic_minutes The minutes to countdown to.

Note: This will only work for Evergreen countdowns.
dynamic_seconds The seconds to countdown to.

Note: This will only work for Evergreen countdowns.
theme The theme to use to display the countdown. Available themes are: default, oneline, and custom

Default: This is the default way most countdowns appear by having each countdown unit appear in a separate column.

One line: This will make the countdown display each unit in one line as in a sentence.

Custom: Allows you to customize how the countdown will appear by adding your own HTML as well as using Smart Tags to display each unit value.

Custom Theme Smart Tags
{days}: Display days
{hours}: Display hours
{minutes}: Display minutes
{seconds}: Display seconds
countdown_action What action should the countdown perform upon ending? Available values are: keep, hide, restart, message, and redirect

Keep: Let the countdown appear with zeroes upon ending.

Hide: Hide the countdown timer once it ends.

Restart: Available only for Evergreen countdowns. Restart the countdown timer once it ends.

Message: Show a message once the countdown timer ends.

Redirect: Redirect to a URL when the countdown timer ends.

finish_text Enter the text that will appear when the countdown ends and countdown_action is set to message.
redirect_url Enter the URL where the user will be redirected to when the countdown ends and countdown_action is set to redirect.
Widget Settings
align Enter the countdown alignment. Available values are: left, center, and right.
padding Enter the padding of the Countdown container.
margin Enter the margi nof the Countdown container.
gap Enter the gap between the countdown items.
background_color Enter the background color of the Countdown container.
Unit Display Settings
days Set whether to display the days. Available values: true, false.
days_label Set the days label.
hours Set whether to display the hours. Available values: true, false.
hours_label Set the hours label.
minutes Set whether to display the minutes. Available values: true, false.
minutes_label Set the minutes label.
seconds Set whether to display the seconds. Available values: true, false.
seconds_label Set the seconds label.
separator Set whether to include a separator between the countdown items. Available values: true, false.
double_zeroes_format Set whether to display numbers in 0 or 00 format. Available values: true, false.
Unit Item Settings
item_size Set width and height of each countdown item.
item_border_width Set border width of each countdown item.
item_border_style Set border style of each countdown item.
item_border_color Set border color of each countdown item.
item_border_radius Set border radius of each countdown item.
item_background_color Set background color of each countdown item.
Unit Digits Container Settings
digits_wrapper_min_width Set digits wrapper minimum width in each countdown item.
digits_wrapper_padding Set digits wrapper padding in each countdown item.
digits_wrapper_border_radius Set digits wrapper border radius in each countdown item.
digits_wrapper_background_color Set digits wrapper background color in each countdown item.
Unit Digit Settings
digits_font_size Set each digit font size.
digits_font_weight Set each digit font weight.
digit_min_width Set each digit minimum width.
digits_padding Set each digit padding.
digit_border_radius Set each digit border radius.
digits_gap Set the gap between the digits.
digit_background_color Set each digit background color.
digit_text_color Set each digit text color.
Unit Label Settings
label_font_size Set label font size.
label_font_weight Set label font weight.
unit_label_margin_top Set label margin top.
unit_label_text_color Set label text color.

FAQ

Is there an easier way to add a Countdown timer in my popups?

We know that customizing shortcodes can be tedious and for this reason, we will be introducing a button within the EngageBox popup editor that will allow you to create your Countdown timer via a User Interface.