Exit Intent Popup Code Snippet in JavaScript And jQuery

One of many initiatives 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 electronic mail. There’s further improvement 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 wish 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 go away the web page. When the web site detects that the consumer is leaving, it may possibly set off a popup or different kind of message to attempt to preserve 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 go away a web page. When the web site detects that the consumer is about to go away, it may possibly show a popup message, supply 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 forestall buying cart abandonment or to advertise particular offers and reductions to prospects who’re about to go away the location. It may also be utilized by content material web sites to advertise e-newsletter signups or to encourage customers to observe the location on social media.

JavaScript’s mouseleave operate

In an effort to perceive how mouseleave works, it’s useful to know the way mouse occasions are dealt with usually. Whenever you transfer your mouse over an internet web page, a collection of occasions are triggered by the browser, which may be captured and dealt with by JavaScript code. These occasions embrace mousemove, mouseover, mouseout, mouseenter, and mouseleave.

The mouseenter and mouseleave occasions are just like the mouseover and mouseout occasions, however they behave barely in a different 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 little one parts inside that ingredient. This could result in surprising conduct when working with advanced HTML constructions.

mouseenter and mouseleave occasions, however, solely set off when the mouse enters or leaves the ingredient that the occasion is connected to, and don’t set off when the mouse enters or leaves any little one parts. This makes them extra predictable and simpler to work with in lots of instances.

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

JavaScript Exit Intent Code Snippet

Whereas mouseleave seems to work on a given div, you may also apply it to a whole net 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 outdoors 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 outdoors 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 = 'fastened';
    popup.model.high = '50%';
    popup.model.left = '50%';
    popup.model.rework = 'translate(-50%, -50%)';
    popup.model.backgroundColor = '#fff';
    popup.model.border = '1px strong #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 = 'fastened';
    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);

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

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

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

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

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

jQuery Exit Intent Code Snippet

Right here’s the jQuery code snippet, which is way extra appropriate 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': 'fastened',
        'high': '50%',
        'left': '50%',
        'rework': 'translate(-50%, -50%)',
        'background-color': '#fff',
        'border': '1px strong #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': 'fastened',
        '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);

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

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

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

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