Lead-Capture Popup

A tasteful exit-intent lead popup that captures bouncing visitors into your remarketing list and fronts the Draft-my-Velocity offer. Once-per-session, cooldown-aware, accessible, dark-mode.

src/components/growth/LeadCapturePopup.tsx · live demo: /components/lead-capture-popup

Get this component

Ships with any Velocity package. Select free components are also distributed via the public components repo (copy-and-own, no install):

# (planned) grab just this component into your project
npx degit aidenwood/velocity-components/lead-capture-popup src/components/growth

Usage

Mount once at the app shell so it persists across navigations:

---
import LeadCapturePopup from '../components/growth/LeadCapturePopup.tsx';
---
<LeadCapturePopup client:idle />

Props

Prop	Type	Default	Description
`enabled`	`boolean`	`true`	Master switch.
`scrollDepth`	`number`	`0.55`	Scroll fraction (0–1) that triggers the popup as a fallback.
`maxDelayMs`	`number`	`45000`	Max time on page before it surfaces regardless of intent.
`cooldownDays`	`number`	`14`	Don’t re-show for this many days after a dismissal.
`excludePaths`	`string[]`	checkout/contact/…	Path prefixes where it never appears.
`endpoint`	`string`	`/.netlify/functions/home-lead`	Where the lead is POSTed (JSON).
`eyebrow` `headline` `subhead` `cta` `decline`	`string`	—	Copy overrides.

Behaviour

Triggers (first to fire, cooldown permitting): desktop exit-intent (cursor leaves the top of the viewport); mobile scroll-up after engagement (no exit-intent on touch); scroll-depth + max-time fallback on both.
Manual / click-trigger: any element can open it — window.dispatchEvent(new Event('velocity:lead-popup:open')) (bypasses the cooldown, so deliberate clicks always open).
Frequency: once per session (sessionStorage); remembers dismissal for cooldownDays and never re-shows once converted (localStorage key velocity.leadpopup.v1).

Events

Fires lead_popup_shown on reveal and trackLead() on submit (→ lead_captured + GA4 generate_lead + Meta Lead). See Analytics Layer.

Accessibility

role="dialog" + aria-modal, focus trap, Esc / click-outside / visible close / “no thanks” to dismiss, focus restored on close. Bottom-sheet on mobile, centered card on desktop (never full-screen). Reduced-motion aware.