Easy Javascript/AJAX Exit Pop up script – Creates div overlay on page exit | AndySowards.com :: Daily Professional Web Design, Development, Programming Freelancer, Hacks, Downloads, Math and being a Web 2.0 Hipster?

66
Comments

August 31, 2008

Easy Javascript/AJAX Exit Pop up script – Creates div overlay on page exit

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

So the other day a client requested that when a visitor leaves any page on the site, they be greeted by an alert (such as ‘alert(‘this is your alert’);’) and if they click ‘Cancel’ they then go to an alternate ‘Exit Pop’ page that acts as a last ditch effort page to salvage a sale, or an opt-in, or dignity, what have you. Otherwise they just click ‘OK’ and go on their merry way in the opposite direction.

Usually I would just grab code from another page that I had done something similar on, but If you have ever dealt with old code before, You have either forgotten exactly what you needed to change in order for it to work ‘out of the box’ for your new situation, so you end up wasting about 10 minutes testing to get it right.

So I decided to streamline the process once and for all!

I had searched around the Googleverse for a similar simple script, but could not find an easy to use one that was contained in basically one easy to use file that did not include a kitchen sink of un-needed features.

I will try to explain my code. So here we go:

First, the page you want the action to happen on, in our case, is index.php

This is the only important bit of code needed on that page.

<script type="text/javascript" src="scripts/as_exitPop.js"> /*********************************************** |A|n|d|y|S|o|w|a|r|d|s|.|c|o|m| ------------------------------------------ * Easy Javascript/PHP Exit Pop up script @ AndySowards.com Developer's Blog (www.andysowards.com) * This notice MUST stay intact for legal use * Visit Andy Sowards at http://www.andysowards.com/ for full source code ***********************************************/ </script>

This is of course the code that includes the .js file(which will do all of our work) and will of course preserve my copyright information(which is creative commons, so basically you can do whatever you want with it, but please give me credit for it.). I usually place this code before the ending tag, but I have not tried it in the head code. Give me feedback if you try it that way!

Next is the actual .js file, which is called ‘as_exitPop.js’ and is located in the ’scripts’ folder:

//EDIT HERE ONLY

var ExitPopURL = ‘http://www.andysowards.com/dev/exitpop/exit.php’; //This is the URL where your ‘exit page’ is located.

/* NOTE: If you experience an error it is most likely due to the strict AJAX security, make sure that you are accessing the correct URL, for example, if you have http://domain.com in your browser, and http://www.domain.com in the ‘ExitPopURL’ then there will be a conflict. they must both match. .htaccess to ensure that your visitors are visiting www. is good practice here.*/

var AlertBox = “*****************************************************\n\nWait! Stop! Don’t Go!\n\nBefore leaving, please leave a comment on the \n\nscript post and share your suggestions.\n\nThanks for visiting AndySowards.com.\n\nAndy \n\n*****************************************************”;

// This is what the alert() pop up verbage says.

//DO NOT EDIT BELOW This LINE (Unless of course your Savvy!) ——————————

There is more to this .js file of course, but for the moment, this is all you really need to worry about.

First you see a var called ‘ExitPopURL’ and Hopefully is self explanitory to what it is. all you have to do is edit this in the .js file to be the url that points to your ‘exit pop’ page. Which means this is the page that will be seen if the user chooses to give you a ’second chance’.

Second, you see a variable called ‘AlertBox’, Again, hopefully self explanitory, but this is the variable that contains the text that will be seen in the javascript pop up alert box. You can change this to any verbage you would like.

Now for the next bit of code:

window.onload = function(){ // this is where we start our journey... createExitPop(); }// end function onunload

What is happening here is that the createExitPop(); function(which is declared next) is running when the browser first loads the page. So basically when the page loads, your exit pop is hiding, like a tiger, waiting for someone to try and leave.

Next is your basic AJAX function, I will not explain this here because there are countless references and explanations of AJAX elsewhere:

function ajaxGET(divId, page, effect) { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch(e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { alert("Your browser does not support AJAX!"); return false; } } }

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
if(effect == ‘collapse’) { document.getElementById(divId).style.display=’none’; }
else { document.getElementById(divId).innerHTML=xmlHttp.responseText; }
}
}
xmlHttp.open(“GET”,page,true);
xmlHttp.send(null);
}

Next, Lets declare that createExitPop function:

