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.
But why stop there? We've also 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.
Without further ado, we're happy to announce...
How To Add A Countdown Timer In Unbounce!
You can see this in action (built in Unbounce) here:
WARNING: YOU ARE ENTERING DEVELOPER TERRITORY
Here's the script: https://gist.github.com/noahub/c530eb73b31af677e3db9a80762acdf1
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
Want to take your Unbounce landing pages + convertables to the next level?
Check out the Ultimate List of Unbounce Tips, Scripts & Hacks