crazyflx
Elite Member
- Nov 9, 2009
- 1,623
- 4,870
You'll get instructions on how to create your own exit popup for increasing site conversions by getting more opt-ins, downloads, registrations or whatever else you need. It captures the users attention just as they are leaving your site, but doesn't do anything if they interact with the site (provided you send them somewhere else after they interact).
As always, I'll start this off with a demo:
Demo URL: http://crazyflx.com/exitpop/
Go to the URL above, wait until it loads, make sure your mouse is somewhere in the actual content of the page (like the middle of the page) and then slowly just move your mouse to the top of the page as if you were going to close the tab it's open in, click the back button or type in a new URL.
The page is going to look like YouTube...don't be alarmed, that's on purpose. I didn't feel like creating my own content to use on the example page, so I just am using theirs.
Of all the "unblockable popups" out there (an unblockable popup typically is referring to a JavaScript popup, not an intrusive "alert box" that won't let you leave unless you close it), the "exit popup/popover" has always been my favorite.
I've had more success using an exit popup than any other type. I should mention I use them sparingly & only where appropriate.
An "exit popup" is a popup that appears only if and when a user arrives at your page and then attempts to leave that page by either clicking the back button, closing the tab or entering a different URL to go to in their browsers navigation bar.
This effect is achieved, basically, by there being an invisible div at the top of the page that is as wide as your browsing window. When the mouse moves over the top of that div, it triggers a javascript popup. The div at the top of the page is only 10 to 20 pixels in height, so if the user moves their mouse over it, odds are nearly 100% that they are moving the mouse up and into the top of their browser to change the URL, hit the back button or close out your site and/or browser.
In other words, an exit popup really isn't all that difficult to create.
The thing is, of all the exit popup scripts I've used, I always find something wrong with them.
Here are some of the issues I've experienced with exit popover scripts:
So I recently had a need for an exit popup, but instead of looking for a ready made script, I figured I'd just make one myself. The code below does not have any of the above listed issues at all and it works exactly as I have always imagined an exit popup should function without all the errors.
Instead of creating my own pretty overlay and jquery system for making it appear and being able to configure things like overlay color, size, effects on appearing disappearing and so on, I figured I'd just use FancyBox. FancyBox is an awesome ready made tool built on the Jquery library for showing things like images, youtube videos and all kinds of other things with a "lightbox" effect (you click on an image and it gets bigger right in front of your eyes while simultaneously "greying out" the background). You can see the fancybox demo URL here with all kinds of examples.
Once you've got fancybox downloaded (which you can do from here), upload the files to the folder "fancybox" in the root of your site. Then you'll just add the following between the <head> tags of the page you want the exit popup to appear on:
FancyBox Code Portion 1
Also in between the <head> tags, you'll need the following code, which are the configurations for the appearance of the overlay & exit popup (the darkness of the background, the close button that appears, the height & width of the area containing your popup and so on). You can get instructions on how to change these from what I have used in the example demo URL at this URL on the fancybox site here:
FancyBox Code Portion 2 & Code for Proper Appearance of Exit PopUp
The code you see in GREEN above, is the code that is not part of fancybox, but is rather the code that triggers the exit popup (and makes sure it only triggers it on the users exit and not when they're moving the mouse down into the page).
The one word "various2" & "inline"you see in RED above, are the class & div ID you must use on the HTML code that will serve as the exit popup. More on this in a second.
Then, create the code for your exit popup (the HTML of what you want to appear when a person exits the page). The HTML code for the popup can go anywhere between the <body> tags of the page you want the exit popup to appear on.In the demo URL I gave in the beginning, this is the HTML code of the popup that appears:
HTML Code for PopUp Appearance
The code you use for the HTML popup, absolutely MUST BE WRAPPED in a div that has an ID, a class & the style attribute: "display:none" (all of which you can see in the first line of the example code above). Notice that the "class" & "id" values (they are in red) match the class & ID values that are in red in the code that goes between the <head> tags referenced above.
Lastly, you need to add the following as the VERY FIRST THING that appears AFTER the opening <body> tag:
Code for What Determines a User is Leaving Site
That is what triggers the exit popup, and is also what ensures that, in conjunction with the javascript, it only appears when a user is LEAVING the page and not accidentally when they are moving them mouse down into the page upon first ARRIVING at the page.
It also ensures that the popup is triggered regardless of scroll position on the page.
If you've got any questions, feel free to let me know.
As always, I'll start this off with a demo:
Demo URL: http://crazyflx.com/exitpop/
Go to the URL above, wait until it loads, make sure your mouse is somewhere in the actual content of the page (like the middle of the page) and then slowly just move your mouse to the top of the page as if you were going to close the tab it's open in, click the back button or type in a new URL.
The page is going to look like YouTube...don't be alarmed, that's on purpose. I didn't feel like creating my own content to use on the example page, so I just am using theirs.
Of all the "unblockable popups" out there (an unblockable popup typically is referring to a JavaScript popup, not an intrusive "alert box" that won't let you leave unless you close it), the "exit popup/popover" has always been my favorite.
I've had more success using an exit popup than any other type. I should mention I use them sparingly & only where appropriate.
An "exit popup" is a popup that appears only if and when a user arrives at your page and then attempts to leave that page by either clicking the back button, closing the tab or entering a different URL to go to in their browsers navigation bar.
This effect is achieved, basically, by there being an invisible div at the top of the page that is as wide as your browsing window. When the mouse moves over the top of that div, it triggers a javascript popup. The div at the top of the page is only 10 to 20 pixels in height, so if the user moves their mouse over it, odds are nearly 100% that they are moving the mouse up and into the top of their browser to change the URL, hit the back button or close out your site and/or browser.
In other words, an exit popup really isn't all that difficult to create.
The thing is, of all the exit popup scripts I've used, I always find something wrong with them.
Here are some of the issues I've experienced with exit popover scripts:
- If a user types in your URL in the navigation bar and then moves the mouse DOWN into the page, the exit popup appears...the exit popup should only appear if the user is moving their mouse UP and OUT of the page and not DOWN and INTO the page. This is one of the biggest issues I find with "ready made" exit popup scripts.
- If the user scrolls down the page and then attempts to leave the page without having the scrollbar all the way in it's uppermost position, the exit popup doesn't appear. I have found this with some but not all exit popups
- The script will only allow for some external file or URL to be the source code of the popup instead of just allowing it to be hardcoded HTML (again, very annoying)
- Miscellaneous issues like the overlay isn't configurable, it doesn't auto center, appears at the top of the page even if the user is scrolled to the bottom (meaning they can't see it) and so on
So I recently had a need for an exit popup, but instead of looking for a ready made script, I figured I'd just make one myself. The code below does not have any of the above listed issues at all and it works exactly as I have always imagined an exit popup should function without all the errors.
Instead of creating my own pretty overlay and jquery system for making it appear and being able to configure things like overlay color, size, effects on appearing disappearing and so on, I figured I'd just use FancyBox. FancyBox is an awesome ready made tool built on the Jquery library for showing things like images, youtube videos and all kinds of other things with a "lightbox" effect (you click on an image and it gets bigger right in front of your eyes while simultaneously "greying out" the background). You can see the fancybox demo URL here with all kinds of examples.
Once you've got fancybox downloaded (which you can do from here), upload the files to the folder "fancybox" in the root of your site. Then you'll just add the following between the <head> tags of the page you want the exit popup to appear on:
FancyBox Code Portion 1
Code:
<!-- Add jQuery library --><script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>Also in between the <head> tags, you'll need the following code, which are the configurations for the appearance of the overlay & exit popup (the darkness of the background, the close button that appears, the height & width of the area containing your popup and so on). You can get instructions on how to change these from what I have used in the example demo URL at this URL on the fancybox site here:
FancyBox Code Portion 2 & Code for Proper Appearance of Exit PopUp
Code:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox-button").fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : { type : 'inside',
position: 'top'},
buttons : {},
overlay : {
css : {
'background' : 'rgba(0, 0, 0, 0.95)'
}
}
}
});
$("[COLOR=#ff0000].various2[/COLOR]").fancybox({
fitToView : true,
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
padding:0,
overlay : {
css : {
'background' : 'rgba(0, 0, 0, 0.95)'
}
}
});
});
[COLOR=#00ff00]var upordown = 0;[/COLOR]
[COLOR=#00ff00]
[/COLOR]
[COLOR=#00ff00]function popup(upperorlower) {[/COLOR]
[COLOR=#00ff00] if (upperorlower == 'upper') {[/COLOR]
[COLOR=#00ff00] upordown = 1;[/COLOR]
[COLOR=#00ff00] }[/COLOR]
[COLOR=#00ff00] if (upordown == 0) {[/COLOR]
[COLOR=#00ff00] $("[/COLOR][COLOR=#ff0000]#inline[/COLOR][COLOR=#00ff00]").trigger('click');[/COLOR]
[COLOR=#00ff00] $(".fancybox-skin").css({"background": "transparent", "box-shadow": "none", "-webkit-box-shadow": "none", "-moz-box-shadow": "none", });[/COLOR]
[COLOR=#00ff00] $(".fancybox-opened").css({"background": "transparent", "box-shadow": "none", "-webkit-box-shadow": "none", "-moz-box-shadow": "none", });[/COLOR]
[COLOR=#00ff00] }[/COLOR]
[COLOR=#00ff00] if (upperorlower == 'lower') {[/COLOR]
[COLOR=#00ff00] upordown = 0;[/COLOR]
[COLOR=#00ff00] }[/COLOR]
[COLOR=#00ff00] }[/COLOR]
</script>The code you see in GREEN above, is the code that is not part of fancybox, but is rather the code that triggers the exit popup (and makes sure it only triggers it on the users exit and not when they're moving the mouse down into the page).
The one word "various2" & "inline"you see in RED above, are the class & div ID you must use on the HTML code that will serve as the exit popup. More on this in a second.
Then, create the code for your exit popup (the HTML of what you want to appear when a person exits the page). The HTML code for the popup can go anywhere between the <body> tags of the page you want the exit popup to appear on.In the demo URL I gave in the beginning, this is the HTML code of the popup that appears:
HTML Code for PopUp Appearance
Code:
<div[COLOR=#ff0000] id="inline"[/COLOR] [COLOR=#ff0000]class="various2"[/COLOR] [COLOR=#ff0000]style="display:none[/COLOR]; width:500px; border:#06F thick solid; border-radius:20px; background-color:#fff; margin:20px;">
<div class="flap">
<span>Hold on There Partner!</span>
<span class="flapleft">
<img src="http://www.blackhatworld.com/blackhat-seo/images/flap-left.png" />
</span>
<span class="flapright">
<img src="http://www.blackhatworld.com/blackhat-seo/images/flap-right.png" />
</span>
</div>
<div style="padding:10px;">
<div class="big-blue-text">I Am an Incredibly Important Message & You're Reading Me So I'm Going to Get My Final Point Across Now!</div>
<p>Look, you should really do what I'm telling you, because as you can see, I've caught your attention as you were leaving this page. Below me, you'll find an opt-in form/download link/registration link or something else that is important to me that you do and if you don't do it right now, I'll come to your house and find you and make you do it!</p>
</br>
<p><b>Please, don't make me come to your house, just fill in the form/opt into my mailing list/register on my site/download my shit</b></p>
</br>
<p>You'll be happy you did! Thanks for reading this important message on your way out!</p>
</div>
</div>The code you use for the HTML popup, absolutely MUST BE WRAPPED in a div that has an ID, a class & the style attribute: "display:none" (all of which you can see in the first line of the example code above). Notice that the "class" & "id" values (they are in red) match the class & ID values that are in red in the code that goes between the <head> tags referenced above.
Lastly, you need to add the following as the VERY FIRST THING that appears AFTER the opening <body> tag:
Code for What Determines a User is Leaving Site
Code:
<div id="alert" style="width:100%; height:40px; top:0px; position:fixed; z-index:10000;"> <div id="upper" style="width:100%; height:20px;" onmouseover="popup('upper');"></div>
<div id="lower" style="width:100%; height:20px;" onmouseover="popup('lower');"></div>
</div>That is what triggers the exit popup, and is also what ensures that, in conjunction with the javascript, it only appears when a user is LEAVING the page and not accidentally when they are moving them mouse down into the page upon first ARRIVING at the page.
It also ensures that the popup is triggered regardless of scroll position on the page.
If you've got any questions, feel free to let me know.
Last edited:
