Do you want to add a countdown timer to your campaign? With OptinMonster, its easy! Follow this guide to learn how to use OptinMonster’s countdown timer themes.
- Create or Modify a Campaign
- Choose a Countdown Timer Theme
- 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 – Choose a Countdown Timer Theme
Once you’ve created a campaign, in the campaign Builder navigate to the Optin panel by selecting the Optin tab.
Next, select the Switch Theme button and choose a countdown timer theme, like the Countdown theme for Floating Bar campaigns.
- Spooktacular
- Countdown (only available with the Floating Bar campaign)
More countdown timer themes are being added soon.
Step 3 – Configure the Countdown Timer
Once a countdown theme has been set for your campaign, you’ll find a new Countdown Settings section. You can configure the specific countdown settings for your campaign in this section.
You’ll now have two different timer modes to choose from:
Static Countdown
Within the Optin 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 second, 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 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: How are conversions counted when using the Countdown theme?
A: With the Countdown theme for Floating Bar campaigns, conversions are counted when the text in the coupon area is copied, as it’s intended to be filled with a coupon code, not a link or submission.
The other countdown timer themes can still show an optin form and count conversions the standard way.
Q: How do I show my Floating Bar campaign on the top of the screen?
A: You can reposition the Floating Bar campaign to show at the top of the screen instead of the bottom.
Q: Can I configure an Integration with the Countdown theme?
A: No, the Countdown campaign theme for Floating Bar campaigns is not meant to convert email subscribers and does not allow you to configure a form.
If you would like to use an integration with your countdown timer, you will need to use one of the other countdown timer themes available.
Q: Can I add a countdown timer to other campaign types?
A: No, only the themes that already have countdown timer support can show the timer. The following themes have a countdown timer:
- Spooktacular
- Countdown (only available with the Floating Bar campaign)
More countdown timer themes are being added soon.
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 add the text ‘Days’, ‘Hours’, ‘Minutes’, and ‘Seconds’ after the numbers?
A: You can add text after the numbers in the countdown with some custom CSS. You can use the following CSS to add the text:
html div#om-SLUG .NAMESPACE-element-countdown span{
display: inline-block;
}
html div#om-SLUG .NAMESPACE-element-countdown span.NAMESPACE-days:after{
content:'Days';
display: block;
font-size: 11px;
}
html div#om-SLUG .NAMESPACE-element-countdown span.NAMESPACE-hours:after{
content:'Hours';
display: block;
font-size: 11px;
}
html div#om-SLUG .NAMESPACE-element-countdown span.NAMESPACE-minutes:after{
content:'Minutes';
display: block;
font-size: 11px;
}
html div#om-SLUG .NAMESPACE-element-countdown span.NAMESPACE-seconds:after{
content:'Seconds';
display: block;
font-size: 11px;
}