---
title: "Add Countdown Timer to Popup - EngageBox"
description: "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"
url: "https://www.tassos.gr/docs/engagebox/functionality/countdown-timer-popup"
date: "2026-04-29T14:18:09+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/index.php?option=com_content&view=category&layout=blog&id=24&Itemid=1088) / [ EngageBox ](https://www.tassos.gr/index.php?option=com_content&view=category&id=35) / [ Functionality ](https://www.tassos.gr/index.php?option=com_content&view=category&id=52)

#  Add Countdown Timer to 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.

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](#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](#examples)

#### [Default style](#default-style)

 ```
<div class="nrf-widget nrf-countdown countdown8 is-preview default" data-countdown-action="keep" data-countdown-type="static" data-days="true" data-days-label="Days" data-double-zeroes-format="true" data-dynamic-days="0" data-dynamic-hours="0" data-dynamic-minutes="0" data-dynamic-seconds="0" data-finish-text="" data-hours="true" data-hours-label="Hrs" data-minutes="true" data-minutes-label="Mins" data-redirect-url="" data-seconds="true" data-seconds-label="Secs" data-separator="false" data-theme="default" data-timezone="server" data-value="2025-12-31T23:59:59+02:00" id="countdown8"></div>
```

#### [One Line](#one-line)

 ```
<div class="nrf-widget nrf-countdown countdown10 is-preview oneline" data-countdown-action="keep" data-countdown-type="static" data-days="true" data-days-label=" days" data-double-zeroes-format="true" data-dynamic-days="0" data-dynamic-hours="0" data-dynamic-minutes="0" data-dynamic-seconds="0" data-finish-text="" data-hours="true" data-hours-label=" hours" data-minutes="true" data-minutes-label=" minutes" data-redirect-url="" data-seconds="true" data-seconds-label=" seconds" data-separator="false" data-theme="oneline" data-timezone="server" data-value="2025-12-31T23:59:59+02:00" id="countdown10"></div>
```

#### [Custom format](#custom-format)

 ```
<div class="nrf-widget nrf-countdown countdown12 is-preview custom" data-countdown-action="keep" data-countdown-type="static" data-days="true" data-days-label="Days" data-double-zeroes-format="true" data-dynamic-days="0" data-dynamic-hours="0" data-dynamic-minutes="0" data-dynamic-seconds="0" data-finish-text="" data-format="Countdown till our biggest sale yet: {days} days, {hours} hours, {minutes} minutes and {seconds} seconds" data-hours="true" data-hours-label="Hrs" data-minutes="true" data-minutes-label="Mins" data-redirect-url="" data-seconds="true" data-seconds-label="Secs" data-separator="false" data-theme="custom" data-timezone="server" data-value="2025-12-31T23:59:59+02:00" id="countdown12"></div>
```

## [Configuring the countdown timer](#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](#faq)

### [Is there an easier way to add a Countdown timer in my popups?](#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 Sep 29th 2025 10:09

## Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://www.tassos.gr"
        },
        {
            "@type": "ListItem",
            "position": 2,
            "name": "Home",
            "item": "https://www.tassos.gr/docs"
        },
        {
            "@type": "ListItem",
            "position": 3,
            "name": "EngageBox",
            "item": "https://www.tassos.gr/docs/engagebox"
        },
        {
            "@type": "ListItem",
            "position": 4,
            "name": "Functionality",
            "item": "https://www.tassos.gr/docs/engagebox/functionality"
        },
        {
            "@type": "ListItem",
            "position": 5,
            "name": "Add Countdown Timer to Popup",
            "item": "https://www.tassos.gr/docs/engagebox/functionality/countdown-timer-popup"
        }
    ]
}
```

```json
{
    "@context": "https://schema.org",
    "@type": "Article",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://www.tassos.gr/docs/engagebox/functionality/countdown-timer-popup"
    },
    "headline": "Add Countdown Timer to Popup",
    "image": {
        "@type": "ImageObject",
        "url": "https://www.tassos.gr/"
    },
    "publisher": {
        "@type": "Organization",
        "name": "Tassos",
        "logo": {
            "@type": "ImageObject",
            "url": "https://www.tassos.gr/https://www.tassos.gr/media/brand/logo-text.png"
        }
    },
    "author": {
        "@type": "Person",
        "name": "Stergos Zamagias",
        "url": "https://www.tassos.gr/docs/engagebox/functionality/countdown-timer-popup"
    },
    "datePublished": "2022-12-09T10:07:41+02:00",
    "dateCreated": "2022-12-09T10:07:41+02:00",
    "dateModified": "2025-09-29T10:06:32+03:00"
}
```