/ouibounce

Increase your landing page conversion rates.

Primary LanguageJavaScriptMIT LicenseMIT

OuiBounce alt text

tests Analytics

A small library enabling you to display a modal before a user leaves your website.

Support via Gittip

Quick note

Let me know if you end up using OuiBounce. I'd love to hear about your project / see OuiBounce in the wild :)

The philosophy behind this project

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:

Demo / Example

Installation

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.

You can also get OuiBounce from cdnjs.com.

Usage

  1. Create a hidden modal
  2. Select the modal with vanilla JavaScript (or jQuery) and call ouibounce
  3. Optional: Save the function to use the public API, allowing you to fire or disable OuiBounce on demand

Here's an example:

Without using jQuery

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

Using jQuery

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

Saving the OuiBounce function with vanilla JavaScript

var _ouiBounce = ouiBounce(document.getElementById('ouibounce-modal'));
Options

OuiBounce offers a few options, such as:

  • Sensitivity
  • Aggressive mode
  • Timer
  • Callback
  • Cookie expiration

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!'); } });

Cookie expiration: You can add a cookie expiration (in days). By default, the cookie will expire at the end of the session.

ouiBounce(document.getElementById('ouibounce-modal'), { cookieExpire: 10 });

Multiple options: You can also combine multiple options:

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

If you save the OuiBounce function, you can use fire to show the modal whenever you want or disable to disable it.

Here's how to save the OuiBounce function with vanilla JavaScript

var _ouiBounce = ouiBounce(document.getElementById('ouibounce-modal'));

Fire: To fire OuiBounce on demand use _ouiBounce.fire()

Disable: To disable OuiBounce on demand use _ouiBounce.disable()

Miscellaneous