Content MarketingEmail Marketing & Automation

Exit Intent Popup Code Snippet in JavaScript And jQuery

One of the projects that I’m working on for this site is having a popup div with a CTA that encourages new visitors to subscribe to Martech Zone by email. There’s additional development I’m working on so that I can widgetize this method for WordPress and have the exit intent section be an actual sidebar… but I did want to share the jQuery function and example code snippet that helps others to create an exit intent event.

What is Exit Intent?

Exit intent is a technique used by websites to track a user’s mouse movement and detect when the user is about to leave the page. When the website detects that the user is leaving, it can trigger a popup or other type of message to try to keep the user on the page or entice them to return later.

Exit intent technology uses JavaScript to track mouse movements and determine when a user is about to leave a page. When the website detects that the user is about to leave, it can display a popup message, offer a special deal, or provide some other type of incentive to encourage the user to stay on the page or return later.

Exit intent is often used by e-commerce websites to try to prevent shopping cart abandonment or to promote special deals and discounts to customers who are about to leave the site. It can also be used by content websites to promote newsletter signups or to encourage users to follow the site on social media.

JavaScript’s mouseleave function

In order to understand how mouseleave works, it’s helpful to know how mouse events are handled in general. When you move your mouse over a web page, a series of events are triggered by the browser, which can be captured and handled by JavaScript code. These events include mousemove, mouseover, mouseout, mouseenter, and mouseleave.

The mouseenter and mouseleave events are similar to the mouseover and mouseout events, but they behave slightly differently. While mouseover and mouseout trigger when the mouse enters or leaves an element, respectively, they also trigger when the mouse enters or leaves any child elements within that element. This can lead to unexpected behavior when working with complex HTML structures.

mouseenter and mouseleave events, on the other hand, only trigger when the mouse enters or leaves the element that the event is attached to, and do not trigger when the mouse enters or leaves any child elements. This makes them more predictable and easier to work with in many cases.

The mouseleave event is supported by most modern browsers, including Chrome, Firefox, Safari, and Edge. However, it may not be supported by some older browsers, such as Internet Explorer 8 and earlier.

JavaScript Exit Intent Code Snippet

While mouseleave appears to work on a given div, you can also apply it to an entire web page.

The code creates a new div element called overlay that covers the entire page and has a semi-transparent black background (80% opacity). We add this overlay to the page along with the popup div.

When the user triggers the exit intent by moving their mouse outside of the page, we show both the popup and the overlay. This prevents the user from clicking anywhere else on the page while the popup is visible.

When the user clicks outside of the popup or on the close button, we hide both the popup and the overlay to restore normal functionality to the page.

document.addEventListener('DOMContentLoaded', function() {
    // Create a div element with the desired dimensions and styling
    var popup = document.createElement('div');
    popup.style.position = 'fixed';
    popup.style.top = '50%';
    popup.style.left = '50%';
    popup.style.transform = 'translate(-50%, -50%)';
    popup.style.backgroundColor = '#fff';
    popup.style.border = '1px solid #ccc';
    popup.style.width = '1200px';
    popup.style.height = '630px';
    popup.style.padding = '20px';

    // Create a close button element with the desired styling
    var closeButton = document.createElement('span');
    closeButton.style.position = 'absolute';
    closeButton.style.top = '10px';
    closeButton.style.right = '10px';
    closeButton.style.fontSize = '24px';
    closeButton.style.cursor = 'pointer';
    closeButton.innerHTML = '×';

    // Add the close button to the popup div
    popup.appendChild(closeButton);

    // Create an overlay div with the desired styling
    var overlay = document.createElement('div');
    overlay.style.position = 'fixed';
    overlay.style.top = '0';
    overlay.style.left = '0';
    overlay.style.width = '100%';
    overlay.style.height = '100%';
    overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
    overlay.style.zIndex = '999';

    // Add the overlay and popup to the page
    document.body.appendChild(overlay);
    document.body.appendChild(popup);

    // Hide the popup and overlay initially
    popup.style.display = 'none';
    overlay.style.display = 'none';

    // Show the popup and overlay when the user tries to leave the page
    document.addEventListener('mouseleave', function(e) {
        if (e.clientY < 0) {
            popup.style.display = 'block';
            overlay.style.display = 'block';
        }
    });

    // Hide the popup and overlay when the user clicks outside of it
    document.addEventListener('click', function(e) {
        if (!popup.contains(e.target)) {
            popup.style.display = 'none';
            overlay.style.display = 'none';
        }
    });

    // Hide the popup and overlay when the close button is clicked
    closeButton.addEventListener('click', function() {
        popup.style.display = 'none';
        overlay.style.display = 'none';
    });
});

For maximum browser compatibility, I’d recommend using jQuery to implement this instead, though.

jQuery Exit Intent Code Snippet

Here’s the jQuery code snippet, which is far more compatible with all browsers (as long as you’re including jQuery in your page).

jQuery(document).ready(function() {
    // Create a div element with the desired dimensions and styling
    var popup = jQuery('<div></div>').css({
        'position': 'fixed',
        'top': '50%',
        'left': '50%',
        'transform': 'translate(-50%, -50%)',
        'background-color': '#fff',
        'border': '1px solid #ccc',
        'width': '1200px',
        'height': '630px',
        'padding': '20px'
    });

    // Create a close button element with the desired styling
    var closeButton = jQuery('<span></span>').css({
        'position': 'absolute',
        'top': '10px',
        'right': '10px',
        'font-size': '24px',
        'cursor': 'pointer'
    }).html('&times;');

    // Add the close button to the popup div
    popup.append(closeButton);

    // Create an overlay div with the desired styling
    var overlay = jQuery('<div></div>').css({
        'position': 'fixed',
        'top': '0',
        'left': '0',
        'width': '100%',
        'height': '100%',
        'background-color': 'rgba(0, 0, 0, 0.8)',
        'z-index': '999'
    });

    // Add the overlay and popup to the page
    jQuery('body').append(overlay, popup);

    // Hide the popup and overlay initially
    popup.hide();
    overlay.hide();

    // Show the popup and overlay when the user tries to leave the page
    jQuery(document).on('mouseleave', function(e) {
        if (e.clientY < 0) {
            popup.show();
            overlay.show();
        }
    });

    // Hide the popup and overlay when the user clicks outside of it
    jQuery(document).on('click', function(e) {
        if (!jQuery(e.target).closest(popup).length) {
            popup.hide();
            overlay.hide();
        }
    });

    // Hide the popup and overlay when the close button is clicked
    closeButton.on('click', function() {
        popup.hide();
        overlay.hide();
    });
});

Douglas Karr

Douglas Karr is CMO of OpenINSIGHTS and the founder of the Martech Zone. Douglas has helped dozens of successful MarTech startups, has assisted in the due diligence of over $5 bil in Martech acquisitions and investments, and continues to assist companies in implementing and automating their sales and marketing strategies. Douglas is an internationally recognized digital transformation and MarTech expert and speaker. Douglas is also a published author of a Dummie's guide and a business leadership book.

Related Articles

Back to top button
Close

Adblock Detected

Martech Zone is able to provide you this content at no cost because we monetize our site through ad revenue, affiliate links, and sponsorships. We would appreciate if you would remove your ad blocker as you view our site.