Author: | luisvinicius167 |
---|---|
Views Total: | 780 views |
Official Page: | Go to website |
Last Update: | May 20, 2023 |
License: | MIT |
Preview:

Description:
Glio.js is a simple yet powerful exit intent detection library that detects when a user’s mouse leaves the viewport of your website and triggers a callback function of your choice.
Features:
- Detect user exit intent from the top, top-right, top-left, bottom-right and bottom-left areas of the viewport.
- Only fires once per session to avoid irritating users.
- Easy to integrate with 3rd-party modal libraries to display a customized exit popup.
How to use it:
1. Download and load the minified version of the Glio.js library.
<script src="glio.min.js"></script>
2. Call the glio function with the desired direction (‘top’, ‘top-left’, ‘top-right’, ‘bottom-left’, or ‘bottom-right’) and a callback function as follows:
glio.init( [ 'top', function () { // use SweetAlert2 Popup Library // see https://sweetalert2.github.io/ Swal.fire( "Hey! ", "Before you leave, star this project and share with your friends! Ah, this is the top direction!", "warning" ); } ], [ 'top-left', function () { alert('this is top-left'); } ], [ 'top-right', function () { alert('this is top-right'); } ], [ 'bottom-left', function () { alert('this is bottom-left'); } ], [ 'bottom-right', function () { alert('this is bottom-right'); } ] );
3. Available options.
// the quantity of parts the height and width screen will be divided glio.config.screenWidthFragment = 12 // height of 'top' direction glio.config.centerTopHeight = 10 // height of 'top-left' direction glio.config.heightTopLeft = 30 // height of 'top-right' direction glio.config.heightTopRight = 30