function createExitPop() { var theBody = document.getElementsByTagName('body')[0]; var newdiv = document.createElement('div'); newdiv.setAttribute('id','ExitDiv'); theBody.setAttribute('id','body'); newdiv.setAttribute('style', 'width: 100%; height: 100%;');

// put div on page
theBody.appendChild(newdiv);

//add exit pop to page (contents are from your exit.php(or whatever you named it) page)
document.getElementById(‘ExitDiv’).value = ajaxGET(‘ExitDiv’, ExitPopURL);

// style exit pop to resemble its own page
document.getElementById(‘ExitDiv’).style.display = “none”;
document.getElementById(‘ExitDiv’).style.top = ‘0px’;
document.getElementById(‘ExitDiv’).style.left = ‘0px’;
document.getElementById(‘ExitDiv’).style.position = ‘relative’;
document.getElementById(‘ExitDiv’).style.backgroundColor = ‘#FFFFFF’;

}// end createExitPop

Here we are taking the body tag, assigning it to the ‘theBody’ variable and then setting an attribute to reference it, in this case we are setting the id of ‘body’.

Then we are creating a whole new div and calling the variable holding it ‘newdiv’. We then do the same thing with the new div that we did with the body tag, and add an attribute, an id of ‘ExitDiv’.
We also set some styles for our new div, in this case we set the width and height.

We then append the new div child to the body of the document. Once our new ‘ExitDiv’ is in the document, we can reference it using the DOM. We are using AJAX to inject our ‘exit.php’ contents into the div using the variable ‘ExitPopURL’ as the reference for content.

We then just add some styles and customize our ExitDiv.

We are almost done, Here is where the magic happens!

isExit = true;

function ExitPop(isExit) {
if(isExit != false) {
isExit=false;
isPop = true;

var bodyTag = document.getElementById? document.getElementsByTagName(“BODY”)[0] : document.body;

// add id=”body” so that it can be referenced.
bodyTag.setAttribute(“id”, “body”);

//replace body text with exit pop
bodyTag.innerHTML = document.getElementById(‘ExitDiv’).innerHTML;
return AlertBox;
} // end if
}// end function

window.onbeforeunload = function(){

// Lay down an exit pop!!
return ExitPop(isExit);

}// end function onunload

Here we set the variable ‘isExit’ to true. Why? Because if they try to do anything other than access an ‘isExit=false’ tagged link or form, then they are trying to leave the page! And we cant have that now can we? Of course not.

Inside the ExitPop function its parameter is the ‘isExit’ variable, it is evaluating whether or not it is true or false. If true, then the function replaces whatever is in the body tag with the inner HTML of the ExitDiv, which in turn makes the page have the content of your ‘exit.php’ page. An alert then pops up asking the user what they want to do, and you select the copy that goes in there using the ‘AlertBox’ variable.

Then, with the magic of the window.onbeforeunload method, before the window loads another page, it calls our ExitPop function and references the current state of the ‘isExit’ Variable.

Once the alert pops up, If they choose ‘OK’ they go. If they choose ‘Cancel’ they stay. Simple right?

Lastly, the only thing left is to make your ‘exit.php’ page look however you want! and the page will replace the with whatever is in your ‘exit.php’ file, and of course you can name the ‘exit.php’ file whatever you want.

One last note, if you have navigational links on your page that need to NOT trigger the exit pop functionality, simply add this attribute to the link ‘onClick=”isExit = false;”‘ or if you are using a form, then it would be ‘onSubmit=”isExit = false;”‘ and you should sneak past the security and on to the desired page .

Hope you enjoy this and it helps save you time or make you money, and if you run into any trouble or have suggestions on making it better, let me know and I will implement the good ones!

For a Live Demo Example Click Here.

To download the original source code click here Easy Javascript/AJAX Exit Pop up script

by:Andy Sowards Thx 4 Reading!

Person Behind This Virus

Im a professional Freelancer specializing in Web Developer, Design, Programming web applications. Im an Avid member of the Design/Development community and a Serial Blogger. follow me on Twitter @AndySowards

Don't Miss A Thing - Syndicate!

Subscribe Via Email!

If you like this, You'll love These.

Tags: AJAX, DOM, Easy Javascript, Exit Pop, Exit Traffic, Exit Traffic Scripts, free script, Javascript, Javascript/AJAX, On Exit Pop Up, Salvage Leads, Salvage Sales, script, time saver, Traffic, Traffic Capture, tutorial, webmaster tools, XML HTTP REQUEST, xmlHttp

Do you think hosting is a jungle? Me too…

Google Chrome or Go Home. Top 5 Reasons to give in.

There are 66 Responses so far
Leave Your Input! »

Reply
Yang Yang August 23, 2010 @ 11:19 pm

Hello Andy,
Your free exit pop up script is great. In fact, it was so great that I decided to make a tutorial for it! My tutorial has pictures and easy to follow instructions. I have included a link to this post in my tutorial. You can find it at
http://exitpopupcode.com/free_exit_popup_script/?page_id=24
No offence, but your instructions were hard to follow because there were no pictures.

