FF Chrome IE10+

Exit Intent Pop Up Script (with mobile fallback)

Author: Dynamic Drive

Description: Exit Intent Pop Up scripts have become very popular these days as a way to capture leads just as a visitor is about to leave your page (or site). A typical exit pop up is triggered when the user moves his mouse outside the top boundary of the browser window and into the browser toolbar, signaling he's about to leave the page.

This is a versatile, modern exit intent pop up script that uses jQuery and the Animate.css library to create a rich, customizable pop up box that's shown on exit intent. It comes with the following plethora of useful features:

Over 40 reveal effects to capture the user's attention. Default setting shows a random effect each time.
3 ways to define the pop up's content based on your needs and platform:
- Inside an external file and fetched via Ajax
- Inline on the page as regular HTML Markup
- Dynamically inside the script as a JavaScript string
Frequency control using cookies to limit the pop up display to every time, once per session, or once per x hours or days
Supports an optional delay after the page loads before the exit pop kicks in.
Eliminate "jumpy" exit pops by setting a slight delay after the user moves the mouse outside the browser boundary before exit pop is triggered, such as 200 milliseconds.
onddexitpop() function to call your custom code whenever the user moves the mouse outside the top edge of the browser.
On Mobile Touch Screen Devices where the traditional exit intent paradigm doesn't exist, you can set Exit Pop to show x seconds after the user taps on the page for the first time.

Demo: Move your mouse outside the top edge of the browser window (into the location or toolbar for example). Close exit pop and repeat to see a different animation effect. On touch screen browsers, the exit pop is shown 3 seconds after you've first touched the page.

Hold On For Just One Second!

Before you leave, download our FREE e-book that shows you how to create a blog, step by step, in under 20 minutes!

You'll learn:

Pick a Web Host
How to select the best CMS
Install and Choose a Theme
Promote and Set Up Social Profiles for your Blog

Download Free E-Book

Directions:

Step 1: Add the following code to the <HEAD> section of your page:

Select All
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <link rel="stylesheet" href="ddexitpop.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="ddexitpop.js"> /*********************************************** * Exit Intent Pop Up Script (with mobile fallback)- By Dynamic Drive (www.dynamicdrive.com) * Please keep this notice intact * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ </script> <script> //*** Initialize DD Exit Pop Up Script: jQuery(function(){ ddexitpop.init({ contentsource: ['id', 'ddexitpop1'], fxclass: 'random', displayfreq: 'always', onddexitpop: function($popup){ console.log('Exit Pop Animation Class Name: ' + ddexitpop.settings.fxclass) } }) }) </script>

The code above references the following two external files, which you should upload to your web server:

Step 2: The demo by default defines the pop up's content directly inline on the page. Add the following markup anywhere in the BODY of your page. It won't be visible until triggered:

And that's it! As mentioned in the introduction, the pop up markup can also be defined inside an external file and fetched via Ajax, or as a JavaScript string. See documentation below for more info.

More Details

Exit Pop Up is initialized by calling the ddexitpop.init() function when the document has loaded, such as:

<script>

//*** Initialize DD Exit Pop Up Script:

jQuery(function(){ // on DOM Page Load
	ddexitpop.init({
		contentsource: ['id', 'ddexitpop1'],
		fxclass: 'random',
		hideaftershow: false,
		displayfreq: 'always',
		onddexitpop: function($popup){
			console.log('Exit Pop Animation Class Name: ' + ddexitpop.settings.fxclass)
		}
	})
})

</script>

This function supports numerous options, which are detailed below:

