A Customisable Countdown Script For Your Landers (32)

If there's one script that you'll use again and again in your landers, it's a countdown thread. They're a quick solution to the perennial scarcity problem - how to force readers to take action NOW!

Whether you want to tell people that there are [3] invitations remaining or to let them know that 353 - no, wait, 354 - people have signed up today, this script will let you do that. It'll remember the number if they refresh, and count down at a customisable rate.

This one isn't all my work, by any means. The collective brains of Stack That Money came up with this script a while ago, so rather than let it get buried, I thought I'd comment it up and post it as a sticky thread.

The Script Itself

Paste this div wherever you want the countdown to happen in your page:

<div id="spaces" style="font-size:20px;">loading..</div>

<script>
        var minSpaces = 5; //Minimum spaces to start with
        var maxSpaces = 10; //Maximum spaces to start with
        var maxDecTime = 6000; //Max time interval between decrements
         var minDecTime = 300; //Min time interval between decrements
        var redirectWhenDone = 0; //Redirect = 1 set to 0 for no redirect
        var stopSpaces = 3; //Number it will stop at if not using redirect
        var redirectLocation = 'http://www.google.com';

        if(readCookie("countdown")) {
		document.write (document.cookie); 
            maxSpaces = parseInt(readCookie("countdown"));
            minSpaces = Math.max(maxSpaces-5, 1);
        }
        var spaces = Math.floor(Math.random()*(maxSpaces-minSpaces+1)+minSpaces);

function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}        

function updateSpaces() {
            spaces--;
            createCookie ("countdown", parseInt(spaces), 14);
            document.getElementById('spaces').innerHTML = 
                '<span style="color:orange;">('+spaces+')</span> orders left!';
            var intvl = Math.round(Math.random()*maxDecTime) + minDecTime;
            if(spaces>stopSpaces){
                setTimeout(updateSpaces, intvl);
            }
           else {//No spaces left, redirect!
                if(redirectWhenDone==1) {
                    window.top.location = redirectLocation;
                }
    }}
        window.onload=updateSpaces();
    </script>

 '<span style="color:orange;">('+spaces+')</span> orders left!';

 '<span style="color:orange;">['+spaces+']</span> invitations remaining!';

 '<span style="color:orange;">('+spaces+') orders left!</span>';

        var redirectWhenDone = 0;

        var redirectWhenDone = 1;

        var redirectLocation = 'http://www.google.com';

fuuuuuuuuuuuuuuuuuuuuuuuuuck yea

Big up!

thank you!

Do you even pay for your own drinks at STM meetups? Add me to the beers-owed list.

Hey bro, i use this code on beyondhosting, it show the mistake:

(0) orders left!
PHPSESSID=e225a7b3bfc0b538ba036128dbdd1c48; LoginPage=login.php; countdown=0

what happened? Thank you very much!

Hey caurmen, I'm pretty new here and I found when I refresh the page every time, the page will show one code: "countdown=x" (x is one number). Just use the <span style="visibility:hidden;"><script>...</script></span> to hid the code, that is very perfect!

Cool, glad you found a way around it!

Great share, thanks caurmen!

I have a slight problem though (still a newbie when it comes to javascript).

This script works perfect when I preview it locally, but as soon as I upload it to the server the counter is usually set to zero and I get a string like this at the bottom of the page:

_ga=GA1.2.712959500.1398338702; countdown=0; wfvt_381747506=535a5b420036b

I'm going crazy about this, as you understand this really KILLS my CTR, hard to profit with a 4% LP CTR, lol.

Would really appreciate some help.

Odd - javascript is all client side so if it works locally it should work online.

Is the page you uploaded identical to that which you tested locally? Do you have any server-side programs running that automatically inject code or modify page content? Do you have cookies enabled?

If you built your lander with Muse, do you insert the script in Muse via Object>Insert Html

Or do you just insert the code after exporting the files to your desktop

Having trouble inserting the code without it affecting other parts of the page...

Always do code inserts post-export from Muse. You need to know exactly where the code is going.

The script part won't effect the page at all.

To get the functionality, there is no need to add another div - just design your lander in Muse to include the text that you want to replace with the countdown.

Then change that div/span's id to "spaces" in the code, and also go into the CSS and change the div's original id to spaces, and you will be good to go.