Reply
Andy Sowards August 24, 2010 @ 6:45 am

lol thanks Yang – I have been so busy I have had no time to devote to making the exit popup code easier to use – much appreciated!

Reply
JRF August 20, 2010 @ 2:08 pm

I fixed that bug on when you hit cancel it allows you to navigate out with out prompting the alert, by simply adding:

function ExitPop(isExit) {
if(isExit != false) {
window.location.reload()
isExit=false;
isPop = true;

var bodyTag = document.getElementById? document.getElementsByTagName(“BODY”)[0] : document.body;

the window.location.reload() just simply reloads the page and seems to fix that issue.
Reply
dan June 16, 2010 @ 7:52 am

When visiting the page, it appears as all blank. Then when refresh is clicked, the popup activates and the page behind shows back up again. Any idea?
Reply
Andy June 10, 2010 @ 3:53 pm

Hey Andy
I tried your code. Its almost working 100%. Just 1 problem though. I have a page which utilises a javascript opt-in form from Aweber. I dunno if that is a problem or not, but my opt-in form doesn’t seem to want to show up when it re-directs to that page.

It also seems to interfere with the page design. Any clue as to what could be wrong? Cheers.
Reply
Michael Hopkins May 20, 2010 @ 8:09 pm

Thanks very much for this! The details above were a little difficult to follow, but after downloading the script it was EASY to implement.

Thanks again.
Reply
Andy May 5, 2010 @ 5:26 pm

Hi,

Love the script! Having a few problems, namely Chrome and IE – Haven’t tested in Opera yet – could really use some help if you have any updates to the script.
Reply
michael April 18, 2010 @ 7:11 pm

I’ve had more trouble with this script then probably anything else I’ve ever tried to do.

Anyways, the page I’m trying to get it working on is http://www.health5news.com/test.php

I managed to swipe some code and get the cookie version of the script working on http://www.daily-tribune-news.com

but for some reason I cannot get it to work on the health5news page. So I installed your script and it sorta works… you can see for yourself, but basically it stops them when they try to leave, but when they click cancel to see the additional offer, the page freezes… I have no clue what the issue is. Any help would be greatly appreciated and I might even buy you a beer or 2.
Reply
Mark March 4, 2010 @ 5:17 pm

Thank you Andy. This is a great script. A jQuery version would be amazing! Please, please post that as soon as you are able.

Would really love to have a similar script with no alert and a modal window, but I will try to tackle that myself, let you know how it goes. Thanks again for sharing with the rest of the community. And please do that jQuery version! Best.
Reply
Andy Sowards February 19, 2010 @ 4:50 pm

Here is an updated version of the cookie script previously mentioned —–
————————————->

//DO NOT EDIT BELOW This LINE (Unless of course your Savvy!)
——————————

var exp = 1; // the number at the left reflects the number of days for the
cookie to last
// modify it according to your needs

var running = false
var endTime = null
var timerID = null
function startTimer() {
running = true
now = new Date()
now = now.getTime()
endTime = now + (1000 * 60 * 1) // change last multiple for the number
of minutes , make sure it matches with set timeout below
showCountDown()
}
function showCountDown() {
var now = new Date()
now = now.getTime()
if (endTime – now <= 0) {
stopTimer()

} else {
var delta = new Date(endTime – now)
var theMin = delta.getMinutes()
var theSec = delta.getSeconds()
var theTime = theMin
theTime += ((theSec < 10) ? “:0″ : “:”) + theSec
document.forms[0].timerDisplay.value = theTime //calls the time to
display in form input with “theTime” id
if (running) {
timerID = setTimeout(“showCountDown()”,1000)
}
}
}
function newCookie(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 nameSG = name + “=”;
var ca = document.cookie.split(‘;’);
for(var i=0; i var c = ca[i];
while (c.charAt(0)==’ ‘) c = c.substring(1,c.length);
if (c.indexOf(nameSG) == 0) return c.substring(nameSG.length,c.length); }
return null; }

window.onload = function(){
// this is where we start our journey…
createExitPop();
}// end function onunload

function ajaxGET(divId, page, effect)
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch(e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch(e)
{
try
{
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch(e)
{
alert(“Your browser does not support AJAX!”);
return false;
}
}
}

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
if(effect == ‘collapse’) {
document.getElementById(divId).style.display=’none’; }
else {
document.getElementById(divId).innerHTML=xmlHttp.responseText; }
}
}
xmlHttp.open(“GET”,page,true);
xmlHttp.send(null);
}

