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:

http://landingpage.noahmatsell.ca/countdown-timer/

How to Install in Unbounce

Click Here for Instructions

🚨

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. 🚀

Want to take your Unbounce landing pages + Convertables to the next level?

Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

Page 1 / 1

Weeeooohoooo!! Nice one @Noah!

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.

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

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 🙂

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

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!

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

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

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

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

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

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

This is true. There should be a way to disable the “buy” button on the page, otherwise it is useless.

Better would be to actually set a cookie so that if the user refreshes the page the timer will not be reset.

Any clue how to do that?

Is there a way to add a countdown to a PopUp?

Hello Roman

Can You help me here

I need this countdown too

Thanks

Hey can’t get it to work for some reason can anyone help me out? Screen shot of source below… Ta’

Hi @ridewithelka,

Can we see the actual page? Where did you place the JS file?

Also based on your screenshot your span class is with a capital T for Timer instead of lower case t. Did you make the necessary adjustments in the script?

Best,

Hristian

Hey, great article ! I managed to create the countdown alone thanks to this article. I would like to go further : what do I need to add/change in order to have a countdown which resets itself at the end and always starts again after the countdown is finished ? thanks in advance 😉

How does this apply to implementing a countdown to a sticky banner that’s attached to the site’s navigation for instance? I’d like to provide direction to dev support.

There is only Java script code, there is no html.

The new count down to date addition isn’t working with Safari anymore, just a heads up!

Hi noah,

I create the script but how can create the css style for the script ¿? could you help me ¿? I want to change the font size and the color style.

I know that I need to create on CSS Stylesheets but I don´t know

gist.github.com

https://gist.github.com/dmartinezGN/115fa0894f7d306a7c86b566d41a9cce

Countdown "timer2"

<script>

  countdown('07/15/2021 8:00 PM', 'timer2'); //date format: mm/dd/yyyy hh:mm AM



  function countdown(dt, id)

  {

    var end = new Date(dt);

    var _second = 1000;

    var _minute = _second * 60;

    var _hour = _minute * 60;

    var _day = _hour * 24;

This file has been truncated. show original

Regards

How To Add A Countdown Timer In Unbounce! 🕙 🎉

How to Install in Unbounce

Step 1.

Step 2.

Step 3.

Step 4.

Step 5.

Reply

Sign up

Log in to the Unbounce Community

Scanning file for viruses.

This file cannot be downloaded