/bounce-exchange-alternative

An open-sourced version of bounceexchange.com. Use this library and stop losing prospective customers.

Primary LanguageCSSMIT LicenseMIT

Bounce Exchange Alternative alt text

(aka OuiBounce)

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

The philosophy behind this project

This library helps you increase your 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 offer.

Talking about offers... please use OuiBounde to provide value to your visitors. With tools like these it's very easy to create something spammy-looking that provides little value to prospective customers yet ensures a terrible experience.

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

Installation

Download the minified script located in the "source" folder and include it in your HTML head.

Usage

OuiBounce is a jQuery plugin, make sure you load it after jQuery.

To use it simply:

  • Create a hidden modal
  • Select the modal with jQuery and call ouibounce. Here's an example:
$('#ouibounce-modal').ouibounce();
Options

OuiBounce offers a few options, such as:

  • Sensitivity
  • Aggressive mode
  • Timer

Configuring sensitivity: Use it to define how far your mouse has to be from the window breakpoint. The higher value the more sensitive. Defaults to 20.

Example

$('#ouibounce-modal').ouibounce({sensitivity: 40});

Enabling aggressive mode: By default, OuiBounce will only fire once. When OuiBounce fires a cookie is created to ensure an 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). A perfect example is Paid landing pages.

Here's how to enable aggressive mode:

$('#ouibounce-modal').ouibounce({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-modal').ouibounce({timer: 0});

To remove ouibounce: Call

$('html').off('mouseout.ouibounce');

Example

Live example

Miscellaneous