Home > Programming, Servers & Scripts >

Looking for scarcity countdown script (X Spots left countdown). (38)

09-19-2012 10:51 AM #1 orlandoprofit (Member)
Looking for scarcity countdown script (X Spots left countdown).

Hi!

Where can I find a script/tool/whatever that does what I have seen on a few sites now. What I'm looking for is similar to a countdown except it's doing an "X spots left" countdown where every few seconds a spot or two that are "available" are removed.

Example:

50 spots left, sign up now!
(1 second later)
49 spots left, sign up now!
(4 seconds later)
48 spots left, sign up now!
(2 seconds later)
44 spots left, sign up now!

The only thing changing is the number and when it reaches zero maybe a redirect.

Thanks in advance.

09-19-2012 12:42 PM #2 zeno (Administrator)

Code:

<!DOCTYPE HTML>
<html>
<head><title>Countdown</title></head>	
<body>
<script type="text/javascript">
	var count = 50;
	function countdown() {
		count -= 1;
		if( count <= 0) {
			count = 0;
			xlearInterval(timer);	
		}};
	(function loop() {
		var rand = Math.round(Math.random() * (4000)) + 2000;
		setTimeout(function() {
			countdown();
			loop();  
			}, rand);
document.getElementById('seconds').innerHTML = count;
}());
</script>
<div id="seconds"></div>
</body>
</html>

Managed to figure that out ^. I have no idea how to get it to say some initial number though, it starts blank then becomes 49. It's a start.

09-19-2012 04:40 PM #3 seank (Member)

Code:

<html>
<body onload="setValue()">

<script>
var count = 5;
var isAre = 'are';
var items = 'spots';

function randomFromTo(from, to){
   return Math.floor(Math.random() * (to - from + 1) + from);
}

function setValue() {
   isAre = (count === 1) ? 'is' : 'are';
   items = (count === 1) ? 'spot' : 'spots';
   
   document.getElementById("isAre").innerHTML = isAre;
   document.getElementById("count").innerHTML = count;
   document.getElementById("spots").innerHTML = items;

   count -= 1;
   if (count > 0)
     setTimeout('setValue()', randomFromTo(500, 3000));
}
</script>

There <span id="isAre"></span> <span id="count"></span> <span id="spots"></span> left, sign up now!
</body>
</html>

09-19-2012 05:20 PM #4 fauxrillz (Member)

This rules... Just implemented it for use on a diet site. Only 49 bottles left!

I slowed it down a bit because I'd rather the person read when I have laid out but still feel that urgency!

Thanks for the share!

09-19-2012 11:23 PM #5 orlandoprofit (Member)

Thanks guys! I appreciate it. I'll check this out tonight.

09-20-2012 10:02 AM #6 Finch (Moderator)

Nice script.

If I'm tracking the stats, I normally shit my pants when I see people refreshing the page. You can almost hear them shouted "Busted!" from a thousand miles away.

I'd love to see a script that 'freezes' with 2 remaining, and then stays there for X minutes - even after refreshing.

09-20-2012 10:17 AM #7 tijn (Moderator)

This should work
its a simple php addition that drops a cookie on first load.
if they refresh once - timer will drop to 2
if they refresh again - timer will drop to 1

** I havent tested this - just typed it from memory **

But it should work

you can build on this, ie write the current timer value to the cookie via javascript.

HTML Code:

<?
if ( !isset($_COOKIE['busted']) ) {
	$timerStart = 5;
	setcookie('busted',1);
} else {
	setcookie('busted',$_COOKIE['busted']+1);
	$timerStart = $_COOKIE['busted'] > 1 ? 1 : 2;
}
?>
<html>
<body onload="setValue()">

<script>
var count = <?= $timerStart ?>;
var isAre = 'are';
var items = 'spots';

function randomFromTo(from, to){
   return Math.floor(Math.random() * (to - from + 1) + from);
}

function setValue() {
   isAre = (count === 1) ? 'is' : 'are';
   items = (count === 1) ? 'spot' : 'spots';
   
   document.getElementById("isAre").innerHTML = isAre;
   document.getElementById("count").innerHTML = count;
   document.getElementById("spots").innerHTML = items;

   count -= 1;
   if (count > 0)
     setTimeout('setValue()', randomFromTo(500, 3000));
}
</script>

There <span id="isAre"></span> <span id="count"></span> <span id="spots"></span> left, sign up now!
</body>
</html>

09-20-2012 11:12 AM #8 ajph (Member)

How about some javascript cookies!

HTML Code:

