exit-intent-js

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

Option	Type	Default	Description
timeOnPage	number	15000	Time (ms) spent on page before triggering exit intent. 0 disables.
idleTime	number	8000	Time (ms) idle (no interaction) before triggering. 0 disables.
mouseLeaveDelay	number	1000	Delay (ms) after mouse leaves window before triggering. 0 disables.
tabChange	boolean	true	Trigger when tab/document becomes hidden.
windowBlur	boolean	true	Trigger when window loses focus (user switches tabs/apps or minimizes).
eventName	string	'exit-intent'	Name of the custom event dispatched on window.
debug	boolean	false	Enable debug logging to console.
pageViewsToTrigger	number	0	Fire the exit-intent event immediately once the stored page-view counter reaches this threshold. 0 disables the feature.
scrollUpThreshold	number|object	{mobile: 200, desktop: 400}	Minimum pixels scrolled up to trigger exit intent. Can be a number (legacy) or object with mobile and desktop properties for responsive thresholds.
mobileBreakpoint	number	768	Screen width threshold (px) for mobile detection. Used with responsive scrollUpThreshold.
scrollUpInterval	number	100	Interval (ms) to check scroll position for upward movement.

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