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.
If you want you can follow our video or check out our walkthrough documentation below the video.
- Create or Modify a Campaign
- Add Countdown Timer Element
- Configure the Countdown Timer
- 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.
Step 2 – Add Countdown Timer Element
Once you’ve created a campaign, in the campaign Builder click + Add Blocks.
Next, drag and drop a Countdown element onto you’re campaign.
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.
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.
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.
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;
}
