Crear una ventana emergente de salida al salir del sitio web-ouibounce. js

Vista prévia

Descripción

ouibounce. js es una secuencia de comandos útil que detecta de forma inteligente los comportamientos del mouse y, a continuación, aparece una ventana modal cuando los visitantes están a punto de cerrar la página web actual. Útil para el marketing en Internet para aumentar las tasas de conversión de página de aterrizaje en gran medida. Se admite la cookie en todo el lado.

Funcionamiento

Agregue la biblioteca de JavaScript de jQuery en su página de aterrizaje.

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

Agregue el CSS OuiBounce & JavaScript en la sección Head de su página de aterrizaje.

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

Crear el modal OuiBounce siguiendo la estructura HTML como esta.

<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>

El código JavaScript para activar el modal en la salida de página.

<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>