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?

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

Page 2 / 2

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

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.

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

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

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

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

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

How to Install in Unbounce

Grab the latest script here:

Step 1.

Step 2.

Step 3.

Step 4.

Reply

Sign up

Log in to the Unbounce Community

Scanning file for viruses.

This file cannot be downloaded