How to Add a Countdown Timer to a Classic Builder Page

A countdown timer adds urgency to an offer by showing how much time is left. This script runs a countdown of a set number of minutes from when the visitor arrives. You can style it in the builder and fix it to a corner of the page. To count down to a specific date instead, see How to Add a Countdown Timer to a Specific Date.

This is community code, not an official Unbounce feature. Unbounce Support can't troubleshoot custom code. Test it on a published page before relying on it, and work with a developer if you aren't comfortable editing HTML, JavaScript, and CSS.

Add the timer to your page

The scripts are hosted on GitHub as Add a countdown timer to your landing page.

1. Add a text element for the timer digits and give it a default value. You can also add a containing box or an icon. Repeat this step for each timer you want on the page.

2. Select the text element and open its source view. Add class="timer" to the innermost span around the default text. Repeat this for each timer.

   

3. Copy countdown.js from the gist and add it to the JavaScripts section.
4. In the script, replace the default start time with your countdown length in minutes.
5. (Optional) Copy countdown.css into the Stylesheets section. Use the .done class to change how the timer looks when it reaches 00:00.
6. Save and republish the page.