glio

Detects if the mouse of an user leaves the viewport / document borders of your website and when this happens, trigger your callback. Portuguese documentation.

Demo.

17+ ✔	14+ ✔	9+ ✔	17+ ✔	5+ ✔

Reasons for use:

• Increase your conversion rates!
• Give visitors reasons to stay!
• Grab your users’ attention!

Cases:

• if you are using gliojs, paste your project here.

Articles about Exit-popups:

• 7 Best Practices for Using Exit-Intent Popovers, Popups
• 5 Scientific Reasons Exit Popups Are So Freaking Effective

Install:

• Npm: npm install gliojs
• Bower: bower install gliojs
• Cdn: https://cdnjs.cloudflare.com/ajax/libs/gliojs/0.0.7/glio.min.js

Import the library glio.min.js in 'dist' folder in your site. <script src='glio.min.js'></script>

Usage:

The arguments are a Arrays, where the first index is the direction and the second is a callback.

glio( [ direction, callback ] );

5 Directions:

• top
• top-left
• top-right
• bottom-left
• bottom-right

Example:

• top-left and top-right

    glio.init(
      [ 'top-left', function () {
          alert('this is top-left');
        }
      ],
      [ 'top-right', function () {
          alert('this is top-right');
        }
      ]
    );

• all directions

  glio.init(
    [ 'top', function () {
        alert('this is top.');
      }
    ],
    [ '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'); 
      }
    ] 
  );

Configurations:

glio.config.key = value; Set the configuration before the init.

• screenWidthFragment: the quantity of parts the height and width screen will be divided. Default: 12.
• centerTopHeight: height of 'top' direction. When the mouse is equal or major this value, the callback is triggered. Default: 10.
• heightTopLeft: height of 'top-left' direction. When the mouse is equal or major this value, the callback is triggered. Default: 30.
• heightTopRight: height of 'top-right' direction. When the mouse is equal or major this value, the callback is triggered. Default: 30.

This software is licensed under the MIT License.