<html>
<body>
	<div id="spaces" style="font-size:20px;">loading..</div>
	<script>
		var minSpaces = 10; //Minimum spaces to start with
		var maxSpaces = 50; //Maximum spaces to start with
		var maxDecTime = 2000; //Max time interval between decrements
		var redirectWhenDone = 1; //Redirect when get get to 1 left
		var redirectLocation = 'http://www.google.com';

		if(document.cookie) {
			maxSpaces = document.cookie;
			minSpaces = Math.max(maxSpaces-5, 1);
		}
		var spaces = Math.floor(Math.random()*(maxSpaces-minSpaces+1)+minSpaces);
		function updateSpaces() {
			spaces--;
			document.cookie = spaces+'; expires=Thu, 2 Aug 2015 20:47:11 UTC; path=/';
			document.getElementById('spaces').innerHTML = 
				'<span style="color:orange;">('+spaces+')</span> orders left!';
			var intvl = Math.round(Math.random()*maxDecTime);
			if(spaces>1){
				setTimeout(updateSpaces, intvl);
			}
			else { //No spaces left, redirect!
				if(redirectWhenDone) {
					window.top.location = redirectLocation;
				}
			}
		}
		window.onload=updateSpaces;
	</script>
</body>
</html>

09-21-2012 10:59 AM #9 tijn (Moderator)

cool. i knew some better at JS then me would be able to sort this quickly

07-30-2013 11:05 AM #10 davidal (Member)

Originally Posted by ajph

How about some javascript cookies!

HTML Code:

<html>
<body>
	<div id="spaces" style="font-size:20px;">loading..</div>
	<script>
		var minSpaces = 10; //Minimum spaces to start with
		var maxSpaces = 50; //Maximum spaces to start with
		var maxDecTime = 2000; //Max time interval between decrements
		var redirectWhenDone = 1; //Redirect when get get to 1 left
		var redirectLocation = 'http://www.google.com';

		if(document.cookie) {
			maxSpaces = document.cookie;
			minSpaces = Math.max(maxSpaces-5, 1);
		}
		var spaces = Math.floor(Math.random()*(maxSpaces-minSpaces+1)+minSpaces);
		function updateSpaces() {
			spaces--;
			document.cookie = spaces+'; expires=Thu, 2 Aug 2015 20:47:11 UTC; path=/';
			document.getElementById('spaces').innerHTML = 
				'<span style="color:orange;">('+spaces+')</span> orders left!';
			var intvl = Math.round(Math.random()*maxDecTime);
			if(spaces>1){
				setTimeout(updateSpaces, intvl);
			}
			else { //No spaces left, redirect!
				if(redirectWhenDone) {
					window.top.location = redirectLocation;
				}
			}
		}
		window.onload=updateSpaces;
	</script>
</body>
</html>

This is brilliant, but is there any way to edit it so that instead of redirecting when it reaches 1, it just stops there until the user leaves? I'm not too keen on the google redirect, plus it has been causing problems when I uploaded the webpage to my server.

07-30-2013 12:02 PM #11 caurmen (Administrator)

Replace the

Code:

			else { //No spaces left, redirect!
				if(redirectWhenDone) {
					window.top.location = redirectLocation;
				}
			}

with

Code:

			else { //No spaces left, just leave 'em on one space!
spaces++;
				}
			}

That should do it.

07-30-2013 12:16 PM #12 davidal (Member)

Originally Posted by caurmen

Replace the

Code:

			else { //No spaces left, redirect!
				if(redirectWhenDone) {
					window.top.location = redirectLocation;
				}
			}

with

Code:

			else { //No spaces left, just leave 'em on one space!
spaces++;
				}
			}

That should do it.

After pasting that in, it's now stuck saying "loading.." not sure what's caused that.

07-30-2013 12:50 PM #13 caurmen (Administrator)

That's wierd. I shall test the script myself and see what's going on.

07-30-2013 01:40 PM #14 budd (Member)

Played around with it whilst im no javascript expert added a minimum time to so you can use that to slow the counter down abit

also instead redirecting it just shows

(0) orders left!

You could edit this for what ever you like it to say

or change it for an alert or use redirect as posted to another page

works across all browsers, as i said im no expert so there may be a better way

[PHP]

<html>
<body>
<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 = 1000; //Max time interval between decrements
var redirectWhenDone = 1; //Redirect when get get to 1 left

if(document.cookie) {
maxSpaces = document.cookie;
minSpaces = Math.max(maxSpaces-5, 1);
}
var spaces = Math.floor(Math.random()*(maxSpaces-minSpaces+1)+minSpaces);
function updateSpaces() {
spaces--;
document.cookie = spaces+'; expires=Thu, 2 Aug 2015 20:47:11 UTC; path=/';
document.getElementById('spaces').innerHTML =
'<span style="colorrange;">('+spaces+')</span> orders left!';
var intvl = Math.round(Math.random()*maxDecTime) + minDecTime;
if(spaces>1){
setTimeout(updateSpaces, intvl);
}
else { //No spaces left, redirect!
if(spaces==1) {

document.getElementById('spaces').innerHTML =
'<span style="colorrange;">(0)</span> orders left!';
}
}
}
window.onload=updateSpaces;
</script>
</body>
</html>
[/PHP]

