Countdown Timer in Unbounce

By sahibjot | UNBOUNCE

Unbounce is a great marketing platform but when it comes to some important features like a Countdown timer for a limited time offer or coupon, it's a feature that Unbounce do not provide. But still you can implement a coundown timer without coding knowledge through this post and the code below.

I mentioned in my previous post about missing features of Unbounce and shared coding tips to implement an Image slider in Unbounce.

I have come up with another solution to implement a countdown timer in Unbounce

You can see the Countdown timer demo here ->Countdown Timer in Unbounce

Countdown Timer in Unbounce


1. Create a new page in Unbounce

2. Choose a template or just select a blank template. For now select blank template.

3. In builder. pick "Custom HTML" element and drop it in the page. Then copy and paste the following code.

add custom html in unbounce

You don't have to change anything in the following  HTML code.

<div class="container">
<h1 id="head"></h1>
<ul>
<li><span id="days"></span>days</li>
<li><span id="hours"></span>Hours</li>
<li><span id="minutes"></span>Minutes</li>
<li><span id="seconds"></span>Seconds</li>
</ul>
</div>

4. Copy the following JS code and add in a new JS script named "slider".

You need to update the date in the JS to the date you want for the countdown timer. Remember You can set it for a specific date.

<script>
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
 
let countDown = new Date('OCT 13, 2019 23:59:00').getTime(),  /*Update Date and time in the brackets*/
x = setInterval(function() {
 
let now = new Date().getTime(),
distance = countDown - now;
 
document.getElementById('days').innerText = Math.floor(distance / (day)),
document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)),
document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)),
document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);
 
//do something later when date is reached
//if (distance < 0) {
// clearInterval(x);
// 'IT'S MY BIRTHDAY!;
//}
 
}, second)</script>

4. Add following CSS in the page. You can update any properties based on your preferences. But don't update the class names. If you update, make sure to update it in HTML as well.

<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
 
 
.container {
color: #fff;
text-align: center;
}
 
 
h1 {
font-weight: normal;
}
 
/*li {
padding-top:50px;
width:200px;
height:200px;
border: 2px solid #fff;
border-radius:50%;
display: inline-block;
font-size: 1.5em;
list-style-type: none;
text-transform: uppercase;
line-height: 1.2;
}
 
*/
li {
padding-top: 30px;
width: 150px;
height: 150px;
border: 4px solid #000;
/* border-radius: 50%; */
display: inline-block;
font-size: 1.5em;
list-style-type: none;
text-transform: uppercase;
line-height: 1.2;
color: #c4161c;
background-color: #fff;
}
 
li span {
display: block;
font-size: 48px;
}
 
@media only screen and (max-width:640px)
{
li span {
display: block;
font-size: 24px;
}
li {
padding:30px;
width:130px;
height:130px;
line-height: 1.2;
}
 
}
</style>

That's it. You should be able to see your countdown timer working on your landing pages now.

It's responsive and works great on mobile devices as well.

Found this post helpful? Let us know your suggestions and queries in the comment box below. We'll try to help as soon as possible.

More tips and updates related to unbounce here.

Unbounce Rating

Sign up for your 30-Days FREE Trial on your Unbounce Account Today and get 20% discount on paid accounts from Unbounce Hacks

FOLLOW US ON:-

Leave a Comment:

Leave a Comment: