Simple Exit Intent Popup With Plain JavaScript – ExitPopup.js

Preview:

Description:

Exit intent popup is a technique that helps you keep your users engaged by asking them to stay on your website. When a user tries to leave the page, they are prompted to take an action before they can leave. This action could be anything from subscribing to your newsletter, downloading some content, or even watching a video.

This is a simple JavaScript library that detects when a visitor is about to leave your website. It does this by monitoring their mouse movement and checking if it goes outside of the browser window. If the visitor’s mouse moves out of your window, it will display an alert popup box asking for confirmation before leaving or closing the current page.

See Also:

• 5 Best Exit Intent Popup JavaScript Plugins To Retain Visitors
• Create An Exit Popup When Leaving Website – ouibounce.js
• Cookies-enabled Exit Intent Popup Box In Vanilla JavaScript

How to use it:

1. Create the HTML for the exit intent popup.

<div id="digitalruby_exitpopup_div">
  ... Any Content Here ...
  <!-- Close Button OPTIONAL -->
  <input type="button" value="Close" onclick="digitalruby_hide_exit_popup();" />
</div>

2. Create the HTML for the fullscreen overlay when the exit intent popup is activated.

<div id="digitalruby_exitpopup_div_background">

3. The example CSS for the exit intent popup & background overlay.

#digitalruby_exitpopup_div {
  display: none;
  position: fixed;
  z-index: 999;
  padding: 2rem;
  background-color: #222222;
  color: #FFFFFF;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 400px;
  max-height: 300px;
  width: 75%;
  height: 75%;
  filter: drop-shadow(0px 0px 10px black);
}
#digitalruby_exitpopup_div_background {
  display: none;
  position: fixed;
  background-color: rgba(20, 20, 20, 0.5);
  z-index: 0;
  transform: translate(0%, 0%);
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}

4. Import the ExitPopup.js library and config the exit intent popup as follows:

<script src="digitalruby.exitpopup.js" type="text/javascript" onload="
  const opt = digitalruby_exitpopup_options;
  // popup ID
  opt.element_id = 'digitalruby_exitpopup_div';
  // background ID
  opt.background_element_id = 'digitalruby_exitpopup_div_background'; 
  // true = detect exit intent only if the mouse is moved on the top address bar
  opt.top_only = false;
  // whether to close the popup on click outside
  opt.click_outside_to_close = true; 
  // time to wait before trigger the exit intent detecting
  opt.delay = 3000;
  // ignore specific pages
  opt.path_regex = '';
  // execute a callback before the popup shows
  opt.will_show = function()
  {
    console.log('popup showing');
  };
" async defer></script>

5. Clear the local storage to re-enable the Exit Intent Popup on the current page.

digitalruby_exitpopup_reset_flag();