How to Create a Countdown Timer Campaign

Do you want to add a countdown timer to your website? With OptinMonster you can easily create countdown timer campaigns to boost your sales and conversions.

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

With OptinMonster, it’s easy to add a countdown timer to your website! Follow this guide to learn how to use OptinMonster’s countdown timer element in your popups, welcome mats, floating bars, and more.

REQUIREMENTS: Countdown timers require a Pro Subscription.

If you want you can follow our video or check out our walkthrough documentation below the video.

  1. Create or Modify a Campaign
  2. Add Countdown Timer Element
  3. Configure the Countdown Timer
  4. Embed the Countdown Timer Campaign

Step 1 – Create or Modify a Campaign

First, create a new campaign or modify an existing campaign from the OptinMonster dashboard. Open the OptinMonster Builder by selecting the Edit link.

Edit Campaign

Step 2 – Add Countdown Timer Element

Once you’ve created a campaign, in the campaign Builder click + Add Blocks.

Add Blocks

Next, drag and drop a Countdown element onto you’re campaign.

Countdown Element

Step 3 – Configure the Countdown Timer

Once a countdown timer has been added to your campaign, you can click on the element to configure the specific countdown settings.

You’ll now have two different timer modes to choose from:

Static Countdown

Within the Countdown panel choose Static from the Countdown Timer dropdown.

Static Countdown Timer

The Static Timer looks the same to everyone who visits your site. You set the deadline, which is universal to every website visitor. For example, expire the timer on December 25th, 11:59 p.m EST.

You can select the end time down to the minute, and choose your timezone as well.

Static Countdown Date

When a Static Timer reaches its deadline, the timer will remain at 00:00:00 in the campaign.

Dynamic Countdown

The dynamic timer is customized for each visitor. Instead of selecting an end date, you choose the length of the timer in number of days, hours, minutes, and seconds.

The dynamic timer will begin the countdown as soon as the visitor hits the page. That means that each visitor will see a different countdown.

Dynamic Countdown Timer

When a Dynamic Timer reaches its deadline, the timer will start over automatically.

Step 4 – Embed the Countdown Timer Campaign

Finally, you’ll want to embed your campaigns on your site. Check out our platform guides for more details.

Looking for more ways to increase conversions? Check out our post on simple floating bar hacks to boost conversions.


FAQs

Q: Can I configure an integration with the Countdown theme?

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


Q: What campaign types support countdown timers?

A: All campaign types support the countdown timer element.


Q: What’s the point of having a timer that’s different for every user with the Dynamic timer option?

A: 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.


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

A: 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;
}