Is there a countdown timer version of this?

Great Timer!

How can I remove the "(x)" from the number so it will seem like a natural part of the text?

For example:
instead of:
Update in (14) seconds
It will be:
Update in 14 seconds?

Never used this timer in the past, I like the redirect at the end and the ability to plant cookies.

Amazing!

If you want to remove the brackets, you can just take them out of the span in the text - it should still work fine!

So you'd just edit to

 '<span style="color:orange;"> '+spaces+' orders left!</span>';

Have a question, hope someonecan assist me with this, on my localhost it works perfectly - uploaded it to RackSpace but it does not work:

Placed the following code my lander:

<div id="spaces" style="font-size:18px;">loading...</div>

<script>
        var minSpaces = 8; //Minimum spaces to start with
        var maxSpaces = 13; //Maximum spaces to start with
        var maxDecTime = 9000; //Max time interval between decrements
         var minDecTime = 1000; //Min time interval between decrements
        var redirectWhenDone = 0; //Redirect = 1 set to 0 for no redirect
        var stopSpaces = 4; //Number it will stop at if not using redirect
        var redirectLocation = 'http://www.google.com';

        if(readCookie("countdown")) {
        document.write (document.cookie); 
            maxSpaces = parseInt(readCookie("countdown"));
            minSpaces = Math.max(maxSpaces-5, 1);
        }
        var spaces = Math.floor(Math.random()*(maxSpaces-minSpaces+1)+minSpaces);

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}        

function updateSpaces() {
            spaces--;
            createCookie ("countdown", parseInt(spaces), 14);
            document.getElementById('spaces').innerHTML = 
                ' Only <span style="color:red;">('+spaces+')</span> New Registrations Left!';
            var intvl = Math.round(Math.random()*maxDecTime) + minDecTime;
            if(spaces>stopSpaces){
                setTimeout(updateSpaces, intvl);
            }
           else {//No spaces left, redirect!
                if(redirectWhenDone==1) {
                    window.top.location = redirectLocation;
                }
    }}
        window.onload=updateSpaces();
    </script>

The sad thing is that neither my affiliate network or traffic source allows countdown scripts :S.

Hi!
I'm also having problem with the script after uploading it to the server. It works perfectly well when viewing locally AND online in incognito mode (with cookies disabled) but it just shows '(0)' when the cookies are enables. Any solution?
Thanks!

In both cases, I'd recommend clearing your cookies and trying again - sounds like it might be getting confused because you have a cookie already set.

Let me know if that doesn't work!

Originally Posted by diltsi

The sad thing is that neither my affiliate network or traffic source allows countdown scripts :S.

Wow that's thinking out of the box. Thanks for that tip!

Hey i just tried this script for my mobile lander.. It just says "loading.." ANy solution to this? Thanks in advance!

Originally Posted by frshprince

Hey i just tried this script for my mobile lander.. It just says "loading.." ANy solution to this? Thanks in advance!

Originally Posted by Adamw

Hey man... that's my favorite show (fresh prince), can recite every episode word for word, not sure if I should really be proud of this or not lol... but to help out with your Q...

load it up on chrome on your laptop, right click -> inspect element -> top right corner will be a red stop sign looking icon with a number next to it, this is your errors on the page load (screen shot reference) -> click the icon, shows what your error is -> paste back what your error is here

Then we'd be able to give you better direction.

i deleted the script but i will try again

i applied to script as suggested and this is what i get?

@frshprince - can you PM me the URL of the lander? I'll have a look at it and PM you back with suggestions. At this point I think we've got to look at the implementation live on the site.

This is great! I love that it stores the countdown.

The only problem is when I refresh the page, a random error always pops below the number:
_gat_as25n45=1; countdown=60; _ga=GA1.2.980150996.1460052886

Anyone found a solution to this?

@spicyprinter - Hmm, that's weird. On all browsers, or just one?

Hi caurmen, thanks for sharing , how i can insert it in elementor page builder ? thank you!

Best way is to ask elementor where to place custom code. I guess there is a code box / element in the set in which you just paste it. At least that is how it works with some other page builders.

Originally Posted by affguru

Hi caurmen, thanks for sharing , how i can insert it in elementor page builder ? thank you!