07-30-2013 02:42 PM #15 davidal (Member)

Originally Posted by budd

range;">('+spaces+')</span> orders left!';
var intvl = Math.round(Math.random()*maxDecTime) + minDecTime;
if(spaces>1){
setTimeout(updateSpaces, intvl);
}
else { //No spaces left, redirect!
if(spaces==1) {

document.getElementById('spaces').innerHTML =
'<span style="color

range;">(0)</span> orders left!';
}
}
}
window.onload=updateSpaces;
</script>
</body>
</html>
[/PHP]

This one worked when I previewed it in quick n easy web builder, but when I uploaded it I got:
Currently (NaN) invitations left for MALES in [STATE]. Act now or risk missing out on all of the fun!

Dunno where the NaN came from?

07-30-2013 03:01 PM #16 bhmonkey (Member)

These countdown scripts are powerful! I implemented one on a billing page that said we were only holding their purchase for 10 minutes and they would lose it after that. The conversions on the page jumped.

Depending on traffic source, if you're trying to stay compliant-ish, saying you only have 49 more bottles left could not be allowed but saying that there are limited quantities and they only have X minutes to purchase before they lose they order and it cant be held any longer can't really be "disproved" as a false claim if that makes sense. It also pulls at them from a psychological perspective because they dont want to lose the item. Its worth a split test at a minimum!

07-30-2013 03:21 PM #17 dconstrukt (Member)

caurmen..... can you sum this all up into 1 post with all the tech stuff in it?

07-30-2013 03:31 PM #18 davidal (Member)

Originally Posted by bhmonkey

Thanks, I'd never thought about compliance. Decided to go with the countdown timer instead just to be on the safe side.

07-31-2013 02:21 AM #19 tmcalvin (Member)

It would be pretty sweet to collect all of these types of snippets etc into a collection type thread.

07-31-2013 11:53 AM #20 caurmen (Administrator)

Good suggestion, guys! I'll put that on the to-do list.

Currently my Big Project is revamping the 40-day guide, but I know stuff like this is gold for more experienced affiliates, so will try to fit it in soon.

07-31-2013 05:09 PM #21 budd (Member)

Originally Posted by davidal

Was that in Opera browser noticed same issue if refreshed and the number is on zero

Just had another play around with the code today suppose to be packing as i am moving tomorrow so not getting much work done

Anyway this seems to work still same refresh bug in Opera when at zero

But tried to combine the redirect script with this one to make it easier to test using either

Set stopSpaces to the number you want it to pause at so say if it reaches 3 as currently set it will pause but should they refresh it will continue to go down 2,1,0 etc
Set minDecTime to minimum amount seconds between countdowns so it don't go to fast
Set redirectWhenDone to 1 if you want it to redirect once it reaches stopSpaces number, So set stopSpaces to 0 if you want it to redirect at 0
Set redirectWhenDone to 0 for it not to redirect

As i said before i am no JavaScript expert so there may be improvements by others

New Code

Code:

