How to create an Exit Intent Popup for Your Webiste
Introduction
In today’s world, attention has become a prized asset. Where every niche experiences strong competition, you must make every effort to keep your client engaged. Minor incidents like accidentally pushing the back button will take your customers off your site and out of mind and you won’t want this to happen, right? You can prevent these small gestures from creating big losses by creating a pop-up on your website asking your customer for their confirmation to leave your website. It can tremendously affect the engagement of buyers at your web portal.
In this guide you will learn how to create an exit intent popup for your website. The simple steps and coding strips in this manual can save you from losing your audience. Go through this read and design your website to engage better with your patrons and convert them into your clients.
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 you can navigate to ZIGPOLL blogs for more clearification.
Conclusion
By now, you are well aware of how costly it can be if your client leaves your website even unintentionally. A customer when gone is gone forever. Hence, it becomes even more essential to add an exit popup for your website asking your customer’s confirmation for leaving your website. This way, even if they do think about exiting your website, they may give it one last thought and decide to stay and continue browsing.
Convert your client decision in your favor by adding attractive and engaging exit popups to your online business portal.
