Over the years, many customers have asked how to implement countdown timers in their Unbounce landing pages. And who can blame them? With a countdown timer you can create a sense of urgency with your campaign, which can drive your conversions way up.
How To Add A Countdown Timer In Unbounce!
We’ve made this countdown timer simple to add, easy to style in Unbounce, and with the option to fix it in the corner as to not disrupt your page designs.
You can see this in action (built in Unbounce) here:
How to Install in Unbounce
Click Here for Instructions
WARNING: YOU ARE ENTERING DEVELOPER TERRITORY
First, go grab the latest version of the script here:
Create and style your timer on your landing page, as seen below. At minimum include a textbox element where your timer digits will be displayed and give it a default value. While you’re at it though, why not spruce things up with a containing box and maybe a stopwatch icon? Repeat this step for multiple countdown timers!
Select your textbox, and click ‘View Source’. Add
class=timer; to the innermost span surrounding your default text. Repeat this step for every countdown timer on your page.
Replace the default start time with your desired countdown duration in minutes.
Optional: Copy the countdown.css script and paste in your page’s Stylesheets section. Add any styling you wish to the .
done class to change the style of your timer when it reaches 00:00
Can’t see the instructions? Log-in or Join the Community to get access immediately.
Want to take your Unbounce landing pages + Convertables™ to the next level?
Check out the Ultimate List of Unbounce Tips, Scripts & Hacks