Template Attributes

Attributes recognized inside template-mode popups (<template data-template="...">).

On the `<template>` Element

Attribute	Description
`data-template="<name>"`	Identifier the SDK uses to find this template. Pass the same name to `next.exitIntent({ template: '<name>' })`

<template data-template="exit-intent">
  <!-- modal content -->
</template>

The SDK looks up the template with document.querySelector('template[data-template="<name>"]'). If the element is not found, the popup never displays and an error is logged.

On Action Buttons

Add data-exit-intent-action to any element inside the template. The SDK wires up clicks on the cloned content automatically.

Attribute value	Effect	Required companion attribute
`close`	Closes the modal. Emits `exit-intent:closed`	—
`apply-coupon`	Applies the coupon to the cart and closes the modal. Emits `exit-intent:action` with `{ action: 'apply-coupon', couponCode }`	`data-coupon-code="<CODE>"`
`custom`	Runs the `action` callback passed to `next.exitIntent({...})`. Emits `exit-intent:action` with `{ action: 'custom' }`	—

The action callback you pass to next.exitIntent() only runs when a button with data-exit-intent-action="custom" is clicked. Plain content (text, divs without the attribute) does not trigger it.

Coupon button

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

Custom callback button

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

next.exitIntent({
  template: 'my-template',
  action: () => (window.location.href = '/offer'),
});

Close button

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

The X button rendered by showCloseButton: true does the same thing — you can use either or both.

Display Bindings Inside the Template

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

<template data-template="exit-intent">
  <div data-next-show="cart.hasItems">
    Items in your cart: <span data-next-display="cart.quantity">0</span>
    Total: <span data-next-display="cart.total">$0</span>
  </div>

  <div data-next-hide="cart.hasItems">
    Browse our bestsellers!
  </div>
</template>

For the full list of display bindings, see Data Attributes → Display.

The SDK wraps your template in two elements with these data- attributes. Use them as CSS hooks if you want to override the built-in styling.

Attribute	On	Description
`data-exit-intent="overlay"`	The dimmed background `<div>`	Fullscreen, dark, intercepts clicks for `overlayClosable`
`data-exit-intent="popup"`	The modal `<div>`	Holds your cloned template content. Has class `exit-intent-template-popup`
`data-exit-intent="close"`	The X button	Only present when `showCloseButton: true`

On the <template> Element