Table of Contents

Popup on Exit Intent

Abby Updated by Abby

When trying to capture leads we need to use every resource available, here we'll show you how to display a popup modal when the user scrolls out of the page using the open-source Ouibounce library.

There's a lot of CSS, which can be intimidating, but it also makes it very customizable for your use case.

Here's a preview of what ours looks like:

This workaround shows us how to build the modal in a standalone bot (not embedded). If you'd like to use this method in an embedded bot, you'll just need to add the scripts to your container page instead of inside the bot. One thing to keep in mind is that this won't work for embedded full page bots.

Step 1: Adding the library scripts

We need to add these scripts to the <head> so we'll go to 'Settings'>'SEO & Tracking' and add them there:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ouibounce/0.0.12/ouibounce.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Step 2: The CSS

Next we'll add the following CSS to the 'Design'>'Custom Code'>'Add CSS' section of our bot:

#ouibounce-modal{
	z-index:41!important;
}

#ouibounce-modal {
  font-family: 'Montserrat', sans-serif;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#ouibounce-modal .underlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.8);
  cursor: pointer;
  -webkit-animation: fadein 0.5s;
  animation: fadein 0.5s;
}
#ouibounce-modal .modal-2 {
    z-index:41;
  width: 550px;
  height: 210px;
  z-index: 1;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 15px;
  -webkit-animation: popin 0.3s;
  animation: popin 0.3s;
}
#ouibounce-modal .modal-title {
  font-size: 18px;
  background-color: lightblue;
  color: ;
  padding: 10px 30px;
  margin: 0;
  border-radius: 4px 4px 0 0;
  text-align: right;
  font-weight:800;
  cursor: pointer;
}
#ouibounce-modal .modal-body {
  padding: 40px 35px 45px;
  font-size: 0.9em;
  color: white;
  background-color:#EF655A;
}
#ouibounce-modal p {
  color: white;
  font-size: 15px;
}

/*Link*/

#ouibounce-modal h1 a {
  color: white;
  font-size: 60px;
  font-weight:900;
}

/*Link on hover*/

#ouibounce-modal h1 a:hover {
  color: white;
  font-size: 60px;
  font-weight:900;
  text-decoration:underline;
}
#ouibounce-modal h1 {
  color: ;
  font-size: 20px;
  text-align: center;
  font-weight:6500;
  text-transform:uppercase;
}
#ouibounce-modal .modal-footer {
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
  font-weight:800;
}
#ouibounce-modal .modal-footer p {
  text-transform: capitalize;
  cursor: pointer;
  display: inline;
  border-bottom: 1px solid #344a5f;
}
@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@-ms-keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@-webkit-keyframes popin {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }

  85% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@-ms-keyframes popin {
  0% {
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }

  85% {
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes popin {
  0% {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }

  85% {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

Step 3: The Javascript

The final step is to add the Javascript, to the Javascript section of your bot in 'Design'>'Custom Code'.

Here you can change the text content, be sure to change the link for your own:



<div id="ouibounce-modal">
  <div class="underlay"></div>
  <div class="modal-2">
 <div class="modal-title">
      <p>Close X</p>
        </div>
        <div class="modal-body">
        </div>

 <h1>Don't go! Have more questions?<br><br><a href="https://calendly.com/account-here">Set up a video call</a></h1>
      </div>
    </div>




<script>
   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-title p').on('click', function() {
        $('#ouibounce-modal').hide();
      });
      $('#ouibounce-modal .modal').on('click', function(e) {
        e.stopPropagation();
      });
 </script>

How did we do?

Creating Masks for User Input (2 examples)

Contact