Image Mode

In image mode, the popup is a single clickable image. The whole image runs your action callback when clicked. Use it for promotional banners, coupon graphics, or any offer that does not need a custom layout.

Basic Image Popup

next.exitIntent({
  image: 'https://example.com/save-10-percent.webp',
  action: async () => {
    await next.applyCoupon('SAVE10');
  },
});

The image is centered on a dark overlay. Clicking the image runs the action and closes the popup. Clicking the overlay closes the popup without running the action (exit-intent:dismissed fires).

With a Separate Action Button

To show a CTA button below the image instead of making the image itself clickable:

next.exitIntent({
  image: 'https://example.com/promo.webp',
  imageClickable: false,
  actionButtonText: 'Apply 10% Discount',
  action: () => next.applyCoupon('SAVE10'),
});

When actionButtonText is set, the image is not interactive — only the button runs the action.

Redirect Instead of Coupon

The action can do anything, including a navigation:

next.exitIntent({
  image: 'https://example.com/special-offer.webp',
  action: () => {
    window.location.href = '/special-offer';
  },
});

Conditional Popup by Cart Value

Use next.getCartCount() or next.getCartData() to choose the popup at runtime:

window.addEventListener('next:initialized', () => {
  const cartCount = next.getCartCount();

  if (cartCount === 0) {
    next.exitIntent({
      image: '/images/empty-cart-bestsellers.jpg',
      action: () => (window.location.href = '/products'),
    });
  } else {
    next.exitIntent({
      image: '/images/save-10-percent.jpg',
      action: () => next.applyCoupon('SAVE10'),
    });
  }
});

Trigger Limits

By default the popup shows once per session (maxTriggers: 1). Increase it if you want the popup to appear multiple times before being permanently dismissed:

next.exitIntent({
  image: '/popup.jpg',
  maxTriggers: 3,
  // 30 second cooldown between triggers is built-in
});

There is a built-in 30-second cooldown between triggers — moving the mouse out twice in quick succession will only fire the popup once.

Mobile Behavior

next.exitIntent({
  image: '/popup.jpg',
  disableOnMobile: false,    // enable on mobile (default: true)
  mobileScrollTrigger: true, // fire when the visitor scrolls past 50%
});

On mobile devices, the trigger is scroll-based (not mouse-based). When the user scrolls past 50% of document.body.scrollHeight, the popup fires once.

The "mobile" check combines touch capability, viewport width (< 768px), and the user agent string.

Styling the Image Popup

The popup is rendered into document.body with built-in inline styles. Override them with !important if needed:

[data-exit-intent="overlay"] {
  background: rgba(0, 0, 0, 0.85) !important;
}

[data-exit-intent="popup"] img {
  max-width: 90vw !important;
  max-height: 80vh !important;
  border-radius: 8px;
}

Next Steps

• Custom HTML modals: Template Mode
• All options in one table: Reference → API
• Listen for impression and click events: Reference → Events