[How To] Add A Countdown Timer To A Specific Date

Noah
Userlevel 7
  • Noah
  • Former Unbouncer
  • 126 replies

community tips scripts banner

You may remember this from such Tips and Scripts articles as How To Add A Countdown Timer In Unbounce. However, that feature is better suited for short-term countdowns. With this post, it gives you the ability to implement a countdown that’s days, weeks, or months away.

This is perfect if you’re creating a campaign for an event, or a limited time sign-up page. Countdown timers promote a sense of urgency, and effectively boost conversion rates in a variety of marketing campaigns.

You can see this in action (built in Unbounce) here:
http://landingpage.noahmatsell.ca/countdown-to-date/

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.

Grab the latest script here:

https://gist.github.com/noahub/f1ee0415dacf9915fa9dcf82b6ef8e12

Step 1.

Create a new text element with the default text ‘00 days 00 hrs 00 mins 00 secs’. Style this text to your liking

Step 2.

Double click on this new text box and click ‘view source’. Wrap the innermost text with a new <span> tag with an id="timer". It should should look like:

<span id="timer">00 days 00 hrs 00 mins 00 secs</span>

Step 3.

Copy the Javascript snippet and paste it in your Javascript section with placement ‘Before Body End Tag’

Step 4.

Enter your countdown date.


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

31 replies

Camille_Jacques

Hi, I’m setting up a landing page for a webinar. The CTA text next to my countdown is “Register Now” but I would like it to be “Watch Now” once the countdown hits 0. How would I be able to do that? Thanks for your help

D

Hi Agencia 1x,

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

Regards

Idan_Yatziv

Yes,
https://community.unbounce.com/t/how-to-add-a-countdown-timer-to-a-specific-date/5335

https://gist.github.com/noahub/f1ee0415dacf9915fa9dcf82b6ef8e12

Jist change the date

M

I also need this function. Did you manage to solve this?

W

How can I make the timer work in 3 different spots on the same landing page. I was able to get the 1st timer to work but not the rest.

Idan_Yatziv

Works great but I cannot change the font type or text background

M

Thank u ❤️

G

nice solution

B

Does anyone know how to program it so it repeats?

For example, I would want the timer to repeat a 24 hour countdown everyday.

Agencia1x

Hi Elspeth

What I did was create two differents timers with 2 different Javascript code. And every timer needs to have the same name in the javascript code.

For example, the code for the timer 1: https://www.screencast.com/t/olu0GrY1x2
And this is the code for the timer 2: https://www.screencast.com/t/V1ZVLOJu

I hope this can help. I’m not programmer so I don’t know how to explain this correctly.

Agencia1x

What I did was create two differents timers with 2 different Javascript code. And every timer needs to have the same name in the javascript code.

For example, the code for the timer 1: https://www.screencast.com/t/olu0GrY1x2
And this is the code for the timer 2: https://www.screencast.com/t/V1ZVLOJu

I hope this can help. I’m not programmer so I don’t know how to explain this correctly.

Elspeth_Chalmers

How did you get it to work in both places? I’ve got the source the same for both and 1 javascript but nothing is working on the second countdown

I

What did you end up doing to fix it?

Anton_Mironov

Hey, how can I use it if need a format only minutes/seconds?

I

This may be a stupid question, but what is the timezone the counter is counting in?

B

Hi guys,

Any idea how I can make it works without the days count ? I tried to remove the corresponding code but it display the time multiple time in one line so not sure why.

Also would it be possible to always have 2 numbers per metric ?
Instead of 15:6:1 --> 15:06:01

Best,

W

Hi there!

I would like to style this countdown timer. I would like the numbers to have a different color than the text (days - hours - min - sec). Could anyone tell me how I can make it work?

for example:

  • color numbers : red
  • color text : blue

Thank you,

Agencia1x

I have made it work!

2019-02-05_0754

Agencia1x

Hi, I’m trying to implement this countdown timer. I have make 1 in the header of my page (a Fixed Header that I made) and there the timer works really well (red arrow).

But when I try to add another timer few sections below, it doesn’t work (green arrow)

How can I make it work?

2019-01-28_1213

T

will this work inside a PopUp? Anyone know how to do that?

Pete_Hilker

Removed document.getElementById(id).innerHTML += minutes + ’ secs '; and that worked!

Pete_Hilker

How would you adjust this if don’t need secs variable,

K

Not sure if this is working for me. Should I see the timer running in preview? Or only when published?

Thanks!!

B

Hi there, thanks for this, worked a treat! 🙂 I would like to be able to have the timer without the second element though, any thoughts on how I might go about that?

Thanks again! 🙂

ClickClickNY

I ran into the same problem - Desktop worked, Mobile did not. But that was because we have different elements displaying. The span ID has to be unique and cannot be reused. All I did was copy/paste the first line of the script and change ‘timer’ to a new ID (like ‘timerm’ for Mobile) and use that ID in the mobile text span. Voila!

Reply


Terms & ConditionsCookie settings