How to create an Exit Intent Popup for Your Webiste
What is an exit-intent popup?
An exit-intent popup is an overlay that will appear on your website as soon as the user wants to leave the website or the cursor of the user is moved outside of the viewport of the browser it toggle the popup in your website.
We will see how to add an exit-intent popup on both desktop view as well as mobile view:
For Desktop View:
For desktop view Exit intent is very easy. You have to track the user cursor if the user cursor goes out of the main website viewport then you can toggle the popup and engage the customer before they leave the website.
Code for Desktop (Javascript)
document.addEventListener("mouseleave", function(e){
if( e.clientY < 0 )
{
if(Number(sessionStorage.exit_init) != 1){
sessionStorage.exit_init = 1;
$('#exitModal').modal('show');
}
}
}, false);
In above code you will add a eventlistner name "mouseleave" in function parameter you will get the cursor track data in that you will check for clientY if it is less than zero means the cursor is going on top of website the you will trigger the popup when the clientY is less than zero with a session variable if you dont put any session variable it will toggle popup every time you move up in the website so make sure to set session varible.
For Mobile view:
For the Mobile view we could not use the desktop method as in mobile devices we don't have a cursor and we cannot track the cursor. so we do not have many options for exit-intent in mobile browsers. Due to security purposes we have limited control over mobile browsers. There is a solution which I personally used and it works really well . The solution is simple: you have to track the user scroll position and when the user scrolls up, track their speed. If the speed goes to a certain speed you can set that by R&D then trigger the exit-intent popup. The solution I got from ZIGPOLL blogs.
Code for Mobile view:
function myScrollSpeedFunction() {
const delta = my_scroll();
if(delta < -80){
console.log('Perform your exit intent task here.');
if(Number(sessionStorage.exit_mobile) != 1){
sessionStorage.exit_mobile = 1;
$('#exitModal').modal('show');
}
}
}
var my_scroll = (() => {
let last_position, new_position, timer, delta, delay = 50;
function clear() {
last_position = null;
delta = 0;
}
clear();
return () => {
new_position = window.scrollY;
if (last_position != null){
delta = new_position - last_position;
}
last_position = new_position;
clearTimeout(timer);
timer = setTimeout(clear, delay);
return delta;
};
})()
$(document).on('scroll', myScrollSpeedFunction);
In Above code you can see we are tracking the speed of user scroll as the user scroll to top with a certain speed we will toggle the popup in our couse the certain speed is -80 if the speed goes above -80 it wil toggle the popup. In case if you don't understand something feel free to contact or can navigate to ZIGPOLL blogs for more clearification.