<html>
<body>
	<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(document.cookie) {
			maxSpaces = document.cookie;
			minSpaces = Math.max(maxSpaces-5, 1);
		}
		var spaces = Math.floor(Math.random()*(maxSpaces-minSpaces+1)+minSpaces);
		function updateSpaces() {
			spaces--;
			document.cookie = spaces+'; expires=Thu, 2 Aug 2015 20:47:11 UTC; path=/';
			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>
</body>
</html>

08-02-2013 07:07 AM #22 itsjustbrian (Member)

Damn, I'm getting (NaN) as well. Why is this happening, I posted your script exactly as it is.

In preview mode it works perfectly, but when its published to the server, it doesn't work.

08-02-2013 08:22 AM #23 bbrock32 (Administrator)

Originally Posted by itsjustbrian

Damn, I'm getting (NaN) as well. Why is this happening, I posted your script exactly as it is.

In preview mode it works perfectly, but when its published to the server, it doesn't work.

Hmm this should never happen since it's Javascript and is executed on your computer , so local or server should make no difference.

Only thing , did you upload it as text or binary on ftp?

08-02-2013 11:02 AM #24 caurmen (Administrator)

OK, that is officially a wierd bug. Working on it now...

UPDATE: Right, got it.

A quick discussion with a friend who has forgotten more about Javascript than I know found the problem.

You need to replace the lines

Code:

        if(document.cookie) {
            maxSpaces = document.cookie;
            minSpaces = Math.max(maxSpaces-5, 1);
        }

with

Code:

 if(document.cookie) {
            maxSpaces = parseInt(document.cookie);
            minSpaces = parseInt(Math.max(maxSpaces-5, 1));
        }

That'll get everything up and running.

08-02-2013 06:09 PM #25 itsjustbrian (Member)

Yeah, not sure what the heck is wrong.

Upload status is set to "auto" so I don't know of this is binary or ACIII (whatever it is)

And I tried the new code changes, caurmen, and it didn't fix it.

When I used the barebones code from the thread starter, it works. But the sexier one you guys came up with, is giving me this weird error.

08-03-2013 11:05 AM #26 caurmen (Administrator)

It's still giving you NaN?

Aha.

Now that you've changed the code, try it in a new browser.

What's probably happening is that the code is working fine, but the cookie is still set in your browser - and it was set as "NaN". So the script's faithfully echoing that back to you...

08-03-2013 11:21 AM #27 itsjustbrian (Member)

Still not working

Works in preview mode (dreamweaver, etc.) doesn't when viewing it live.

Original barebones code works, the new versions don't.

I tried to clear my cookies and tried multiple browsers, still returns (NaN).

This is where the div tag is (works beautifully in preview mode):

This is where the javascript is:

Well, would love to test this script out since its pretty boss. But I see successful affiliates make shit work without it, so I'm not going to sweat it too much that I can figure this out.

If there are any other solutions, would love to hear it. Other than that, I appreciate looking into this!

08-04-2013 12:57 AM #28 itsjustbrian (Member)

Alright guys, Mr. Don't Know Shit About Coding over here has figured it out!

If any of you are getting a Nan error, it has somethign to do the cookies as mentioned earlier. Rather than try to fix it, I removed the issue completely be deleting the following codde:

if(document.cookie) {
maxSpaces = parseInt(document.cookie);
minSpaces = parseInt(Math.max(maxSpaces-5, 1));
}

Just remove that and it will work

08-04-2013 01:15 AM #29 ViperChill (Moderator)

Originally Posted by itsjustbrian

Doesn't that defeat the whole point of them remembering the last state on refresh?

08-04-2013 01:22 AM #30 itsjustbrian (Member)

Ha, this is true... but really, if a guy is going to be that skeptical and refresh... is he really our target audience?

I bet less than a fraction of 1% of visitors would refresh the page to check that.

Or maybe that is an opportunity for split testing and I could be totally wrong?

08-04-2013 02:09 AM #31 zeno (Administrator)

FYI I tested that script and it works fine in IE/Chrome but not FF. NaN = an illegal number so somewhere in the code something is conflicting with the way FF processes the JS. It definitely has something to do with minspaces/maxspaces. If you remove them from the var spaces line and just generate any old number it works fine.

08-05-2013 10:07 AM #32 caurmen (Administrator)

@Zeno - did you try commenting out the cookie lines? It seems to be the cookie that's causing everything to fall apart - or, to put it another way, crumble...

@everyone - I'd probably recommend doing what itsjustbrian recommends for now. Removing the cookie line will mean that the script doesn't do the nice "persist on refresh" thing any more, but I'd agree, that's probably not going to make a huge difference to your ROI.

I'll keep looking into this and see if I can figure out what's going wrong.

08-05-2013 01:54 PM #33 ViperChill (Moderator)

Would love to have this working - love the cookie persist idea. Understand it's not the easiest technical challenge though

08-05-2013 03:30 PM #34 caurmen (Administrator)

OK, I went back to basics and rewrote this a bit - give this one a try. It works for me on FF and Chrome.

Code:

<html>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<body>
    <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>
</body>
</html>

09-24-2013 09:07 AM #35 suipowers (Member)

Originally Posted by caurmen

OK, I went back to basics and rewrote this a bit - give this one a try. It works for me on FF and Chrome.

Code:

<html>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<body>
    <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>
</body>
</html>

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!

09-24-2013 06:11 PM #36 suipowers (Member)

Hello, i have one error, when i cleared my browser cache, it is ok, and if I refresh again, it will show the code:
countdown=x (x is your number)

Anyone have that error?

12-07-2013 09:38 AM #37 satori (Member)

Originally Posted by suipowers

Hello, i have one error, when i cleared my browser cache, it is ok, and if I refresh again, it will show the code:
countdown=x (x is your number)

Anyone have that error?

Yes, it's doing the same for me in Chrome. How to get this fixed please?

12-07-2013 11:23 AM #38 caurmen (Administrator)

Is the countdown working OK other than that?

Suipowers fixed this problem on his lander by using <span style="visibility:hidden;"></span> around the <script>tags at the bottom of the page: that should work to solve the problem!

See http://stmforum.com/forum/showthread...r-Your-Landers - a more up-to-date version of the script.

Home > Programming, Servers & Scripts >