Exit Intent Detection Library

A lightweight, vanilla JavaScript library for detecting exit intent on web pages. Useful for showing popups, surveys, or capturing feedback before users leave your site.

Features

• Detects exit intent via multiple signals:
  • Time on page
  • User idle time
  • Mouse leaves window
  • Tab/document visibility change
  • Window loses focus (blur)
  • Pages Viewed
  • Fast upward scrolling
• Customizable options
• Simple API
• No dependencies

Installation

Copy src/exit-intent.js into your project, or install via npm (if published):

npm install exit-intent-js

Usage

import observeExitIntent from './src/exit-intent';

const { destroy } = observeExitIntent({
  eventName: 'my-exit-event',
  timeOnPage: 10000,
  debug: true
});

window.addEventListener('my-exit-event', e => {
  console.log('Exit intent detected:', e.detail);
});

// To manually clean up listeners and timers:
// destroy();

Options

By default the library stores a persistent page-view counter in localStorage under the key exit-intent-page-views and automatically increments that value every time the script is evaluated (i.e. on a full page load).
If you have a single-page-app (SPA) and want to increment the counter on client-side route changes, call:

observeExitIntent.incrementPageViews(); // bump by 1 (or pass a custom amount)

Responsive Scroll Thresholds

The scrollUpThreshold option supports responsive thresholds for different device types:

Object Format (Recommended)

observeExitIntent({
  scrollUpThreshold: {
    mobile: 200,   // Lower threshold for mobile devices (≤ 768px)
    desktop: 400   // Higher threshold for desktop devices (> 768px)
  },
  mobileBreakpoint: 768 // Screen width threshold for mobile detection
});

Legacy Number Format (Still Supported)

observeExitIntent({
  scrollUpThreshold: 300 // Same threshold for all devices
});

Benefits of Responsive Thresholds

• Mobile devices: Lower threshold (200px) makes it easier to trigger on touch devices where scrolling patterns differ
• Desktop devices: Higher threshold (400px) reduces false positives from mouse wheel scrolling
• Automatic detection: The library automatically detects device type based on screen width
• Backward compatibility: Existing code using number values continues to work

Exit Intent Reasons

The custom event's detail property will be one of:

• 'timeOnPage' — Time on page exceeded
• 'idleTime' — User idle for too long
• 'mouseLeave' — Mouse left window
• 'tabChange' — Tab/document became hidden
• 'windowBlur' — Window lost focus
• 'scrollUp' — User scrolled up quickly

Examples

1. Basic usage (vanilla JS)

observeExitIntent({
  timeOnPage: 5000,
  idleTime: 3000,
  mouseLeaveDelay: 500,
  tabChange: true,
  windowBlur: true,
  scrollUpThreshold: {
    mobile: 200,   // 200px threshold for mobile devices
    desktop: 400   // 400px threshold for desktop devices
  },
  mobileBreakpoint: 768,
  scrollUpInterval: 50,
  eventName: 'exit-intent',
  debug: true
});

window.addEventListener('exit-intent', e => {
  alert('Exit intent detected! Reason: ' + e.detail);
});

2. Triggering a Postscript Popup on exit-intent

If you use Postscript for SMS pop-ups, you can open a popup only when exit intent is detected. A full working page lives in examples/postscript.html.

Cleanup

The function returns an object with a destroy method to remove all listeners and timers:

const { destroy } = observeExitIntent();
// ...
destroy();

License

MIT