repository·master·Indexed 25 days ago
https://github.com/carlsednaoui/ouibounceA lightweight JavaScript library (v0.0.12) designed to increase landing page conversion rates by displaying a modal window when a user exhibits exit intent. It features a configurable API for sensitivity, timers, and cookie management, and is compatible with UMD, AMD, and CommonJS.
You can install Ouibounce using several methods:
npm install ouibouncecurl http://bower.herokuapp.com/packages/ouibounceOuibounce is wrapped by a UMD wrapper, making it compatible with requirejs/amd and commonjs/browserify.
npm install ouibounceThe ouibounce function accepts an optional configuration object. You can combine multiple options in a single object.
| Option | Description |
|---|---|
sensitivity | How far the mouse must be from the top of the viewport to trigger the event. Defaults to 20. Higher values are more sensitive. |
aggressive | If true, the modal can fire every time the page is reloaded (bypassing the default single-fire cookie behavior). |
timer | Minimum time in milliseconds to wait before Ouibounce is allowed to fire (prevents false positives). Defaults to 1000ms. |
delay | A "grace period" in milliseconds. If the user's mouse re-enters the body before this time passes, the modal will not appear. |
callback | A function that runs once Ouibounce has been triggered. |
cookieExpire | Number of days before the cookie expires. Defaults to the end of the session. |
cookieDomain | The domain for the cookie. Use .example.com to include subdomains. |
cookieName | Custom string for the cookie name. |
sitewide | If true, sets a sitewide cookie. |
ouibounce(document.getElementById('ouibounce-modal'), {
aggressive: true,
sitewide: true,
cookieDomain: '.example.com',
timer: 0,
callback: function() { console.log('ouibounce fired!'); }
});To use Ouibounce, create a hidden modal in your HTML, select it with vanilla JavaScript or jQuery, and pass the element to the ouibounce function.
Vanilla JavaScript:
ouibounce(document.getElementById('ouibounce-modal'));jQuery:
ouibounce($('#ouibounce-modal')[0]);If you want to use Ouibounce as a logic provider for another plugin (e.g., Vex) without it managing a specific DOM element, call ouibounce with false as the first argument.
var _ouibounce = ouibounce(false, {
callback: function() { console.log('ouibounce fired!'); }
});If you capture the object returned by the ouibounce function, you can control the modal programmatically using the public API.
fire(): Manually triggers the ouibounce event.disable(): Disables Ouibounce so it will not fire on page exit.disable({ options }): Disables Ouibounce sitewide for a specific duration using cookie options.The disable method accepts the following cookie configuration keys:
cookieExpirecookieDomaincookieNamesitewidevar modal = ouibounce(document.getElementById('ouibounce-modal'));
modal.fire(); // fire the ouibounce event
modal.disable(); // disable ouibounce
modal.disable({ cookieExpire: 50, sitewide: true }); // disable sitewide for 50 daysvar modal = ouibounce(document.getElementById('ouibounce-modal'));
modal.fire();