function delayedRedirect(){
window.location = “/finaloffer.html” // this is where you specify your
3rd (well technically second page), sorry you missed the sale or new offer
page
}

function createExitPop()
{
var theBody = document.getElementsByTagName(‘body’)[0];
var newdiv = document.createElement(‘div’);
newdiv.setAttribute(‘id’,'ExitDiv’);
theBody.setAttribute(‘id’,'body’);
newdiv.setAttribute(’style’, ‘width: 100%; height: 100%;’);
// put div on page
theBody.appendChild(newdiv);
//add exit pop to page (contents are from your exit.php(or whatever you
named it) page)
document.getElementById(‘ExitDiv’).value = ajaxGET(‘ExitDiv’, ExitPopURL);
// style exit pop to resemble its own page
document.getElementById(‘ExitDiv’).style.display = “none”;
document.getElementById(‘ExitDiv’).style.top = ‘0px’;
document.getElementById(‘ExitDiv’).style.left = ‘0px’;
document.getElementById(‘ExitDiv’).style.position = ‘relative’;
document.getElementById(‘ExitDiv’).style.backgroundColor = ‘#FFFFFF’;
}// end createExitPop

isExit = true;

function ExitPop(isExit) {
if(isExit != false) {
isExit=false;
isPop = true;
var bodyTag = document.getElementById?
document.getElementsByTagName(“BODY”)[0] : document.body;
// add id=”body” so that it can be referenced.
bodyTag.setAttribute(“id”, “body”);
//replace body text with exit pop
bodyTag.innerHTML = document.getElementById(‘ExitDiv’).innerHTML;
setTimeout(‘delayedRedirect()’, 60000); //set timeout for second page( time
in milisecs ie 60000=60 secs
window.startTimer(); // starts the timer on exit
return AlertBox;
} // end if
}// end function

window.onbeforeunload = function(){
// Lay down an exit pop!!
var num = readCookie(‘celeb1′)
if (num < 1) {
newCookie(‘celeb1′,’testcookie1′, exp);
return ExitPop(isExit);

}

}// end function onunload
Reply
Andy Sowards February 13, 2010 @ 8:09 pm

Hey Guys, Just wanted to share with you guys an addition to this script – A Visitor of the site put together an addition to this script that allows you to set a cookie – Possibly you can use that cookie to prevent the popup showing for people who have visited the site before, or who have visited in the past week or however many days you would like to set it for.

You can find the script below:

//DO NOT EDIT BELOW This LINE (Unless of course your Savvy!) ——————————

var exp = 1; // the number at the left reflects the number of days for the cookie to last
// modify it according to your needs

function newCookie(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 nameSG = 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(nameSG) == 0) return c.substring(nameSG.length,c.length); }
return null; }

window.onload = function(){
// this is where we start our journey…
createExitPop();
}// end function onunload

function ajaxGET(divId, page, effect)
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch(e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
if(effect == ‘collapse’) { document.getElementById(divId).style.display=’none’; }
else { document.getElementById(divId).innerHTML=xmlHttp.responseText; }
}
}
xmlHttp.open("GET",page,true);
xmlHttp.send(null);
}

