Exit-Intent Offer Bar

A last-chance discount bar that drops in from the top the moment a visitor looks ready to leave — exit-intent on desktop, fast scroll-up on mobile. Shows once per session with a cooldown, so it never nags a returning visitor.

Growth & Conversion · React · Subscription · commercial licence · v1.0.1 · updated 2026-10-15 · Live demo

Install

velocityx add exit-intent-offer-bar

Subscription component. Run velocityx login with your key first — get one.

---
import ExitIntentOfferBar from '../components/velocity/exit-intent-offer-bar/ExitIntentOfferBar.tsx';
---
<ExitIntentOfferBar client:visible />

Props

Prop	Type	Default	Description
enabled	boolean	true	Master switch.
cooldownDays	number	7	Don’t re-show for this many days after a dismissal.
excludePaths	string[]	['/checkout', '/dashboard', '/components']	Path prefixes where the bar must never appear.
eyebrow	string	'Before you go'	Copy.
message	string	'Take 10% off your first order.'	—
code	string	'WELCOME10'	—
cta	string	'Claim offer'	—
href	string	'/pricing'	—
onDismiss	() => void	—	Called when the visitor dismisses the bar.
onClaim	() => void	—	Called when the visitor clicks the CTA.

Files written

velocityx drops these into your project:

• components/velocity/exit-intent-offer-bar/ExitIntentOfferBar.tsx

Peer dependencies

react — nothing else. Zero external dependencies is the point.

Theming

Colours come from the primary-* / accent-* Tailwind scales, so this drops into a project that is not Velocity without dragging our brand in. Install the contract once:

velocityx theme

Then set your whole brand in one place — raw RGB channels, not hex (a hex here silently breaks every opacity variant):

:root {
  --vx-brand: custom;
  --vx-primary-600: 220 38 38;
}

There is no component-level font-family anywhere in the library — your font cascade wins.

Licence

Commercial, for the duration of an active Velocity X subscription. The source is served by the licence-gated endpoint, never by the public CDN.