1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

[GET]Increase Leads & Opt-ins Using this Exit PopUp/PopOver - Unblockable -Appears on Exit

Discussion in 'Web Design' started by crazyflx, Jul 19, 2013.

  1. crazyflx

    crazyflx Elite Member

    Joined:
    Nov 9, 2009
    Messages:
    1,674
    Likes Received:
    4,825
    Location:
    http://CRAZYFLX.COM
    Home Page:
    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:


    • 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.
     
    • Thanks Thanks x 24
    Last edited: Jul 20, 2013
  2. srb888

    srb888 Elite Member

    Joined:
    Jul 30, 2008
    Messages:
    3,260
    Likes Received:
    5,068
    Gender:
    Male
    Occupation:
    WebzSurfer
    Location:
    Sun, Mon, Tue, WTF, Sat!!! :)

    That's a tremendously powerful Action Call! +Rep + Thanks! :D
     
    • Thanks Thanks x 1
  3. abhi007

    abhi007 Jr. VIP Jr. VIP

    Joined:
    Aug 31, 2010
    Messages:
    5,354
    Likes Received:
    3,755
    Location:
    snip.li/TubH
    Another top notch share from Crazyflx :)

    Btw loved your Linkedin strategy shared months ago...
     
    • Thanks Thanks x 1
  4. crazyflx

    crazyflx Elite Member

    Joined:
    Nov 9, 2009
    Messages:
    1,674
    Likes Received:
    4,825
    Location:
    http://CRAZYFLX.COM
    Home Page:
    Haha, glad somebody read it, lol. Thanks bud!

    Very much appreciated abhi, thanks a lot!

    Always nice to hear that somebody out there on the other end of a computer appreciates what I type out here on my end.
     
    • Thanks Thanks x 1
  5. crazyflx

    crazyflx Elite Member

    Joined:
    Nov 9, 2009
    Messages:
    1,674
    Likes Received:
    4,825
    Location:
    http://CRAZYFLX.COM
    Home Page:
    I needed my exit popup to only be shown to a user once per session (meaning they will only see the exit popup one time, regardless of how many times they arrive at my site and leave it. However, once they close out their browser and come back to my site, they will see the exit popup again, but only one time. This repeats, and is the definition of once per session. Defined in the most basic terms, it means it will only be seen one time until a user closes out their browser and reopens it).

    I have updated the example/demo URL in the OP to reflect this functionality. If you'd like the same functionality, you would change the code that is labeled:

    FancyBox Code Portion 2 & Code for Proper Appearance of Exit PopUp

    From what it is in the OP, to this (nothing else needs to be changed. The changes from the OP to what is pasted below are highlighted in red):

    Code:
    <script type="text/javascript">	
    	var upordown = 0;
    	
    	[COLOR=#ff0000]function get_cookie(Name) {[/COLOR]
    [COLOR=#ff0000]		  var search = Name + "="[/COLOR]
    [COLOR=#ff0000]		  var returnvalue = "";[/COLOR]
    [COLOR=#ff0000]		  if (document.cookie.length > 0) {[/COLOR]
    [COLOR=#ff0000]			offset = document.cookie.indexOf(search)[/COLOR]
    [COLOR=#ff0000]			if (offset != -1) { // if cookie exists[/COLOR]
    [COLOR=#ff0000]			  offset += search.length[/COLOR]
    [COLOR=#ff0000]			  // set index of beginning of value[/COLOR]
    [COLOR=#ff0000]			  end = document.cookie.indexOf(";", offset);[/COLOR]
    [COLOR=#ff0000]			  // set index of end of cookie value[/COLOR]
    [COLOR=#ff0000]			  if (end == -1)[/COLOR]
    [COLOR=#ff0000]				 end = document.cookie.length;[/COLOR]
    [COLOR=#ff0000]			  returnvalue=unescape(document.cookie.substring(offset, end))[/COLOR]
    [COLOR=#ff0000]			  }[/COLOR]
    [COLOR=#ff0000]		   }[/COLOR]
    [COLOR=#ff0000]		  return returnvalue;[/COLOR]
    [COLOR=#ff0000]		}[/COLOR]
    
    
    	
    	
    	
    	
    $(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)'
                }
            }
    		}
    	});
    	
    	$(".various").fancybox({
    		maxWidth	: 1280,
    		maxHeight	: 720,
    		fitToView	: false,
    		width		: '90%',
    		height		: '90%',
    		autoSize	: false,
    		closeClick	: false,
    		openEffect	: 'none',
    		closeEffect	: 'none',
    		overlay : {
                css : {
                    'background' : 'rgba(0, 0, 0, 0.95)'
                }
            }
    	});
    	
    $(".various2").fancybox({
    		fitToView	: true,
    		autoSize	: true,
    		closeClick	: false,
    		openEffect	: 'none',
    		closeEffect	: 'none',
    		padding:0,
    		overlay : {
                css : {
                    'background' : 'rgba(0, 0, 0, 0.95)'
                }
            }
    	});
    	
    	
    });
    
    
    
    
    function popup(upperorlower) {
    	
    	if (upperorlower == 'upper') {
    		upordown = 1;
    	}
    	
    	[COLOR=#ff0000]if ( (upordown == 0) && (get_cookie('exitpopshown')=='') ){[/COLOR]
    [COLOR=#ff0000]		document.cookie="exitpopshown=yes";[/COLOR]
    [COLOR=#ff0000]		$("#inline").trigger('click');[/COLOR]
    [COLOR=#ff0000]	$(".fancybox-skin").css({"background": "transparent", "box-shadow": "none", "-webkit-box-shadow": "none", "-moz-box-shadow": "none", });[/COLOR]
    [COLOR=#ff0000]	$(".fancybox-opened").css({"background": "transparent", "box-shadow": "none", "-webkit-box-shadow": "none", "-moz-box-shadow": "none", });[/COLOR]
    [COLOR=#ff0000]	}[/COLOR]
    	
    	
    	if (upperorlower == 'lower') {
    		upordown = 0;
    	}
    	
    	
    	}
    
    
    
    
    	</script>
     
    • Thanks Thanks x 1
  6. netmoney1

    netmoney1 Executive VIP

    Joined:
    Feb 21, 2012
    Messages:
    3,589
    Likes Received:
    10,902
    Excellent share! Thanks for taking the time to put this all together!
     
    • Thanks Thanks x 1
  7. crazyflx

    crazyflx Elite Member

    Joined:
    Nov 9, 2009
    Messages:
    1,674
    Likes Received:
    4,825
    Location:
    http://CRAZYFLX.COM
    Home Page:
    Thanks bud, and no problem at all. I figured there would be plenty of people here on BHW that could make use of something like this, and I've seen "exit popup" scripts sell as WSO's for upwards of $60, and they still don't function correctly (imo).
     
  8. netmoney1

    netmoney1 Executive VIP

    Joined:
    Feb 21, 2012
    Messages:
    3,589
    Likes Received:
    10,902
    Over the years I have purchased every exit pop script and plugin and not a single one did everything correctly. It's amazing how many people buy subpar products and are fine with it.

     
  9. crazyflx

    crazyflx Elite Member

    Joined:
    Nov 9, 2009
    Messages:
    1,674
    Likes Received:
    4,825
    Location:
    http://CRAZYFLX.COM
    Home Page:
    Yeah, that's exactly what made me just do it myself this time around...always finding something wrong with the ones I've used (and I too have used a LOT of them, haha).

    I agree with the whole "subpar" products comment and I think that a big part of it is simply because of the sheer number of them found on the web in comparison to the number of quality ones (and the people eager to churn out quantity over quality to line their pockets).
     
  10. rusemag99

    rusemag99 Regular Member

    Joined:
    Apr 12, 2010
    Messages:
    338
    Likes Received:
    114
    Occupation:
    research and experiment
    Location:
    california
    Can this be used for wordpress?
     
  11. ardley216

    ardley216 Elite Member

    Joined:
    Mar 28, 2008
    Messages:
    2,391
    Likes Received:
    2,361
    Occupation:
    Finding easy keywords
    Location:
    1,500,000,000 Keywords Re
    Home Page:
    seriously Crazyflx?!?! You are on fire recently! ON FIRE!!!
     
  12. ailia

    ailia Jr. VIP Jr. VIP

    Joined:
    Feb 27, 2012
    Messages:
    699
    Likes Received:
    49
    i read all posts by OP. He is really on fire!:)
     
  13. Valkurm

    Valkurm Power Member

    Joined:
    Feb 22, 2009
    Messages:
    578
    Likes Received:
    227
    Awesome share Crazyflx.
    Just one thing. I put an image on the FancyBox instead of text, and a link on the image.
    But link is not working, or only when I do right click > open in a new tab.
    Any idea ?
     
  14. lloughry

    lloughry Regular Member

    Joined:
    Jan 23, 2013
    Messages:
    337
    Likes Received:
    100
    I am going to learn how to code just from following your shares...
     
  15. crazyflx

    crazyflx Elite Member

    Joined:
    Nov 9, 2009
    Messages:
    1,674
    Likes Received:
    4,825
    Location:
    http://CRAZYFLX.COM
    Home Page:
    Yes, absolutely, in fact you can see it being used on one of my wordpress sites here (note that what you see below is an image to prevent indexing of the words in the image by search engines):

    [​IMG]

    Hahaha, thanks guys, much appreciated :)

    If I understand this correctly, you're saying that within the fancybox popup, you're using an image to link to another page, but it doesn't do anything when you click on it...is that correct?

    If so, I actually had the same problem, and I got around it by using the following solution. Setup your link like this:

    Code:
    <a href="http://YourLinkHere.com" onclick="top.location.href='http://YourLinkHere.com';"><img src="http://YourImageHere"></a>
    Where "yourlinkhere" is replaced with what you want to link to and "yourimagehere" with the image that you're using.

    Haha, thanks bud. I can tell that learning how to code is probably one of the single best things you can do to make your life as an internet marketer easier. Once you're making enough money, you can just pay people to do it for you, but still, knowing how to do it on your own will allow you quickly fix things or quickly put together things you need instead of waiting on somebody to do it for you.

    It also allows you to create & do things that you wouldn't otherwise want somebody else to know you're doing it or how you're doing it.
     

    Attached Files:

    • Thanks Thanks x 1
  16. Valkurm

    Valkurm Power Member

    Joined:
    Feb 22, 2009
    Messages:
    578
    Likes Received:
    227
    Working fine ! Many thanks :)
     
  17. AresGraphics

    AresGraphics Newbie

    Joined:
    Aug 30, 2013
    Messages:
    10
    Likes Received:
    2
    Nice share, thanks dude!
     
  18. crazyflx

    crazyflx Elite Member

    Joined:
    Nov 9, 2009
    Messages:
    1,674
    Likes Received:
    4,825
    Location:
    http://CRAZYFLX.COM
    Home Page:
    Excellent, happy to hear it.

    If you need anything else just post it here.

    Oh, and you're welcome :)
     
  19. anilpendu

    anilpendu Jr. VIP Jr. VIP Premium Member

    Joined:
    Aug 20, 2012
    Messages:
    1,145
    Likes Received:
    846
    Occupation:
    Student
    Home Page:
    another top share from crazyflx

    thank you
     
  20. Mike420

    Mike420 Junior Member

    Joined:
    Apr 13, 2013
    Messages:
    139
    Likes Received:
    30
    Nice , will come handy.