How to build exit-intent popups that work on both mobile and desktop

Exit-intent overlays are a common way to capture attention before a visitor leaves a website, but most implementations fail on mobile because they depend on desktop-only signals like cursor movement. With over half of web traffic now coming from touch devices, ignoring this audience means missing a critical opportunity to re-engage users. The solution isn’t to abandon exit intent entirely, but to adapt it to work across all devices by recognizing the unique signals each platform provides.

Why traditional exit-intent popups miss mobile users

The most widely used exit-intent snippets are built around a mouse-based trigger: when the cursor moves beyond the top edge of the viewport, the system assumes the user intends to leave and displays an overlay. This approach works flawlessly on desktops and laptops, where a physical pointer exists. However, on mobile and tablet devices, there is no cursor to track, leaving this trigger completely ineffective.

Websites often go live with this standard snippet without realizing it’s silent on a significant portion of their audience. Developers typically test exit-intent behavior on desktop browsers, where they see the popup appear as expected. Without cross-device testing, the lack of mobile engagement goes unnoticed—until analytics reveal poor performance. This oversight means that a large segment of visitors never receives the intended experience, defeating the purpose of the feature.

Adapting exit intent for touch and hybrid devices

To make exit intent functional on all devices, the detection logic must be rewritten to respond to signals that exist on each platform. On desktop, the cursor’s path toward the browser frame remains a reliable indicator. On touch devices, however, intent must be inferred from user behavior. This includes rapid upward scrolls toward the address bar or prolonged periods of inactivity, both of which can signal a user’s decision to leave.

A unified helper function can consolidate these signals into a single detection mechanism. This function detects intent based on the user’s platform and triggers only once per session to avoid overwhelming visitors. Thresholds are adjusted to account for the less precise nature of touch-based signals, ensuring accuracy without false positives.

function exitIntent(callback, { sensitivity = 20, // px from top edge to trigger on desktop
                                  mobileScrollDelta = 60, // required upward scroll in px to trigger on mobile
                                  idle = 0, // inactivity time in ms before triggering (0 = disabled)
                                  once = true } = {}) {
  let fired = false;
  let lastY = window.scrollY;
  let idleTimer;

  function teardown() {
    document.removeEventListener("mouseout", onMouseOut);
    window.removeEventListener("scroll", onScroll);
    clearTimeout(idleTimer);
  }

  const trigger = () => {
    if (fired) return;
    if (once) fired = true;
    teardown();
    callback();
  };

  const onMouseOut = (e) => {
    if (!e.relatedTarget && e.clientY <= sensitivity) trigger();
  };

  const resetIdle = () => {
    clearTimeout(idleTimer);
    idleTimer = setTimeout(trigger, idle);
  };

  const onScroll = () => {
    const y = window.scrollY;
    if (lastY - y > mobileScrollDelta) trigger(); // upward flick detected
    lastY = y;
    if (idle) resetIdle();
  };

  document.addEventListener("mouseout", onMouseOut);
  window.addEventListener("scroll", onScroll, { passive: true });
  if (idle) resetIdle();
  return teardown;
}

This implementation, available in the ab-test-helpers library, combines desktop and mobile signals into a single, responsive detector. It ensures that exit intent works regardless of the device, making the feature truly universal.

Preventing popup fatigue with session-based limits

Showing an exit-intent overlay multiple times per visit can frustrate users and drive them away faster than if the popup had never appeared. To maintain a positive user experience, the system should fire only once per session and respect any explicit dismissals.

A simple session-based limiter can enforce this behavior by storing a timestamp in the browser’s localStorage. This prevents the same user from being prompted repeatedly over a defined period, such as 14 days. If a visitor dismisses the overlay, their preference is remembered, and they won’t be asked again during the specified window.

function allowOncePerDays(key, days = 7) {
  const name = `fc_${key}`;
  try {
    const until = Number(localStorage.getItem(name) || 0);
    if (Date.now() < until) return false;
    localStorage.setItem(name, String(Date.now() + days * 864e5));
    return true;
  } catch (e) {
    return true; // Graceful fallback if storage is blocked
  }
}

exitIntent(() => {
  if (sessionStorage.getItem("exit_dismissed") === "1") return;
  if (!allowOncePerDays("exit_offer", 14)) return;
  showOverlay();
}, { idle: 20000 });

This approach balances engagement with user respect, ensuring that popups serve as a helpful tool rather than an annoyance.

Building accessible overlays for all users

Exit-intent modals are dialogs, and like all dialogs, they must be accessible to users who rely on keyboards, screen readers, or assistive technologies. A poorly implemented overlay can trap users, prevent navigation, or create confusion.

Key accessibility features include:

• Focus trapping: Preventing keyboard users from tabbing outside the modal.
• Escape key support: Allowing users to close the modal with the Escape key.
• ARIA roles: Properly labeling the dialog and its state for screen readers.
• Return focus: Restoring focus to the element that triggered the modal after it closes.

Skipping these steps can turn a helpful overlay into a barrier, especially for users with disabilities. Accessibility should never be an afterthought—it must be built into the core functionality from the start.

Measuring intent, not just impressions

Tracking the success of exit-intent overlays requires more than counting how many times the modal appears. To truly understand user behavior, analytics should log when intent is detected separately from whether the overlay was shown. This allows teams to measure the raw signal of intent across all users, including those who never see the popup due to session limits or dismissals.

By separating intent detection from popup rendering, you gain a clearer picture of how often users truly intend to leave and how your variation impacts their behavior. This data-driven approach ensures that decisions are based on accurate insights rather than assumption.

The bottom line: build once, work everywhere

Exit intent isn’t a one-size-fits-all solution—it’s a multi-signal strategy that must adapt to the device and user behavior. By combining desktop and mobile triggers, enforcing session limits, ensuring accessibility, and measuring intent separately, developers can create overlays that work for everyone, not just a subset of visitors. Implementing these best practices turns a common conversion tool into a reliable, user-friendly feature that supports engagement without sacrificing experience.