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

widget

#1

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

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


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


[How To] Add A Countdown Timer In Unbounce
Any way to add countdown timer or urgency?
#2

Hi Noah, This is Sumi. I have a question. Is this mobile responsive? It did
work out for desktop but not for mobile version. Please advise.

Thank you,


#3

I’ve been using this https://countingdownto.com


#4

Thank you! I will try this.


#5

Hey @Sumire_M yep it’s mobile responsive and can be fully adjusted to your liking in Unbounce.

I actually forgot to enable the mobile version of the demo page, so thanks for pointing that out!


#6

This is excellent, thank you.

I’m trying to get the code to play nice with a slightly different format, with the labels (Days, Hours etc) appearing below each number. Basically I want to have each number in separate text box, with the labels also in their own text elements so I can align things manually. Is that possible?


#7

@Noah Is there a way to set this for a specific time zone?


#8

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!


#9

Hi there, thanks for this, worked a treat! :slight_smile: 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! :slight_smile:


#10

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

Thanks!!


#11

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


#12

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


#13

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