Template Mode

Template mode lets you build the popup with your own HTML. Define a <template> in the page, point next.exitIntent({ template }) at it, and the SDK clones the template into a modal when the trigger fires.

Use template mode when you need multiple buttons, dynamic content, or any layout more complex than a single image.

Basic Template

<template data-template="exit-intent">
  <div class="exit-modal">
    <h2>Wait! Don't Leave Yet!</h2>
    <p>Get 20% off your order.</p>

    <button data-exit-intent-action="apply-coupon" data-coupon-code="SAVE20">
      Apply 20% Discount
    </button>

    <button data-exit-intent-action="close">No thanks</button>
  </div>
</template>

<script>
  window.addEventListener('next:initialized', () => {
    next.exitIntent({
      template: 'exit-intent',
      showCloseButton: true,
    });
  });
</script>

The template option matches the data-template attribute on the <template> element. When the popup fires, the SDK clones the template content and inserts it into a modal.

Action Buttons

Add data-exit-intent-action to any element inside the template. The SDK wires up clicks automatically — you do not need to write JavaScript handlers.

Attribute	Behavior
`data-exit-intent-action="close"`	Closes the modal. Emits `exit-intent:closed`.
`data-exit-intent-action="apply-coupon"` (needs `data-coupon-code`)	Applies the coupon to the cart and closes the modal
`data-exit-intent-action="custom"`	Runs the `action` callback passed to `next.exitIntent({...})`, then closes the modal

The action callback is only triggered by data-exit-intent-action="custom" — not by clicks on regular template content. If you forget the attribute, your callback never runs.

Multiple Coupon Options

<template data-template="exit-intent-multi">
  <div class="exit-offers">
    <h2>Choose your discount</h2>

    <div class="offer-grid">
      <button data-exit-intent-action="apply-coupon" data-coupon-code="SAVE10">
        10% off
      </button>
      <button data-exit-intent-action="apply-coupon" data-coupon-code="FREESHIP">
        Free shipping
      </button>
      <button data-exit-intent-action="apply-coupon" data-coupon-code="FIVER">
        $5 off
      </button>
    </div>

    <button data-exit-intent-action="close" class="dismiss">
      I don't want to save money
    </button>
  </div>
</template>

<script>
  next.exitIntent({ template: 'exit-intent-multi' });
</script>

Each button applies a different coupon and closes the modal. No callbacks needed.

Combined: Action Button + Coupon Buttons

Mix coupon buttons with a custom action in the same template:

<template data-template="exit-intent">
  <div class="exit-modal">
    <h2>Last chance — pick one</h2>

    <button data-exit-intent-action="apply-coupon" data-coupon-code="SAVE10">
      Apply 10% off
    </button>

    <button data-exit-intent-action="custom">
      Show me a different offer
    </button>

    <button data-exit-intent-action="close">No thanks</button>
  </div>
</template>

<script>
  next.exitIntent({
    template: 'exit-intent',
    action: () => {
      // Only runs when the "custom" button is clicked
      window.location.href = '/special-offer';
    },
  });
</script>

Live Cart Data in the Template

data-next-display, data-next-show, and data-next-hide work inside templates because the SDK scans cloned content after insertion.

<template data-template="exit-intent">
  <div class="exit-modal">
    <h2>Wait!</h2>

    <div data-next-show="cart.hasItems">
      <p>You have <strong data-next-display="cart.quantity">0</strong> items worth
         <strong data-next-display="cart.total">$0</strong>.</p>
      <p>Apply 10% off your entire order now.</p>

      <button data-exit-intent-action="apply-coupon" data-coupon-code="SAVE10">
        Apply 10% off
      </button>
    </div>

    <div data-next-hide="cart.hasItems">
      <p>Browse our bestsellers before you go.</p>

      <button data-exit-intent-action="custom">View bestsellers</button>
    </div>

    <button data-exit-intent-action="close">Close</button>
  </div>
</template>

Display values are evaluated from the current cart state when the popup is rendered, and update live if the cart changes while the popup is open.

next.exitIntent({
  template: 'exit-intent',
  showCloseButton: true,    // show an X button in the top corner
  overlayClosable: true,    // clicking the overlay closes the modal (default: true)
  maxTriggers: 1,           // only show once (default)
  disableOnMobile: false,   // enable on mobile
  mobileScrollTrigger: true, // fire when scrolling past 50% on mobile
});

Option	Default	Description
`showCloseButton`	`false`	Render an X button in the top-right of the modal
`overlayClosable`	`true`	Allow the visitor to close by clicking the dimmed overlay
`maxTriggers`	`1`	Total number of times the popup may fire in the session

The modal wrapper has the class exit-intent-template-popup. Style your own template content with whatever class structure you put in the template.

.exit-intent-template-popup {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  max-width: 480px;
}

.exit-modal h2 {
  margin: 0 0 12px;
}

.exit-modal button {
  margin: 8px 4px;
  padding: 12px 24px;
  border-radius: 6px;
}

Next Steps

All template attributes: Reference → Attributes
All options: Reference → API
Listen for clicks and dismissals: Reference → Events

On this page