# Exit Intent (Modal Pattern)

> Exit-intent popup for last-chance offers and lead capture. This is the Modal island with trigger set to "exit_intent".

Canonical URL: https://fa7e86e3d553:3005/islands/engagement/exit-intent

> This is **not a separate island**. Exit Intent is the [Modal](/islands/engagement/modal) island with `trigger: "exit_intent"`. See [Modal docs](/islands/engagement/modal) for the full prop reference.

Exit-intent popup triggered on mouse leave (desktop) or back-button (mobile). Use for last-chance offers.

**Category**: Engagement

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| trigger | enum | no | exit_intent | Trigger type (part of Modal island, defaults to exit_intent for this use case) |
| headline | string | no | - | Popup headline |
| body | string | no | - | Popup body text |
| image | string | no | - | Optional background/hero image |
| triggerLabel | string | no | - | If using click trigger, button label |
| showOnce | boolean | no | true | Show only once per session (uses localStorage) |
| storageKey | string | no | "_lx_modal" | localStorage key for tracking shown state |
| closable | boolean | no | true | Allow user to close popup |

## Embed Example

```html
<lx-island name="Modal">
  <script type="application/json">
{}
  </script>
</lx-island>
```

## Usage Patterns

Place in a **hidden section** (once per page):

```html
<lx-island name="Modal">
  <script type="application/json">
{}
  </script>
</lx-island>
```

**With embedded EmailCapture form:**

The `children` prop allows nesting islands inside the modal — use for lead capture.

## Tips

- **This is actually the Modal island with trigger:"exit_intent"** — see Modal docs for full props
- Desktop: triggers when mouse leaves viewport toward browser chrome
- Mobile: triggers on back-button press (iOS/Android)
- showOnce:true stores in localStorage (respects user dismissal)
- Don't combine with SocialProofPopup on mobile (visual conflict)
- Keep headline short and urgent: "Wait!", "Before you go...", "One last thing..."
- Test carefully — aggressive exit-intent hurts brand perception

## Stylable Parts

Target internal elements via `data-part` selectors in section CSS:

| Part | Description |
|------|-------------|
| `backdrop` | Modal/drawer backdrop overlay |
| `root` | Outermost container |

```css
/* Example: custom styling */
[data-section-id='SECTION'] [data-part='root'] {
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
```

## Related Islands

- [EmailCapture](/islands/engagement/email-capture) — Nest inside exit-intent for lead capture
- [CountdownTimer](/islands/content/countdown-timer) — Add urgency: "Offer expires in..."
- [SocialProofPopup](/islands/social-proof/social-proof-popup) — Avoid using both on mobile simultaneously