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="2025-12-31 23:59:59"}One Line
{ebCountdown value="2025-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="2025-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 | |
| 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.
