A small library enabling you to display a modal before a user leaves your website. This was inspired by BounceExchange.

This library helps you increase landing page conversion rates. From my experience, you can expect a lift of 7% to 15% depending on your audience, traffic type (paid or unpaid) and copy.

Talking about copy... please use OuiBounce to provide value to your visitors. With tools like these it's very easy to create something spammy-looking.

Not sure what I mean by provide value? Here are a few ideas to get your creative juices flowing:

• Free ebook
• Upcoming webinar invite
• Exclusive access to XYZ
• A full educational course
• Valuable content

• Example #1
• Example #2

You can also read the docs as a GitHub Page.

Download the minified or unminified script and include it on your page. OuiBounce is wrapped by a umd wrapper, so if you are using requirejs/amd or commonjs/browserify, it will still work fine.

1. Create a hidden modal
2. Select the modal with vanilla JavaScript (or jQuery) and call ouibounce

Here's an example:

Without using jQuery

ouiBounce(document.getElementById('ouibounce-modal'));

Using jQuery

ouiBounce($('#ouibounce-modal')[0]);

OuiBounce offers a few options, such as:

• Sensitivity
• Aggressive mode
• Timer
• Callback

Sensitivity: Define how far the mouse has to be from the window breakpoint. The higher value, the more sensitive. Defaults to 20.

Example

ouiBounce(document.getElementById('ouibounce-modal'), { sensitivity: 40 });

Aggressive mode: By default, OuiBounce will only fire once for each visitor. When OuiBounce fires, a cookie is created to ensure a non obtrusive experience.

There are cases, however, when you may want to be more aggressive (as in, you want the modal to be elegible to fire anytime the page is loaded/ reloaded). An example use-case would be on your Paid landing pages.

Here's how to enable aggressive mode:

ouiBounce(document.getElementById('ouibounce-modal'), { aggressive: true });

Set a min time before OuiBounce fires: By default, OuiBounce won't fire in the first second. You can pass a timer option like so:

ouiBounce(document.getElementById('ouibounce-modal'), { timer: 0 });

Callback: You can add a callback, which will run once OuiBounce has been triggered:

ouiBounce(document.getElementById('ouibounce-modal'), { callback: function() { console.log('OuiBounce fired!'); } });

Multiple options: You can also combine multiple options:

ouiBounce(document.getElementById('ouibounce-modal'), {
  aggressive: true,
  timer: 0,
  callback: function() { console.log('ouiBounce fired!'); }
});

• This library provides no guarantees.
• To contribute, check out contributing.md.
• Licensed under MIT.
• Special thanks to Zertosh, Jenius and BounceExchange.