How to Create an Exit-Intent Popup in Webflow

(function() {
  var shown = sessionStorage.getItem('exit-shown');
  if (shown) return;

  var overlay = document.getElementById('exit-popup');
  if (!overlay) return;

  function show() {
    if (sessionStorage.getItem('exit-shown')) return;
    overlay.style.display = 'flex';
    sessionStorage.setItem('exit-shown', '1');
  }

  function close() {
    overlay.style.display = 'none';
  }

  // Desktop: mouse leaving upward
  document.addEventListener('mouseleave', function(e) {
    if (e.clientY <= 0) show();
  });

  // Mobile: fast upward scroll (intent to leave)
  var lastScroll = window.scrollY;
  window.addEventListener('scroll', function() {
    var delta = lastScroll - window.scrollY;
    if (delta > 50 && window.scrollY < 200) show();
    lastScroll = window.scrollY;
  });

  // Close
  overlay.addEventListener('click', function(e) {
    if (e.target === overlay) close();
  });
  document.querySelectorAll('.exit-popup-close').forEach(function(btn) {
    btn.addEventListener('click', close);
  });
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') close();
  });
})();

// Activate exit intent only after 30 seconds
var ready = false;
setTimeout(function() { ready = true; }, 30000);
document.addEventListener('mouseleave', function(e) {
  if (ready && e.clientY <= 0) show();
});