Simple Exit Intent Popup With Plain JavaScript – ExitPopup.js

Category: Javascript , Modal & Popup | June 17, 2022
Author:DigitalRuby
Views Total:0 views
Official Page:Go to website
Last Update:June 17, 2022
License:MIT

Preview:

Simple Exit Intent Popup With Plain JavaScript – ExitPopup.js

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:

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();

You Might Be Interested In:


Leave a Reply