How to create exit intent popup modal?

How to create exit intent popup modal?

Mon, 08/01/2016 - 21:57
Posted in:
6 comments

In this article, we’re going to create an exit intent popup modal with

First, I’ll explain what is the exit intent? What are the benefits of it? Then we'll move to the coding part of exit intent popup. Sample downloadable demo is also provided with this article.

Exit intent popup modal

What is Exit Intent Popup?

When a visitor is about to leave view port of the browser. (a behaviour trigger) a popup shows so that user can continue interaction with website without leaving it. This popup can be positioned anywhere and its purpose can be anything. You can ask the user to subscribe, follow you on social media or provide a coupon for product through this popup. Such popups are called as exit intent popups.

What are advantages of exit intent popup?

I'm Gonna Make Him An Offer He Can't Refuse - Don Corleone (Godfather)

You might have heard this famous dialogue from movie Godfather. The same technique will work here. Let's rephrase it for our post -

Exit intent popup will make user one eye-popping, jaw-dropping, earth-shattering offer before they leave your store and 60% chance never shows up again.

Let me explain with an example. Consider a scenario, a customer wants to buy a mobile from the online store. He found an "OK" type of deal at your online store but he is price sensitive and not happy with the price. When he is about to flee away from the website, a popup shows with a discount coupon. Wow! At this point, a user can get amazed and confident to make the purchase.

For websites, improving conversion rates is very important especially for e-commerce websites converting users into buyers will be a big plus. So to improve bounce conversion rate we can use exit intent popup. Bloggers can get more subscribers to their newsletter from exit intent popups.

Almost 90% of users notice exit intent popup and about 14% users from them use it. You might think 14% is very small right? Wrong! That is huge percentage when it comes to revenue building. The only drawback of this technique is that it will not work with mobiles and tabs because browsers in these devices do not have mouse movements. So for those browsers, you can use scroll position trigger method.

Now let's get back to main topic

How to create exit intent popup?

  • With HTML, CSS3, and jQuery scripting.

View Demo     Download Source

HTML Code

This is popup modal code which needs to include in your web page. The structure of the modal consists of a main wrapper (id: bounceModal) and a content division (class: ffb-content):

<div class="ffb-modal ffb-effect" id="bounceModal">
  <div class="ffb-content">
    <h3>Modal Dialog</h3>
    <div>
      <!-- Modal content goes here -->
      <button class="ffb-close">Close me!</button>
    </div>
  </div>
</div>
<!-- modal code end -->
<div class="container">
  <!-- Page content goes here -->
</div>
<!-- /container -->
<div class="ffb-overlay"></div>

The main wrapper (id: bounceModal) is used as a container that will simply be shown or hidden (with visibility, using the class “ffb-show”) and the inner content will have the css effect. Note that the overlay (class: ffb-overlay) is placed after the modal and page content (class: container), so we can control the blur appearance using the adjacent sibling selector. If you don't want blur effect for background on popup then you have to remove ffb-overlay div and it's CSS.

CSS code

When page loads modal visibility is hidden and it's position is fixed.

.ffb-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 630px;
    min-width: 320px;
    height: auto;
    z-index: 2000;
    visibility: hidden;
    backface-visibility: hidden;
    transform: translateX(-50%) translateY(-50%);
}
.ffb-show {
    visibility: visible;
}
.ffb-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: 0;
    background: rgba(143, 27, 15, 0.8);
    transition: all 0.3s;
}
.ffb-show ~ .ffb-overlay {
    opacity: 1;
    visibility: visible;
}

I have used fade in and scale effect CSS3 for modal on appearance. It will provide smooth transition effect as compared to jquery effects. When popup shows, page background will become blur thanks to overlay that we have used in HTML. The following code is used for transition effect

