OM Documentation Functionality

How to Create a Countdown Timer Campaign

OptinMonster makes it easy to add a countdown timer to your website. Countdown timer campaigns are one of the best ways to boost your sales and conversions by creating a sense of urgency for your visitors, and harness the power of “FOMO”: the fear of missing out.

In this article, you’ll learn how to use add a countdown timer to any OptinMonster campaign.

Before You Start

Here are some things to know before you begin:

Add Countdown Timer

To add a countdown timer to a campaign, follow these steps:

  1. In the campaign builder Design View, click + Add Blocks.
  2. Next, drag and drop a Countdown element onto the campaign where you would like the countdown timer to appear.
  3. Once a countdown timer has been added to your campaign, click on the element to configure the specific countdown settings. There are two different timer modes to choose from: Static and Dynamic.
  4. When you’re finished, click Save.

Available Settings

In the countdown timer menu, you can customize the timer in your campaign. Read on to see how to set the type and “end” time for your campaign, as well as what happens after your countdown reaches 0.

Static Countdown

A Static countdown timer counts down to a specific date and time. After that time has passed, the countdown timer displays 00 for all values. This type of countdown timer is often used for seasonal sales, or product launches. Follow the steps below to configure a Static countdown timer:

  1. Click on the countdown timer element to open the Countdown settings menu.
  2. Choose Static from the Type dropdown.
  3. Select the countdown end date and time, and choose your timezone.
Dynamic Countdown

A Dynamic countdown timer, sometimes called an “Evergreen” countdown, resets for each visitor. Instead of selecting an end date, you’ll choose the length of time the timer shows in number of days, hours, minutes, and seconds. Follow the steps below to configure a Dynamic countdown timer:

  1. Click on the countdown timer element to open the Countdown settings menu.
  2. Choose Dynamic from the Type dropdown.
  3. Select the countdown “end” time in days, hours, minutes, and seconds. These are the values that will show when a visitor sees this campaign.
Countdown Action

After you configure your countdown type and end time, choose what happens when the countdown ends in the Action panel.

There are four action options:

  • No action: if the countdown reaches 0 while a visitor is viewing it, nothing will happen, and the timer remains viewable
  • Close the campaign: this action closes the campaign, so the countdown is no longer viewable
  • Show a view: allows you to choose a view, like the Success View, to show instead of the finished countdown
  • Restart the countdown: this action will restart the timer (only available for dynamic countdowns)

Click Save. You have configured your countdown timer!

Next, configure your display rules to tell the campaign where to appear, or embed the campaign on your website directly.

Troubleshooting

Can I configure an integration with the Countdown theme?

Yes, you can add an Optin Fields element to your campaign as well to configure an integration.

What campaign types support countdown timers?

All campaign types support the countdown timer element.

What’s the point of having a timer that restarts for every visitor with the Dynamic timer option?

Creating a sense of urgency for your visitors is one of the best ways to boost your conversion rate. When our purchasing decisions are based on urgency, we automatically lean towards the “take action” route, because we’re afraid of missing out.

Can I track a conversion or run a script when the countdown ends?

Yes. See our guide on how to use success actions on your campaigns.

How do I translate the text ‘Days’, ‘Hours’, ‘Minutes’, and ‘Seconds’ into another language?

You can translate it with a bit of custom CSS. You can use the following CSS and change the text accordingly:

html div#om-{{id}} .{{ns}}-CountdownElement--wrapper .{{ns}}-days .unit-days,
html div#om-{{id}} .{{ns}}-CountdownElement--wrapper div.{{ns}}-hours .unit-hours,
html div#om-{{id}} .{{ns}}-CountdownElement--wrapper div.{{ns}}-minutes .unit-minutes,
html div#om-{{id}} .{{ns}}-CountdownElement--wrapper div.{{ns}}-seconds .unit-seconds {
 display: none;
}


html div#om-{{id}} .{{ns}}-CountdownElement--wrapper div.{{ns}}-days:after {
    content:'DAYS';
    display: block;
    font-size: 13px;
}

html div#om-{{id}} .{{ns}}-CountdownElement--wrapper div.{{ns}}-hours:after  {
    content:'HOURS';
    display: block;
    font-size: 13px;
}

html div#om-{{id}} .{{ns}}-CountdownElement--wrapper div.{{ns}}-minutes:after   {
    content:'MINUTES';
    display: block;
    font-size: 13px;
}

html div#om-{{id}} .{{ns}}-CountdownElement--wrapper div.{{ns}}-seconds:after  {
    content:'SECONDS';
    display: block;
    font-size: 13px;
}