How to Build an Exit Intent Popup in WordPress (No Plugins)

Exit intent popups are one of the most effective conversion tools on e-commerce sites and content-heavy WordPress blogs. The concept is simple: JavaScript tracks the user’s mouse movement, and when it looks like they’re about to leave, a popup appears with a last-chance offer, newsletter signup, or other call to action.

I’ve been running one on this blog for years, and it has consistently brought in subscribers. Love them or hate them, they work.

Here are a few scenarios where an exit intent popup makes sense:

• 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.

Three people asked me in the same month which plugin I use for exit intent popups on this blog. The answer: it’s not a plugin at all. That’s also why it’s easy to design the popup however you want with basic CSS and JavaScript knowledge.

One rule: don’t annoy your visitors. A popup that fires too often, looks bad, or offers nothing useful will hurt more than it helps.

Before we start, try moving your mouse to the top edge of this page. The exit intent popup should appear. If it doesn’t, the cookie already exists – open in incognito 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 that contains the code which activates ouibounce on the new element we’ve just created (the #ouibounce-modal element).

To do so, add the following lines after 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 ouibounce, 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 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.

If you’re looking for a more general-purpose popup in WordPress without a plugin, I’ve got a separate guide for that too.

Summary

Building an exit intent popup in WordPress doesn’t require a plugin. With ouibounce.js, a few lines of PHP to inject the markup via wp_footer, and some CSS for styling, you can have a fully working exit popup in under an hour. Track it with analytics, test it in incognito, and keep it respectful – one popup per 21 days is a good default.