/* Blur background */
.ffb-show.ffb-effect ~ .ffb-overlay {
    background: rgba(78, 46, 32, 0.5);
}
.ffb-show.ffb-effect ~ .container {
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    filter: blur(3px);
}
/* Effect: Fade in and scale up */
.ffb-effect .ffb-content {
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.ffb-show.ffb-effect .ffb-content {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
Browser Compatability

Please note: This only works as intended in browsers that support the respective CSS properties. Modern browsers only! There are some knows issue with using visibility and opacity for old iOS Safari browsers, so this transition probably won't work.

Solution: You can use jquery animations in jquery code removing this transition CSS code.

or instead of CSS3 effect: fade in and scale up use display property for hide and show like this -

.ffb-effect .ffb-content {
    display: none;
}
.ffb-show.ffb-effect .ffb-content {
    display: block;
}

jQuery Code

Make sure to include jQuery library before this custom js code.

$(function() {
  function addEvent(obj, evt, fn) {
    if (obj.addEventListener) {
      obj.addEventListener(evt, fn, false);
    } else if (obj.attachEvent) {
      obj.attachEvent("on" + evt, fn);
    }
  }

  addEvent(document, "mouseout", function(e) {
    e = e ? e : window.event;
    var from = e.relatedTarget || e.toElement;
    if ((!from || from.nodeName == "HTML") && e.pageY < $(window).scrollTop()) {
      $("#bounceModal").addClass("ffb-show");
    }
  });
  
  // Closing the Popup Box
  $(".ffb-close").click(function() {
    $("#bounceModal").removeClass("ffb-show");
  });
});

We are tracking mouse movements on the browser here. When the mouse goes out of the window modal gets visible by adding ffb-show class. At that instance Innner content transition from CSS code works which leads to smooth fade in and scale effect. You can use other CSS3 transition effects like slide in, flip, rotate etc if you want.

Please note: This jquery code will not work in Microsoft Edge browser.

Solution: You have to remove e.pageY < $(window).scrollTop() from if condition to support Edge browser.

 

If you want to close popup when a click is detected anywhere outside of modal then add following jquery code below above jquery script.

// If clicked anywhere on body
$("body").click(function(){
  $("#bounceModal").removeClass("ffb-show");
});

// Prevent event if clicked on #bounceModal
$("#bounceModal").click(function(e){
  e.stopPropagation();
});

 

Modal will fade in every time mouse leaves the window. To avoid multiple appearances you can use cookies or HTML local storage objects.

In demo code, I have used cookies and set the timer for 10 seconds. To use cookie functionality you need to include cookie library before custom js script.

And we are Done! 

How to create exit intent popup?

  • With bootstrap modal (If you are using bootstrap framework)

HTML Code

If you are using bootstrap framework then creating popup modal is relatively simple. This is HTML code for the bootstrap modal which needs to include in your web page.

<div class="modal fade" id="bounceModal" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"><!-- your content title here --></h4>
      </div>
      <div class="modal-body">
        <p><!-- your content body here --></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>      
  </div>
</div>

As we are using bootstrap there is no need to add extra CSS to style popup modal.

jQuery Code

Do not forget to include jQuery library to your custom template before adding jquery code. If you have already included it in your template then no need to add them again. jquery script is almost same as method 1 script for bootstrap modal except following 2 changes -

Change 1: In jQuery code you have to change

$("#bounceModal").addClass("ffb-show");

to 

$('#bounceModal').modal();

Change 2: Remove ffb-close class click function as we are using default bootstrap modal function here.

In js code, you can use modal options from bootstrap to change modal settings such as size, transitions.

Enjoy exit intent popup modal on your website and improve user interaction. If you have any questions please feel free to ask me in the comments section.

Want to know more about be user actions to improve conversion rate check on -

List of user actions (Behaviour Triggers) to show popups/notifications

Comments

I am the creator of a desktop tool that creates exit popups. What do you have to say about the recent news that google will penalize mobile sites using such technology.

Google announced that they are launching a new search algorithm penalty on January 10, 2017 to demote mobile pages that have "intrusive" interstitials that get in the users way. Although a banner that uses a reasonable amount of screen space would not be affected by the new signal, if used responsibly. Something like this --

Mobile popup banner

 

You are correct. I saw on Google blog about the update that will happen:
Showing a popup that covers the main content, either immediately after the user navigates to a page from the search results, or while they are looking through the page.

I wonder if such exit popups will affect desktop sites sooner or later.

Anyways, thanks for pointing me in the right direction.

Cheers!

Submitted by Theo Hamer on Tue, 03/07/2017 - 14:16 Permalink

Don't do this. If people are leaving your website too soon, improve your website. People generally dislike clinginess. Don't pester the user.

Hi Theo Hamer,

Thanks for your view. Your statement is very much true in informative websites like blogs, forums, news etc. But this technique gives very impressive results in e-commerce platforms where users just want cheap and good products. 

Exit-intent technology increases revenue for e-commerce website up to 50% so I don't think any issue using this technology.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
The content of this field is kept private and will not be shown publicly.