How to create an exit pop-up on Convert with Ouibounce.js

Convert does not provide built in widgets, such as exit pop up, banners or widgets. However, it is relatively easy to install one using open source libraries, such as Ouibounce. This article will describe how to install one on Convert.

First, you will need to add the HTML, JavaScript, and CSS for your pop up modal. Here is a sample for the code.

convert.$( document ).ready(function() {
   

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

      convert.$('body').on('click', function() {
        convert.$('#ouibounce-modal').hide();
      });

      convert.$('#ouibounce-modal .modal-footer').on('click', function() {
        convert.$('#ouibounce-modal').hide();
      });

      convert.$('#ouibounce-modal .modal').on('click', function(e) {
        e.stopPropagation();
      });
    
 console.log( "ready!" );
});

The code will need to be added to your page, using the Visual Editor and adding it to the specific sections:

• HTML: Add it using the Insert HTML option in the contextual menu of the Visual Editor. Add it anywhere.
• JavaScript: Add it to the Custom JavaScript Editor.
• CSS: Add it to the Custom CSS Editor.

Customize it using the Ouibounce documentation.