[How To] Add A Countdown Timer In Unbounce

third-party
widget
add-on

#1

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! :clock10: :tada:

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:
http://landingpage.noahmatsell.ca/countdown-timer/


How to Install in Unbounce

Click Here for Instructions

:rotating_light: WARNING: YOU ARE ENTERING DEVELOPER TERRITORY :rotating_light:
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.


First, go grab the latest version of the script here:
https://gist.github.com/noahub/c530eb73b31af677e3db9a80762acdf1

Step 1.

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!

Step 2.

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.

Step 3.

Copy the countdown.js script and paste in the Javascript section of your page.

Step 4.

Replace the default start time with your desired countdown duration in minutes.

Step 5.

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


Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks


[How To] Add A Countdown Timer To A Specific Date
Countdown Timer
Feedback please
Any way to add countdown timer or urgency?
#2

Weeeooohoooo!! Nice one @Noah!


#3

Can you use this for days or is this just a countdown for time?

The countdown should include the titles of Days (Day when just 1 day left), Hours, Minutes and Seconds

Instructions could be better to be honest.


#4

hey @247Leads, I think this new post should address what you’re looking for: [How To] Add A Countdown Timer To A Specific Date


#5

This is a great contribution @Noah

Using it has bumped up conversions by 15%!

There are a couple of things that could really improve this code that I’d love to see :slight_smile:

1. To stop the timer at 00:00 or replace with custom text when time runs out.

2. To be able to apply the code to a timer that is visible on two locations on the page


#6

Hey @Alan_C, that’s amazing news about your increased conversions! Congrats!

More good news: I’ve updated these instructions and script so that you can add as many countdown timers to a page as you need!


#7

Hey guys I made a solution for that problem, using js
http://promotion.sunpyramid.com/tulum-vegan-fest/
I hope this help some one…if some need the code or some help to implement it just let me know and I can give you hand.
Best Regards


#8

and Thanks to @Noah because this have been a headache for many people in the past. me included


#9

What if I want to do a 5 hrs countdown? will this work? I need to do a countdown with hours 00:00:00


#11

Hey, How can I make it so the “button” deactivates when the countdown reaches zero? If you cannot do this, this becomes quite useless…


#12

Where to find VIEW SOURCE? All what I am see is JAVASCRIPT tap.


#13

If you double click the text box there is a view source option.