A small library enabling you to display a modal before a user leaves your website.
Let me know if you end up using OuiBounce. I'd love to hear about your project / see OuiBounce in the wild :)
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
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.
- Create a hidden modal
- Select the modal with vanilla JavaScript (or jQuery) and call ouibounce
- Optional: Save the function to use the public API, allowing you to
fire
ordisable
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'));
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!'); }
});
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()
- This library provides no guarantees.
- To contribute, check out contributing.md.
- Licensed under MIT.
- Special thanks to Zertosh and Jenius.