`ddexitpop.init()` **function options**
setting	Description
`contentsource: [contenttype, id_or_source]`	Array that defines the source of the exit pop's content, and where to find the content. Possible values are: ["inline", '<div class="ddexitpop">Exit Pop Content here</div>'] ["id", 'id_of_exitpop_div] ["ajax", "path or url to external file"] An explanation of each possible value: For "inline", enter the markup of your pop content DIV as a JavaScript string into the 2nd array element. Make sure everything is defined on one line, and that you escape quotes with a backslash (\). For "id", enter the ID of this DIV you've defined physically on your page as regular HTML into the 2nd array element. The demo above uses this setting by default. For "ajax", enter the full relative path or URL to the external file containing the exit pop content DIV from the current page. For example, using "exitpopcontent.htm" as the external file that's saved under the root directory of your site, you may enter: ["ajax", "http://mysite.com/exitpopcontent.htm"] Regardless of where you define your exit pop's content DIV, make sure to give it a CSS class of "`ddexitpop`". You can customize the style of the exit pop by editing ddexitpop.css
`fxclass: string` defaults to "rubberBand"	Exit Pop Up uses the excellent Animate.css animation library. Pick from one of 40+ CSS classes listed here to dictate the reveal animation to use. For a random effect each time, enter "`random`" instead, and look at your developer's console to see the corresponding class being used.
`hideaftershow: true/false` defaults to true	Boolean on whether the exit pop should remain hidden once it's been closed, so subsequent mouse movement to exit the page will no longer trigger the exit pop (until the page is reloaded, that is).
`displayfreq: string` defaults to "always"	Sets how frequently the exit pop is shown. The 3 possible values are: "always": Pop up is shown each time the page is loaded and the user tries to exit. "session": Pop up is shown once per browser session site wide. "Xhour or Xday": Pop up is shown once every x hours or days. Replace "x" with a number, such as "5hour" or "2day". See next option as well.
`persistcookie: 'ddexitpop_shown'` defaults to "ddexitpop_shown"	Shared cookie name used by the `displayfreq` option above for persistence. If you have different exit pop ups on different pages that should have separate frequency control, set this option to a different name for each instance of exit pop on those pages.
`delayregister: milliseconds` defaults to 0	Sets the delay in milliseconds after the page loads before the exit pop is registered and reacts to mouse movements. A value of 2000 for example means if the user tries to exit the page (via mouse movement) within 2 seconds after the page loads, the exit pop won't be shown. The default value of 0 means the exit pop will be shown anytime the user tries to exit the page.
`delayshow: milliseconds` defaults to 200	This option helps eliminate "jumpy" exit pops that pops up as soon as the user moves his mouse outside the browser's top boundary. The default value of 200 (for 200 milliseconds) means if the user quickly moves the mouse outside the boundary and back into the page within 200 milliseconds, the pop up is not triggered.
`mobileshowafter: milliseconds` defaults to 3000	Mobile touch screen devices by default will never see the exit pop up, as the script relies on the mouse position to trigger it. However, you can still show the pop up to these users, by setting `mobileshowafter` to an integer greater than 0. A value of 1000 for example causes the exit pop to appear 1 second after the user's very first touch on the page. To disable exit pop from showing on touch screen devices, set this value to 0.
`onddexitpop: function($popup){ //custom code here }`	Callback function that gets called whenever the user moves the mouse outside the upper boundary of the browser window. Define your custom code inside this function to react to this event. The `$popup` object passed into the function contains a jQuery object referencing the pop up exit content DIV.

Frequently Asked Questions

Q) How do I customize the look of the exit pop?

A: The style of the exit pop is defined inside ddexitpop.css, specifically, the .ddexitpop{} selector:

.ddexitpop { /* user defined exit popup DIV style */
	width: 90%;
	max-width: 700px;
	border: 2px solid black;
	padding: 10px;
	"
}

Edit this selector as you wish to modify its border, background color, dimensions etc. Refer to the comments for more info,

Q) How do I define the exit pop content as an external file?

A: Simply create the markup for the exit pop inside a blank file, and save it as a separate .htm file on your server, such as:

<div id="ddexitpop1" class="ddexitpop">

<h1>Hold On For Just One Second!</h1>
<p>Before you leave, download our FREE e-book that shows you how to create a blog, step by step, in under 20 minutes!</p>
<p>You'll learn:</p>
<ul>
<li>Pick a Web Host</li>
<li>How to select the best CMS</li>
<li>Install and Choose a Theme</li>
<li>Promote and Set Up Social Profiles for your Blog</li>
</ul>
<a class="calltoaction" href="#" onClick="ddexitpop.hidepopup()">Download Free E-Book</a>

</div>

In this case, we'll save it as "exitpopcontent.htm".

Inside the file, the markup should consist of an outer DIV with CSS class "ddexitpop"; everything inside this DIV can be customized to your liking.

Once the above is done, set the contentsource[] option inside the initialization code to point to to the location of the external file on your server:

jQuery(function(){ // on DOM Page Load
	ddexitpop.init({
		contentsource: ['ajax', 'http://mysite.com/assets/exitpopcontent.htm'],
		fxclass: 'random',
		hideaftershow: true
	})
})

The external file must be on the same server as the page serving the exit pop, due to Ajax's same-origin security policy.

Q) How do I modify the speed of the animation?

A: Inside ddexitpop.css, change the following rules inside the .ddexitpop{} selector:

-webkit-animation-duration: .5s; /* customize animation duration */
animation-duration: .5s; /* customize animation duration */

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post