Customizable Exit Intent Detection Library – Glio.js

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

Preview:

Customizable Exit Intent Detection Library – Glio.js

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

You Might Be Interested In:


Leave a Reply