Detect When a Mouse Leaves the Window with Glio.js

By Jake Rocheleau. in UI/UX. Updated on December 8, 2017.

How many times do you go to close a tab and notice a modal window asking you to stay? This seems commonplace nowadays and it’s done for one reason: it works!

You can build a similar effect using the Glio.js library. It’s a free open-source JS script to detect when the user’s mouse cursor is getting close to the edge or when it leaves the browser window.

This can be used to try keeping visitors on your site. But, it can also be used to create dynamic effects if the user’s mouse goes far to one side of the screen.

You’ll find a lot of these exit intent scripts all over the web and most of them are tough to customize. But, that’s what makes Glio.js so great.

It’s a powerful library that gives you control over what you do with the screen. If your user’s mouse leaves the browser you can display a modal, or change the background color, or do absolutely nothing.

It also comes with built-in hot spots that you can check whenever the user’s mouse gets close to any of the four corners of the screen. You can also define the callback method and how close the cursor should get before running anything.

To use Glio, just download a copy from GitHub and get it installed. You could also pull a copy from Bower, npm, or directly from a CDN.

With the script in your page, you just add this one line of code (customized with your options):

glio.init( [ direction, callback ] );

The direction option can be any corner (e.g. “top-left”) or “top”, representing the top of the screen. Your callback function is whatever JS code you want to run when the user’s mouse gets too close. Other option lets you define the distance from the direction point, you can find the related info on GitHub.

So, if you’re looking for a simple script to detect exit intent Glio is a must-have resource.