The use of exit pops and modal alerts can dramatically increase your revenue per visitor if used right. These are good extras you can add to your LP’s to engage the visitor when they first arrive on, or exit your page. These aren’t allowed on all traffic sources, so make sure it’s allowed before using them.
Let’s look at a few examples to get you started.
Intro Alerts
Here is an example webpage with an intro pop/alert message using jQuery. This is a very basic use of the ‘dialog’ function in jQuery. Click here to see this in action.
See the code below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="/resources/demos/external/jquery.bgiframe-2.1.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html> |
You can change the alert message by editing the text in the above code.
To get a little fancier, we can use a basic modal alert which dims out the background and prevents the user from interacting with the page until it’s closed. Click here to see this in action.
See the code below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Basic modal</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="/resources/demos/external/jquery.bgiframe-2.1.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog-modal" ).dialog({
height: 140,
modal: true
});
});
</script>
</head>
<body>
<div id="dialog-modal" title="Basic modal dialog">
<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
</body>
</html> |
The above examples show how this works in an entire webpage. Obviously, you want to add the code to your own LP’s. To do this, you just need to strip out the code parts and add them to your page. For example, on the first alert message, you would put this code in the head section of your HTML:
1 2 3 4 5 6 7 8 9 10 | <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="/resources/demos/external/jquery.bgiframe-2.1.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script> |
Then in the body put this:
1 2 3 | <div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div> |
Those alerts are nice, but we can spice them up a little! An easy way to do this is to use the jQuery ThemeRoller. The easiest way to learn this is to play around changing colors. Say I wanted to change the header background color of our modal window. I would just select the ‘header/toolbar’ area, then the color field and change it:
Once you change the color, you’ll see it reflected in the examples down the middle of the page. To see what it will look like in our modal window, click the ”open dialog’ button under the dialog section. You can customize almost anything from the fonts to colors and borders.
Once you’re satisfied with the look, click the ‘download theme’ button. In the zip file you download, you’ll only need one file. Inside the CSS folders, take the file named jquery-ui-1.9.2.custom.css and put it in the root of your LP folder.
Then, in your LP, change this line:
1 | <link rel="stylesheet" href="/resources/demos/style.css" /> |
To this:
1 | <link rel="stylesheet" href="jquery-ui-1.9.2.custom.css" /> |
Ideas for use:
The classic use of an intro alert message is to call attention to something that would make the user want to stay on the page. For example:
“Special deals today only”
“You have a new message”
“Only x left in sock”
This could potentially be used in any niche, and can really increase your LP CTR.
Popunders
Popunders are windows that pop under your LP. This example uses a popunder when someone clicks anywhere on your lp. Think about the potential with this: you ccould convert visitors on not one, but two offers. Click here to see an example. In this example, a popunder (going to Google) will open when someone clicks anywhere on the page or on my link.
Check out the code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!doctype html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>js-popunder demo</title>
<script src="jspopunder.js"></script>
<script>
var opened = false;
document.onclick = function() {
if (!opened) {
jsPopunder('http://www.google.com');
opened = true;
}
};
</script>
</head>
<body>
<p>Click anywhere on the page, or the link below to see the exit popunder. </p>
<p><a href="http://www.affplaybook.com">test</a></p>
</body>
</html> |
This is the script in an HTML page. You also need a file in your LP directory called jquery.popunder.js which looks like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | function jsPopunder(sUrl, sName, sWidth, sHeight) { if (typeof(sName)===null || sName === '') sName = Math.floor((Math.random()*1000)+1); sWidth = (sWidth || screen.width); sHeight = (sHeight || screen.height); sHeight = sHeight-122; var sOptions = 'toolbar=no,scrollbars=yes,location=yes,statusbar=yes,menubar=no,resizable=1,width='+sWidth.toString()+',height='+sHeight.toString()+',screenX=0,screenY=0,left=0,top=0'; // create pop-up from parent context var _parent = (top != self && typeof(top.document.location.toString())==='string') ? top : self; var popunder = _parent.window.open(sUrl, sName, sOptions); if (popunder) { popunder.blur(); if (navigator.userAgent.indexOf('MSIE') === -1) { popunder.params = { url: sUrl }; (function(e) { with (e) { if (typeof window.mozPaintCount != 'undefined' || typeof navigator.webkitGetUserMedia === "function") { try { var poltergeist = document.createElement('a'); poltergeist.href = "javascript:window.open('about:blank').close();document.body.removeChild(poltergeist)"; document.body.appendChild(poltergeist).click(); }catch(err){} } } })(popunder); } window.focus(); try{ opener.window.focus(); }catch(err){} } } |
you can download the script here
To change the URL the pop under opens, change the ‘google.com’ in this line in the HTML document:
1 | jsPopunder('http://www.google.com'); |
Example uses:
A popunder can be used effectively in almost any niche. You could offer someone ‘one more chance at a deal’, or simply pop a related offer. Be creative here! Try popping related offers, collecting opt-ins, or showing an offer wall.
Get creative with these tricks. You can do a lot with them!
About David
David Ford has been involved in affiliate marketing for over 10 years. He is the owner and founder of the Aff Playbook forum.
I’ve used popunders with good success. Never tried the into message. Thanks for the post!
I’ve been looking for a popunder like this for ages. Much better way to do it, my old popunders kept getting blocked so this has really helped me out. Thanks
Great post and great resources! I’ve never used intro pops or pop understand because I never new how to implement them before. I’ll give it a try now. Thanks for the amazing info.