Trigger a Pop-up Modal When People Leave Your Website
Most visitors will leave your website if they can't quickly find the information they're looking for. A great strategy to combat this is to offer them some extra value for sticking around.
Perhaps, this is a free guide or ebook in exchange for joining an email list.
Maybe it's just a coupon to encourage them to place an order.
Overall, it's a great strategy to boost conversions on your website and make the most out your traffic.
tl;dr here's the code and the full explanation on how to do it.
How These Modals Work
You're deep into debugging some JavaScript and can't figure out how to trigger your modal the way you want.
You clicked on a Google result, but it's not helpful so you move your mouse and hover over the back button when...
WHAM!!!
A pop-up magically appears, somehow knowing that you were leaving and as a last-ditch attempt to keep you engaged, it offers you a whopping 20% off an unrelated course. And alas, the useless Google result has wasted an extra 3 seconds of your life.
We've all been there. Nobody likes pop-ups, but the thing is this strategy of presenting a modal and attempting to get more leads and conversions is HIGHLY effective.
Displaying pop-ups only when the visitor is leaving means all of your visitors have a better experience while they are consuming your content.
Only when they decide to move their mouse out of the browser to navigate to another place on the internet do you prompt them.
And it's at this point that you have nothing to lose either. They were going to leave anyway, you didn't gate your content with a paywall or blast them with modals causing them to leave.
How to Detect Abandonment
The naive approach would be to use something like a document.onmousemove listener. You could detect the mouse's position on the website and as it appears to exit you could trigger some JavaScript to present your modal.
But there's a better way!
The Mouseout Event
You can listen for a mouseout event which tells you the visitor's mouse has left a specific element on the DOM.
Here's an example.
document.addEventListener("mouseout", (event) => {
if (!event.toElement && !event.relatedTarget) {
// trigger your pop-up here
}
});
We need to check a couple properties on the event to make sure the visitor really is leaving our website.
The event.toElement and event.relatedTarget calls tell us if the mouse left a DOM element and entered another one.
We check to make sure that did not happen, meaning the mouse didn't enter any other elements since it's off the screen now and quickly approaching the browser back button!
Within this conditional we can now call whatever JavaScript we need to present our pop-up.
It may be as simple as:
document.getElementById('abandoned-popup').style.display = "block";
But this will depend on your website and the specific implementation of your pop-up.
Wrapping Up
That's all there is to it! To recap, we just need to add a mouseout event listener and check to make sure the mouse left the DOM completely. This tells us the visitor moved the mouse out of our website and we can hit them with a quick last-ditch attempt to not leave. :)
For more helpful articles and resources, join my mailing list and get my newest guides and lessons straight to your inbox!