Exit Intent Popup Code Snippet in JavaScript And jQuery

One of many tasks that I’m engaged on for this web site is having a popup div with a CTA that encourages new guests to subscribe to Martech Zone by e mail. There’s further growth I’m engaged on in order that I can widgetize this methodology for WordPress and have the exit intent part be an precise sidebar… however I did need to share the jQuery operate and instance code snippet that helps others to create an exit intent occasion.

What’s Exit Intent?

Exit intent is a method utilized by web sites to trace a consumer’s mouse motion and detect when the consumer is about to depart the web page. When the web site detects that the consumer is leaving, it will probably set off a popup or different kind of message to attempt to hold the consumer on the web page or entice them to return later.

Exit intent know-how makes use of JavaScript to trace mouse actions and decide when a consumer is about to depart a web page. When the web site detects that the consumer is about to depart, it will probably show a popup message, provide a particular deal, or present another kind of incentive to encourage the consumer to remain on the web page or return later.

Exit intent is usually utilized by e-commerce web sites to attempt to stop procuring cart abandonment or to advertise particular offers and reductions to clients who’re about to depart the positioning. It may also be utilized by content material web sites to advertise publication signups or to encourage customers to observe the positioning on social media.

JavaScript’s mouseleave operate

With the intention to perceive how mouseleave works, it’s useful to know the way mouse occasions are dealt with generally. Once you transfer your mouse over an online web page, a sequence of occasions are triggered by the browser, which might be captured and dealt with by JavaScript code. These occasions embody mousemove, mouseover, mouseout, mouseenter, and mouseleave.

The mouseenter and mouseleave occasions are much like the mouseover and mouseout occasions, however they behave barely in another way. Whereas mouseover and mouseout set off when the mouse enters or leaves a component, respectively, in addition they set off when the mouse enters or leaves any youngster components inside that ingredient. This could result in surprising conduct when working with complicated HTML buildings.

mouseenter and mouseleave occasions, however, solely set off when the mouse enters or leaves the ingredient that the occasion is hooked up to, and don’t set off when the mouse enters or leaves any youngster components. This makes them extra predictable and simpler to work with in lots of circumstances.

The mouseleave occasion is supported by most trendy browsers, together with Chrome, Firefox, Safari, and Edge. Nevertheless, it might not be supported by some older browsers, equivalent to Web Explorer 8 and earlier.

JavaScript Exit Intent Code Snippet

Whereas mouseleave seems to work on a given div, you can even apply it to a complete internet web page.

The code creates a brand new div ingredient referred to as overlay that covers your entire web page and has a semi-transparent black background (80% opacity). We add this overlay to the web page together with the popup div.

When the consumer triggers the exit intent by transferring their mouse exterior of the web page, we present each the popup and the overlay. This prevents the consumer from clicking wherever else on the web page whereas the popup is seen.

When the consumer clicks exterior of the popup or on the shut button, we disguise each the popup and the overlay to revive regular performance to the web page.

doc.addEventListener('DOMContentLoaded', operate() {
    // Create a div ingredient with the specified dimensions and styling
    var popup = doc.createElement('div');
    popup.model.place = 'mounted';
    popup.model.high = '50%';
    popup.model.left = '50%';
    popup.model.rework = 'translate(-50%, -50%)';
    popup.model.backgroundColor = '#fff';
    popup.model.border = '1px stable #ccc';
    popup.model.width = '1200px';
    popup.model.peak = '630px';
    popup.model.padding = '20px';

    // Create an in depth button ingredient with the specified styling
    var closeButton = doc.createElement('span');
    closeButton.model.place = 'absolute';
    closeButton.model.high = '10px';
    closeButton.model.proper = '10px';
    closeButton.model.fontSize = '24px';
    closeButton.model.cursor = 'pointer';
    closeButton.innerHTML = '&occasions;';

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

    // Create an overlay div with the specified styling
    var overlay = doc.createElement('div');
    overlay.model.place = 'mounted';
    overlay.model.high = '0';
    overlay.model.left = '0';
    overlay.model.width = '100%';
    overlay.model.peak = '100%';
    overlay.model.backgroundColor = 'rgba(0, 0, 0, 0.8)';
    overlay.model.zIndex = '999';

    // Add the overlay and popup to the web page
    doc.physique.appendChild(overlay);
    doc.physique.appendChild(popup);

    // Disguise the popup and overlay initially
    popup.model.show = 'none';
    overlay.model.show = 'none';

    // Present the popup and overlay when the consumer tries to depart the web page
    doc.addEventListener('mouseleave', operate(e) {
        if (e.clientY < 0) {
            popup.model.show = 'block';
            overlay.model.show = 'block';
        }
    });

    // Disguise the popup and overlay when the consumer clicks exterior of it
    doc.addEventListener('click on', operate(e) {
        if (!popup.incorporates(e.goal)) {
            popup.model.show = 'none';
            overlay.model.show = 'none';
        }
    });

    // Disguise the popup and overlay when the shut button is clicked
    closeButton.addEventListener('click on', operate() {
        popup.model.show = 'none';
        overlay.model.show = 'none';
    });
});

For optimum browser compatibility, I’d advocate utilizing jQuery to implement this as a substitute, although.

jQuery Exit Intent Code Snippet

Right here’s the jQuery code snippet, which is much extra suitable with all browsers (so long as you’re together with jQuery in your web page).

jQuery(doc).prepared(operate() {
    // Create a div ingredient with the specified dimensions and styling
    var popup = jQuery('<div></div>').css({
        'place': 'mounted',
        'high': '50%',
        'left': '50%',
        'rework': 'translate(-50%, -50%)',
        'background-color': '#fff',
        'border': '1px stable #ccc',
        'width': '1200px',
        'peak': '630px',
        'padding': '20px'
    });

    // Create an in depth button ingredient with the specified styling
    var closeButton = jQuery('<span></span>').css({
        'place': 'absolute',
        'high': '10px',
        'proper': '10px',
        'font-size': '24px',
        'cursor': 'pointer'
    }).html('&occasions;');

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

    // Create an overlay div with the specified styling
    var overlay = jQuery('<div></div>').css({
        'place': 'mounted',
        'high': '0',
        'left': '0',
        'width': '100%',
        'peak': '100%',
        'background-color': 'rgba(0, 0, 0, 0.8)',
        'z-index': '999'
    });

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

    // Disguise the popup and overlay initially
    popup.disguise();
    overlay.disguise();

    // Present the popup and overlay when the consumer tries to depart the web page
    jQuery(doc).on('mouseleave', operate(e) {
        if (e.clientY < 0) {
            popup.present();
            overlay.present();
        }
    });

    // Disguise the popup and overlay when the consumer clicks exterior of it
    jQuery(doc).on('click on', operate(e) {
        if (!jQuery(e.goal).closest(popup).size) {
            popup.disguise();
            overlay.disguise();
        }
    });

    // Disguise the popup and overlay when the shut button is clicked
    closeButton.on('click on', operate() {
        popup.disguise();
        overlay.disguise();
    });
});