function createExitPop()
{
var theBody = document.getElementsByTagName(‘body’)[0];
var newdiv = document.createElement(‘div’);
newdiv.setAttribute(‘id’,'ExitDiv’);
theBody.setAttribute(‘id’,'body’);
newdiv.setAttribute(’style’, ‘width: 100%; height: 100%;’);

// put div on page
theBody.appendChild(newdiv);

//add exit pop to page (contents are from your exit.php(or whatever you named it) page)
document.getElementById(‘ExitDiv’).value = ajaxGET(‘ExitDiv’, ExitPopURL);

// style exit pop to resemble its own page
document.getElementById(‘ExitDiv’).style.display = "none";
document.getElementById(‘ExitDiv’).style.top = ‘0px’;
document.getElementById(‘ExitDiv’).style.left = ‘0px’;
document.getElementById(‘ExitDiv’).style.position = ‘relative’;
document.getElementById(‘ExitDiv’).style.backgroundColor = ‘#FFFFFF’;

}// end createExitPop

isExit = true;

function ExitPop(isExit) {
if(isExit != false) {
isExit=false;
isPop = true;

var bodyTag = document.getElementById? document.getElementsByTagName("BODY")[0] : document.body;

// add id="body" so that it can be referenced.
bodyTag.setAttribute("id", "body");

//replace body text with exit pop
bodyTag.innerHTML = document.getElementById(‘ExitDiv’).innerHTML;
return AlertBox;
} // end if
}// end function

window.onbeforeunload = function(){

// Lay down an exit pop!!
var num = readCookie(‘celeb1′)
if (num < 1) {
newCookie(‘celeb1′,’testcookie1′, exp);
return ExitPop(isExit);
}

}// end function onunload

//————————-
SCRIPT ENDED ABOVE

Thanks everyone for your contributions, If you have an addition to this script leave it here in the comments or send me an email! Thanks!

Reply
will February 15, 2010 @ 4:19 pm

hey andy i did some more revisions…i am using the script for affiliate sales, as i am guessing most ppl who need this are…so what i did was make a trigger when they leave the page to start a timed redirect with a counter….this way you can offer a buyer a special and give them a time limit and then redirect them to an alternate page if time elapses…should really increase sales and with the cookies set you can honestly tell them this is a one time offer….

on the 3rd page when they miss the offer maybe leave an email, b/c ppl will email when they know you are serious that it was a one time offer…they are more likely to take quick action and you appear more than just another pop up marketer, but rather offering a true discount
Reply
TK March 24, 2010 @ 11:43 am

I have tried your cookie version but the problem is that the set cookie is included in the beforeunload function. while the initial first page loads, the cookie seems to not set but then if I click around my site the cookie gets set even though the popup doesn’t get triggered (popup=false etc)
should the cookie be set once the popup actually gets triggered and the popup page gets shown, maybe put it in the exit.php file? I can’t seem to get that to work though. Thanks for any help.
Reply
JRF August 20, 2010 @ 1:45 pm

Hey Andy cool script but I am super surprised no one has ever caught this major bug in it. Click an external link or try to navigate out with out the onExit=”false” and promp the alert box, click cancel and then click or type the external link again, it lets you leave with no alert.

Reply
Wallace Kline February 6, 2010 @ 7:25 pm

Thank you so much Andy! Your script just saved me 67 dollars. I would have bought Exit Splash is I didn’t find your website. There is one thing that you should know. The instructions you provided are very hard to follow. Also, please move the source code link to the top of the page. I almost couldn’t get the code to work because of a bad src link. The link you provided didn’t work. I had to replace it with the real file location. You should include this detail in the instructions. Sorry, if I seem critical. You’re a genius! Your graphics are radical!

Reply
Andy Sowards February 6, 2010 @ 7:40 pm

@Wallace Kline – Oh Great! So you are going to give the $67 to me right? LOL JK (Feel free to donate of course!)

No worries! Thanks for the constructive criticism – This script has been very popular and receives a lot of use – and It is over 1 year old now, so I will soon be re-building this post to be easier to follow, and probably building a jQuery version of this script as well so it will be even easier to use – I just haven’t had a chance to do that yet! Thanks though for your kind words .

Reply
Daniel December 19, 2009 @ 4:28 pm

Awesome! Thank you so much. This is so close to what I was looking for.

Reply
Reggie February 2, 2010 @ 2:42 pm

Hey Andy,

Thank you for the script. It’s just what I’ve been looking for.

I do need to understand one additional thing since I’m a total newbie to this…

Would you give me an example of how to correctly add the onClick=”isExit = false attribute to some links on my sales page (also the ‘onSubmit=”isExit = false attribute to my form)?

Everything else works just great! Luv the script.

Thanks in advance.

Reggie

Andy Sowards February 6, 2010 @ 7:37 pm

@Reggie – Sure thing, For links – Do this:

If your link looks like this:

<a href="buystuff.php" rel="nofollow">Buy my product now</a>

then just change it to this:

<a href="buystuff.php" onClick="isExit=false;" rel="nofollow">Buy my product now</a>

And that should do it.

For Forms:

If your starting form tag looks like this:

<form id="buyStuff" name="buyStuff" action="processBuy.php" method="POST">

then just change it to this:

<form id="buyStuff" name="buyStuff" action="processBuy.php" method="POST" onSubmit="isExit = false;">

That should do it!

These are primitive ways to add event handlers to things – but probably the easiest to explain. I will be updating this post soon to include more options and examples to non-Obtrusively add event handlers to your links and forms.

Thanks!

Reply
d1m1 December 13, 2009 @ 2:23 am

Hi, just wanted to say thanks: the script works perfectly; just what I was looking for. Just a thing though. I’ve been looking at the source code, and maybe I’ m missing something, but is there any way to change the confirm -or at least what I think is a standard javascript confirm()- that pops up into an alert?
Thanks again.

Reply
Andy Sowards February 6, 2010 @ 7:32 pm

@D1M1 – Sure, you should be able to change the confirm() function to the alert() function – You may need to change a few other things – but Check back here soon, I will be updating this post (or probably making a new post) that will give options and probably include jQuery support

Reply
Adam Arnold November 22, 2009 @ 11:44 pm

Hey andy, I just noticed your demo now works on IE8… Was script updated?

Reply
Adam Arnold November 24, 2009 @ 4:47 am

…allas Opera fails still

Reply
Trey Murray November 17, 2009 @ 4:11 pm

Need some help. Would like to popup a window instead of alert when the user leaves the page. I had something similar working using the onbeforeunload event handler and calling a hidden layer. I tried to integrate this into your code, however so that we could get the redirect and a popup and it shoots up the alert with [object] in the box. Any suggestions?
Reply
Andy Sowards November 4, 2009 @ 3:19 pm

Thanks Tdawg! Really Appreciate it
Reply
Adam Arnold October 28, 2009 @ 4:27 pm

This worked awesome, I put it on my site and great!… except I use Firefox, which it works in, but not IE8 nor Opera10… ohh well looks like I be deleting this

Reply
Andy Sowards October 28, 2009 @ 4:29 pm

Thanks Adam for letting me know, I haven’t had a chance to test it in IE8 or O10 – I will work on revising the script

Adam Arnold November 1, 2009 @ 4:33 am

Tried a few things but I am not gr8 with JS.

I did add an alert to tell people what to do, I see a lot of sites use this method:

bodyTag.innerHTML = document.getElementById(‘ExitDiv’).innerHTML;
// added
alert(‘Press “CANCEL” on the next box for your Special Offer!!!’);
// end added
return AlertBox;
Adam Arnold November 17, 2009 @ 9:01 pm

Hey Andy, any luck with getting this working on new browsers?

Reply
Julez September 23, 2009 @ 7:15 am

Hi Andy!

I was trying to install the script in my page but to no avail.. it didn’t work out..

first of all, do the need to be in PHP or can it be in HTML also with the exit page.. I try to paste the code into HTML page.

Hope you can answer me because i badly need this one.

Thank you and more power.
Reply
pallavan July 8, 2009 @ 1:34 am

But this exit popup triggers out when you refresh the page.. is it possible to prevent this..
Reply
Aroy July 4, 2009 @ 7:43 am

Hi Andy,

[Please ignore my earlier comment. I failed to insert the code there)

It's a cool script that you have got. But I have a rather unusual problem. I have an Flash audio player embeded in the web page. When i tried to play the audio player the script is getting active. It's a embeded "object" thing and I am clueless where to put this code - onClick="isExit = false;" so that the popup doesn't become active. I think the same problem could occer if somebody has a youtube Video embeded in the webpage and tries to play it.

Please suggest a solution to this problem.

The code is as follows -

[CODE]

[/CODE]
Reply
Andy June 18, 2009 @ 8:29 am

sorry script code did not paste in but can be seen here near top of page:

andynock dot com /new

Thanks
Reply
Andy June 18, 2009 @ 8:27 am

Hi Andy

Is it possibe to stop the exit page appearing when a opt-in form is submitted such as:

//GetResponse popup code

Thanks in advance.

Andy
Reply
Rob June 11, 2009 @ 9:23 am

Hi Andy,

I was wondering if I can swap the function of OK and CANCEL button when pop-up window appears.

So, when users click OK then he/she will stay on the exit.php and when CANCEL button clicked, he/she leaves forever.

can we do that?
Reply
Martin June 9, 2009 @ 1:36 pm

Great script really helpful in getting my head around this. I have some questions though:
1. Do we have to call the alert box? The formatting looks so plain. Could we replace that with a fully formatted layer?
2. is it possible to change the buttons at the bottom to different things (Cancel to ‘Stay on this page’ or Ok to ‘Not interested’.
Reply
David April 24, 2009 @ 11:35 am

Really cool script. Is it possible to have the exit page defined an external link and to have the OK and Cancel functions reversed?

Here’s the example:

You’re about to leave the site and then you are prompted with a prompt that says, “Would you like to visit site A on your way out?” and then if they click ‘OK’ it would take them to the URL defined as the exit page.

I was hoping your script would be easily modified to work that way.

Would love to hear your feedback/suggestions.

Thanks buddy!

Dave
Reply
Andy February 3, 2009 @ 5:52 pm

@Lucas, Thanks! As of right now, all you have to do is add the isExit=false onclick attribute to the link you do not want the exit pop to fire on. In future releases I will try to detect links that are not pointing to your domain and automatically set the links up on the page.

Thanks!
Reply
Lucas January 29, 2009 @ 3:01 pm

Hello!, great stuff, just a question, is there a way to load the popup ONLY on domain exit? and not on page exit?????????
Reply
dave November 18, 2008 @ 2:32 pm

is it possible to change the buttons at the bottom to different things (Cancel to ‘Stay on this page’ or Ok to ‘Not interested’. If so is it possible to modify the line just above the functions?

Thanks.
Reply
Matt November 18, 2008 @ 12:18 pm

Can you alter the code so that instead of the exit changing everything between the body tags, it changes everything inside of div id=”X”?
Reply
Andy October 17, 2008 @ 4:41 pm

Hey Loi,

Great!

Well #1, Just continue to modify the DOM and manipulate the body tag, just as we did the last 2 times to change the body background color and image. Do some google searches to figure out how to modify other things.
Because the options are limited only to your imagination.
You really shouldn’t need to change much else.

#2. Try this.

myVar = “MyTitle”
document.title= myVar

For more assistance look at the example here: http://homepage.ntlworld.com/kayseycarvey/document2.html

Hope this helps!
Reply
Loi October 16, 2008 @ 6:21 pm

OK, got it all working so far. Just a couple more questions.

1. How could I change the body style class from the original page to suit that of the exit page?

2. Also, is it possible to change the page title?

The second question is not as important but it would be great if you could provide a solution.

Many thanks again Andy. I look forward to your response!

Loi
Reply
Andy October 15, 2008 @ 10:16 pm

Loi,

Glad you could get it working.

In order to do the body background image try this.

Just put this line of code below the last one that was inserted into the javascript file that changed the background color.

document.body.background=”images/bg640×480.gif”;

I would use an absolute path for the image. such as ‘http://www.domain.com/images/yourimage.jpg’

Hope this helps!

Thanks!
Reply
Loi October 15, 2008 @ 9:09 pm

OK, got the color working.

Now how can I change the body background image?

Thank you very much for your help Andy, it is greatly appreciated.
Reply
Loi October 15, 2008 @ 8:33 pm

Andy,

I cannot get it to work.

Do I need to add anything to my body tags?
Reply
Loi October 15, 2008 @ 8:05 pm

Sorry about the previous post.

My question was do I need to insert anything into my body tag?

At the moment I have body bgcolor=#cccccc

thanks
Reply
Loi October 15, 2008 @ 8:03 pm

Thanks for the quick reply Andy. I inserted the code but still cannot get it to work?

Do I need to insert any code into my tag?

At the moment I have

Thanks again!
Reply
Andy October 15, 2008 @ 7:43 pm

Loi,

The easiest way to do that will be to add this javascript code into the ExitPop Function within the javascript file.

document.getElementById(‘hey’).style.backgroundColor=’#99FFCC’;

So you would need to change it to look something like this….

function ExitPop(isExit) {
if(isExit != false) {
isExit=false;
isPop = true;
var bodyTag = document.getElementById? document.getElementsByTagName(”BODY”)[0] : document.body;
// add id=”body” so that it can be referenced.
bodyTag.setAttribute(”id”, “body”);

// Change body background color
document.getElementById(‘body’).style.backgroundColor=’#99FFCC’;

//replace body text with exit pop
bodyTag.innerHTML = document.getElementById(’ExitDiv’).innerHTML;
return AlertBox;
} // end if
}// end function

Hope that helps!
Reply
Loi October 15, 2008 @ 7:33 pm

Hey Andy,

How do you change the background color when the exit popup shows? I want to use a different color for the exit.php file.

Please respond. Thank you.
Reply
Andy October 15, 2008 @ 8:27 am

Mark,

Sorry! I guess I will have to look into this issue further, Perhaps I should add that in as an option in the settings. I’ll let you know when I figure it out

Keep playing around with it tho, you never know!
Reply
Mark October 15, 2008 @ 8:24 am

Hey Andy,
Thanks for the tip, but unfortunately it didn’t work. Its not popping on anything now.
Reply
Loi October 14, 2008 @ 11:13 pm

Great information Andy.

Just a couple of questions:

1. Is it possible to change the body style, background color or image within the exit page that is displayed?

2. Also, could you change the title meta tags as well?

Thanks a bunch!
Reply
Andy October 14, 2008 @ 7:04 pm

Hey Mark,

Thanks!

Well in order to do what you are trying to do, I would set the onClick of the link to be like this

<a href=”link.php” onClick=”isExit=True; ExitPop(isExit);” rel=”nofollow”>

and in the javascript file just comment out the onbefore unload, like this.

/*
window.onbeforeunload = function(){
// Lay down an exit pop!!
return ExitPop(isExit);
}// end function onunload
*/

Or backup the file and remove that all together.

Now whatever link you give that attribute should trigger the exit pop.

Let me know if this works for you, if not, then Its a similar method as this.

Thanks!
Reply
Mark October 14, 2008 @ 3:55 pm

Hey Andy. Great script, but I wanted to know if I can do the opposite. Have it run if only certain buttons are selected.
I tried messing with the isExit section, but to no avail. Any pointers?
Thanks.
Reply
invis September 29, 2008 @ 2:14 pm

Hi Andy.
THank’s! It is work great.
Reply
Andy September 28, 2008 @ 11:19 am

Also, to answer your question, The way I just described would be using the regular method and no iFrames.

The reason the page is coming through with no formatting is because that exit.php page inherits its formatting from the parent page. so if you are bringing it in through an iframe, your just getting the html within the exit.php file.

Does this make sense? So if you kept your same process, and linked the stylesheet to the page to format it, then it should be fine.

Otherwise, you should try the method I explained above.

Hope this fixes your issues
Reply
Andy September 28, 2008 @ 11:15 am

Hey invis,

Thanks for giving the script a try, it Sounds like you need to use the Set and Execute script that I have used in the past. Basically, in this situation where Javascript isn’t working on the exitPop page, the Set and Execute function makes the exitPop page able to run javascript as normal.

Here is the function:

function setAndExecute(divId, innerHTML) {
/* http://saloon.javaranch.com/cgi-bin/ubb/ultimatebb.cgi?ubb=get_topic&f=20&t=006435 */
var div = document.getElementById(divId);
div.innerHTML = innerHTML;
var x = div.getElementsByTagName(“script”);
for( var i=0; i < x.length; i++) {
eval(x[i].text);
}
}

I will explain further details later, but for now, you can learn how it is used here --> http://saloon.javaranch.com/cgi-bin/ubb/ultimatebb.cgi?ubb=get_topic&f=20&t=006435

Hope this helps!

Thanks
Reply
invis September 28, 2008 @ 9:09 am

HI
I try to use this with iframe, not a div. But it not work.
Why iframe? Because I want run JavaScript on pop-up page.

I do this:
replace:
var newdiv = document.createElement(‘div’);
to
var newdiv = document.createElement(‘iframe’);
and
document.getElementById(‘ExitDiv’).value = ajaxGET(‘ExitDiv’, ExitPopURL);
to
document.getElementById(‘ExitDiv’).src = ajaxGET(‘ExitDiv’, ExitPopURL);

but when pop-up go , I saw only plain text of page NOT FORMATED HTML.
what do you think?
P.S. sorry for my english
Reply
Andy September 15, 2008 @ 6:02 pm

Jocelyn,

I believe that it is most Google-Friendly when you use it sparingly as you suggested, That is how I would use it, just to preserve a good User Experience. But it can go either way, however you feel comfortable using. I have had clients that wanted it all over their site on every page, as well as those who just use it on the “Sales” part of the site. So that if they leave during that information intensive section of the website they can try to entice them back with some cleverly placed info.

As for the “pop on refresh” from what I have researched Javascript cannot detect if the user is clicking refresh, until after the fact. But I will look into it further tonight.

Thanks again for your usage and Thoughts
Reply
Jocelyn September 15, 2008 @ 5:45 pm

Just another thought that came up. How Google-friendy do you think a popup of this nature is? Perhaps it’s a type of code best placed and used sparingly on very few pages, instead of on a whole website?
Reply
Andy September 12, 2008 @ 3:27 pm

Jocelyn,

Thank you for your insight and concern! I agree that could be a potential issue, however, other exit pop software acts in the same manner I believe. I will look into this immediately and let you know when a resolution to this ‘accidental refresh launching’ issue is found.

In the meantime, let me know if you find anything else.
Reply
Jocelyn September 12, 2008 @ 3:20 pm

So I’ve run into another problem with your script! When you refresh the page, the script activates, thinking you’re leaving (instead of just refreshing the current page). While I’m not sure how many users are going to be refreshing a page, this can be a problem!
Reply
Andy September 11, 2008 @ 5:47 pm

Hey Jocelyn,

Thanks for giving it a try!

Good job on fixing your error, I was just about to reply with the same suggestion, I looked into your implementation on your site.

Nice work by the way, I like how you are using it there

Let me know if you need any other assistance!
Reply
Jocelyn September 11, 2008 @ 5:42 pm

Okay never mind, I realized my mistake. No breaks in the message for the javascript popup.
Reply
Jocelyn September 11, 2008 @ 5:23 pm

I’ve tried implementing this on my website, but it doesn’t seem to want to cooperate with me. Everything is in place but when I navigate away from the page, the popup does not appear. Any idea what’s wrong?