Add a Countdown timer in your popup

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.

{ebCountdown align="center" dynamic_days="1" days_label="DAYS" dynamic_hours="10" dynamic_minutes="59" dynamic_seconds="59" hours_label="HOURS" minutes_label="MINUTES" seconds_label="SECONDS" countdown_type="evergreen" countdown_action="restart" gap="15" digits_gap="3" label_font_size="13" digits_padding="9px 5" digit_background_color="#41495b" unit_label_text_color="#41495b" digit_text_color="#fff" digit_border_radius="4" digits_font_size="30" unit_label_margin_top="8" digit_min_width="39" digits_font_weight="500"}

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.

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"}

{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"}

{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"}

{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.

Last updated on Oct 29th 2024 14:10