Squeeze More $$$ Out of Each Visitor With Modal Alerts and PopUnders

facebooktwittergoogle_plusredditpinterestlinkedinmailfacebooktwittergoogle_plusredditpinterestlinkedinmail

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
&lt;!doctype html&gt;<meta charset="utf-8" />
 
    	<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" /><script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script><script type="text/javascript" src="/resources/demos/external/jquery.bgiframe-2.1.2.js"></script><script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>	<link href="/resources/demos/style.css" rel="stylesheet" /><script type="text/javascript">// <![CDATA[
    $(function() {
        $( "#dialog" ).dialog();
    });
 
// ]]></script>

This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the ‘x’ icon.

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
&lt;!doctype html&gt;<meta charset="utf-8" />
 
    	<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" /><script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script><script type="text/javascript" src="/resources/demos/external/jquery.bgiframe-2.1.2.js"></script><script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>	<link href="/resources/demos/style.css" rel="stylesheet" /><script type="text/javascript">// <![CDATA[
    $(function() {
        $( "#dialog-modal" ).dialog({
            height: 140,
            modal: true
        });
    });
 
// ]]></script>

Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.

Sed vel diam id libero rutrum convallis. 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.

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
	<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" /><script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script><script type="text/javascript" src="/resources/demos/external/jquery.bgiframe-2.1.2.js"></script><script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>	<link href="/resources/demos/style.css" rel="stylesheet" /><script type="text/javascript">// <![CDATA[
    $(function() {
        $( "#dialog" ).dialog();
    });
 
// ]]></script>

Then in the body put this:

This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the ‘x’ icon.

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 href="/resources/demos/style.css" rel="stylesheet" />

To this:

1
	<link href="jquery-ui-1.9.2.custom.css" rel="stylesheet" />

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
&lt;!doctype html&gt;<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta http-equiv="content-type" content="text/html; charset=utf-8" /><script type="text/javascript" src="jspopunder.js"></script><script type="text/javascript">// <![CDATA[
var opened = false;
document.onclick = function() {
if (!opened) {
jsPopunder('http://www.google.com');
opened = true;
}
};
// ]]></script>

Click anywhere on the page, or the link below to see the exit popunder.

test

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 &amp;&amp; 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!

facebooktwittergoogle_plusredditpinterestlinkedinmailfacebooktwittergoogle_plusredditpinterestlinkedinmail

About 

David Ford has been involved in affiliate marketing for over 10 years. He is the owner and founder of the Aff Playbook forum.

  • Allan

    I’ve used popunders with good success. Never tried the into message. Thanks for the post!

  • http://www.kennethlim.org Ken

    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.