Create an Exit Intent Popup in WordPress without Plugin

The term “exit intent popup” has gained popularity in recent years, especially on WordPress, E-commerce websites and digital stores in particular.

In essence, an exit intent popup uses JavaScript to track the user’s mouse movements, so that when the user shows an intention to leave your site, a popup, registration window, or any other idea appears to grab the attention of that visitor and try to increase and improve conversion rates.

Whether you like popups or not, I can tell you (from my experience at least) that the exit intent popup on this blog has brought in a lot of subscribers since I added it.

In any case, let’s not go into how to use these popups to improve conversion rates, but here are some scenarios where it might be appropriate to present them:

• When a visitor is about to abandon the shopping cart on an e-commerce site.
• When you want to display messages about special deals in your digital store before the user exits the site.
• When a visitor is about to leave, you might want to pop up a message to encourage them to subscribe to the mailing list.
• If you want to offer special deals to people registered on your site.

So, how did I come to write this guide? It came up last month when three people asked me which plugin I use for exit intent popups on my blog’s subdomain.

So, I decided to show what I use, and it’s not a plugin. That’s also why it’s very easy to design the popup and do whatever you want with it with a little knowledge of CSS and JavaScript.

Just be careful not to annoy your visitors too much; a popup that appears too often or doesn’t look good or doesn’t provide useful content is worth nothing!

Before we start, try to exit the top part of this page, and the popup should appear (if not, then the cookie already exists for you… open it in incognito if you want to see it again).

Building an Exit Intent Popup using Ouibounce

Ouibounce.js is a small JavaScript library that allows you to display a popup before the user leaves your site.

The library works great and provides you with several configuration options such as sensitivity, delay, cookie name, expiration, etc. The process is quite simple and can be summarized in four steps:

• Load the ouibounce.js file in WordPress.
• Create a hidden element, our popup essentially (modal window).
• Select this window using JavaScript or jQuery and call Ouibounce.
• Style the popup so that it appears in the center of the screen and looks normal.

Load the ouibounce.min.js file

As seen in many tutorials on the web (one of them being Adding Assets (JavaScript and CSS Files) in WordPress), to enqueue a JavaScript file, you write something like this in functions.php:

function enqueue_Ouibounce() {
   wp_register_script( 'ouibounce', get_template_directory_uri() . '/js/ouibounce.js' , array( 'jquery' ) );
   wp_enqueue_script( 'ouibounce' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_Ouibounce' );

Create a Hidden Element

Build a simple popup; you can then style it as you like and add any form, shortcode, or content you find appropriate. In my case, I use a plugin called MailChimp for WordPress to collect leads for the mailing list that goes directly to MailChimp.

Add the HTML of that popup to the footer of your site by adding the following code to functions.php:

<?php 
/*** BEGIN here ***/
function exit_intent_popup() { ?>
    <div id="ouibounce-modal" style="display: none;">
        <div class="underlay"></div>
        <div class="modal">
            <div class="modal-body">
            
            </div>
        </div>
    </div>
   <?php
}
add_action( 'wp_footer', 'exit_intent_popup' );

Note in line 2 we hide the element with display:none.

Activate ouibounce on the same element

Now let’s enqueue a new Javascript file thay contains the code which activates ouibounce on the the new element we’ve just created (the #ouibounce-modal element).

To do so, add the following lines after the the lines where we enqueued the ouibounce library. it should look as follows:

function enqueue_Ouibounce() {
   wp_register_script( 'ouibounce', get_template_directory_uri() . '/js/ouibounce.js' , array( 'jquery' ) );
   wp_enqueue_script( 'ouibounce' );
   wp_register_script( 'ouibounce-activation', get_template_directory_uri() . '/js/NEW-JAVASCRIPT-FILE.js' , array( 'ouibounce' ) );
   wp_enqueue_script( 'ouibounce-activation' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_Ouibounce' );

On line 4 change “NEW-JAVASCRIPT-FILE” to a file name of your choice, create that file in the /js library and add the following script to that file:

/* BEGIN ouiBounce */
function initOuibounce() {
    /* init ouibounce */
    var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
        aggressive: false,
        timer: 800,
        cookieExpire: 21,
        callback: function() { console.log('ouibounce fired!'); }
    }),
    ouibounceElmnt = $('#ouibounce-modal');
}
/* END ouiBounce */
initOuibounce();

In the above code, we activated ouibounce with the following settings:

• aggressive – By default, the popup will only appear once per visitor on your site (making this line redundant). When activated, a cookie is created in the visitor’s browser to avoid creating a “intrusive” experience for the visitor.
• timer – The time in milliseconds until the popup is triggered after the user’s mouse leaves the top part of the viewport. The default is one second to prevent false positives, meaning that the user did not actually intend to leave. It is reasonable to assume that the user will not perform the action within one second, so this value is set.
• cookieExpire – Sets the time until the cookie expires, and the popup will appear again for the visitor. In our case, 21 days.

There are more options for ouibouce, and you can find them all in the following link.

For testing purposes and to ensure the popup appears on every page load, set the aggressive option to true.

To make the popup disappear when clicking outside its frame and to ensure that clicking on the popup itself does not close it, add the following lines after line number 10 in the above code:

/** Hide modal window on body click **/
$('body').on('click', function() {
    ouibounceElmnt.fadeOut(200);
});

/** Prevent propagation while clicking on the popup **/
ouibounceElmnt.find('.modal').on('click', function(e) {
    e.stopPropagation();
});

Styling the Popup a Bit

To make the popup appear in the center of the screen, add a bit of CSS. Here’s one way to center the popup using Flexbox…

#ouibounce-modal {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    position: fixed;
}
#ouibounce-modal .underlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    -webkit-animation: fadein .5s;
    animation: fadein .5s;
}
.modal {
    width: 600px;
    height: 290px;
    z-index: 1;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    max-width: 96%;
    bottom: 0;
    left: 0;
    line-height: 0;
    -webkit-animation: popin .3s;
    animation: popin .3s;
    background: #272822;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-body {
    display: block;
    line-height: initial;
    text-align: center;
    padding: 30px;
    color: white;
}

At the current stage, you should see a popup in the following style (without the additions I made):

Click!

Currently on n your end, it simply appears on the screen without animation. Add the following css to make the form appear more nicely:

@-webkit-keyframes popin {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0;
    }
    85% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@-ms-keyframes popin {
    0% {
        -ms-transform: scale(0);
        transform: scale(0);
        opacity: 0;
    }
    85% {
        -ms-transform: scale(1.05);
        transform: scale(1.05);
        opacity: 1;
    }
    100% {
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes popin {
    0% {
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        opacity: 0;
    }
    85% {
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

As defined, this popup will appear once every 21 days when the visitor tries to leave your site. You can easily add any content to this popup to improve conversion rates on your WordPress site or to offer various promotions.

Of course, you can also easily add shortcodes. In the case of Savvy Blog, I added the shortcode of the MC4W plugin.

Summary

In this guide, we’ve seen a simple process for building an exit-intent popup in WordPress using the ouibounce.js library. Hope you’ve learned something and feel free to ask questions in the comments.