Wait, Don't Go! - The solution to the popup dilemma

 

TL;DR: how to make a exit intent popup –based on this helpful blog post but with everything spelled out.

 

      You want emails because your widget is the best and everyone should buy one. But when a potential customer comes to your site if you have a popup they get irritated. Most close the popup, some leave, but some sign up. And when you reach out to those who signed up they remember that they really liked your widget and they buy one.

 

      Still, it is a bit like you are asking for someone’s number before they have had a chance to get to know you – forward and a bit rude. You could set a timer so a popup shows up a bit later, but it is kind of disruptive to the getting to know you process. But if you ask for their info when they are leaving after they have had a chance to get to know you, there it is the least disruptive. It is a natural interaction at the end of a face to face meeting. The exit intent popup is “can I see you again?” Neither coming on too strong, nor losing touch.

 

Here’s how you do it:

 

      In your favorite text editor create a css folder and popup.css file in it. Then create a js folder and in it create popup.js and main.js files.
 

      Go to the Magnific Popup Documentation and under the ‘Including Files’ heading, click on the ‘build tool’ link. There will be a link for the Sass version or the CSS version. Click the ‘CSS version’ and copy everything from the tab that opens into your popup.css file.


      Click ‘build tool’ again, and this time click the ‘generate build’ button on the popup and copy everything in the textbox and put it the popup.js file. Then put this in the main.js file:

 

$(document).ready(function () {

  $('.test-popup-link').magnificPopup({ type: 'image' });

});


 

      Assuming you have your index.html and your css written, your head should look something like this:

 

<head>

<title>hi I’m a title</title>

  <link rel="stylesheet" type="text/css" href="css/style.css">

 <link rel="stylesheet" type="text/css" href="css/popup.css"> ßthe code you need to add

…a bunch of other code

</head>

 

 

      Copy the jQuery script and include it, the popup.js, and the main.js at the very bottom of your site. The end of your HTML should look something like this:

 

 …</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">ß copied jQuery script

</script>

<script src="js/popup.js"></script>

<script src="js/main.js"></script>

</body>

</html>

 

      Then in your HTML (somewhere in the middle) you initialize the popup by adding this code:

 

<a class="test-popup-link" href=="images/random_image.jpg">open popup</a>

 

      Grab a random image from Google, save it in an images folder, and use it to test if the popup will happen if you click the ‘open popup’ link.

 

      Once that works you know that everything is all linked together. Now delete the test-popup link from your HTML. And you can add the JavaScript from here to your main.js file to make everything work.

 

      Personally it drives me a bit mad to copy code without understanding it fully so here is my explanation of it:

 

// Exit intent function

addEvent(obj, evt, fn) {

  if (obj.addEventListener) {  

   obj.addEventListener(evt, fn, false);  

} else if (obj.attachEvent) { 

   obj.attachEvent("on" + evt, fn);

   }

}

 

      This is the function that you want have happen. The reason why there is an if/else is because there was a change in JavaScript listeners. It used to be ‘.attachEvent’ which took two parameters and things started with “on”. It is now ‘.addEventListener’ and it takes three parameters, but you aren’t going to do anything with the last one so it’s hard coded to false.

 

// Exit intent trigger addEvent(document, 'mouseout', function(evt) {

  if (evt.toElement === null && evt.relatedTarget === null && !localStorage.getItem('exitintent_show')) { 

    $.magnificPopup.open({ 

      items: {

             src: '#newsletter-form' //ID of inline element

      },

      type: 'inline',

      removalDelay: 500, //Delaying the removal in order to fit in the animation of the popup

      mainClass: 'mfp-fade mfp-fade-side', //The actual animation

    });

    //localStorage.setItem('exitintent_show', 'true'); // Set the flag in localStorage

  } });

 

      Let’s break down this wall of code. You are calling the addEvent function with the document being the obj, ‘mouseout’ is the evt, and then doing the function with ‘mouseout’ as still the evt.

 

      ‘.toElement’ and ‘.relatedTarget’ both refer to the same thing (the difference being in which browser you are using) with a ‘mouseout’ event - the element of the DOM that the pointer entered. So if both of those are empty (ie the mouse has moved out of your website) and also the localStorage doesn’t have an item named ‘exitintent_show’ then trigger a magnificPopup event. After that event is triggered put a flag in the localStorage so that the popup only happens once.

 

      Then you’d add something like this somewhere in your HTML:

<!--Delayed Popup-->

<div id="newsletter-form" class="white-popup mfp-hide">

      <h2>Before you leave...</h2>

      <p>Drop us a line and we'll get you a discount.</p>

      <!-- Begin MailChimp Signup Form, or a mail to -->

      <a href="mailto:me@you.com" target="_blank"><p>talk to us</p></a>

      <!--End mc_embed_signup-->

</div>

<!--End Delayed Popup-->

 

      Finally at the top of your popup.css add this to style the popup:

.white-popup {

  position: relative;
  background: #FFF;

  padding: 20px;

  width: auto;

  max-width: 500px;

  margin: 20px auto;
}

 

      And now everything is all happy, styled nicely, and you’ve asked your perspective customers for their information in a much less intrusive way.


I hope you’ve understood what everything does and how to do it yourself. Good Luck!

 

Resources if you want to dig a bit deeper:

https://julian.is/article/exit-intent-popups/

https://dimsemenov.com/plugins/magnific-popup/documentation.html

https://line25.com/tutorials/basic-beginners-guide-to-installing-a-jquery-lightboxhttps://developers.google.com/speed/libraries/#jquery

https://stackoverflow.com/questions/8549816/open-the-href-mailto-link-in-new-tab-window

 

 

 

 

 


Erica Forget is a web developer who enjoys pattern recognition, is always learning, and refining her craft. Whether in fiber arts, baking, or coding – everything gets better if you document what works and calculate how to improve the next iteration.

 

While she staying home with her son, Erica has graduated from Dev Bootcamp as a full-stack Ruby developer. She has supported Women Who Code Austin as an Event Lead for the past two years and contributed to Firefox debugger. Erica holds a BA in Humanities from the University of Texas at Austin. 

 

 

Share on Facebook
Share on Twitter
Please reload

All Content © Moms Can™ & Co.
Terms of Use & Privacy Policy