Create An Exit Popup When Leaving Website – ouibounce.js

Preview:

Description:

ouibounce.js is an useful script that intelligently detects the mouse behaviors and then pops up a modal window when your visitors are about to close the current webpage. Helpful for internet marketing to increase the landing page conversion rates greatly. Side-wide cookie is supported.

How to use it:

Add the jQuery javascript library in your landing page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Add the OuiBounce CSS & Javascript in the head section of your landing page.

<link rel="stylesheet" href="ouibounce.min.css">
<script src="build/ouibounce.js"></script>

Create the OuiBounce Modal following the Html structure like this.

<div id="ouibounce-modal">
<div class="underlay"></div>
<div class="modal">
<div class="modal-title">
<h3> Modal Title </h3>
</div>
<div class="modal-body">
Modal Body 
</div>
<div class="modal-footer">
Modal Footer
</div>
</div>
</div>

The Javascript to fire the modal on page exit.

<script>
// if you want to use the 'fire' or 'disable' fn,
// you need to save OuiBounce to an object
var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
  aggressive: true,
  timer: 0,
  callback: function() { console.log('ouibounce fired!'); }
});
$('body').on('click', function() {
  $('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal-footer').on('click', function() {
  $('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal').on('click', function(e) {
  e.stopPropagation();
});
</script>