Social-Proof Toast

Bottom-left toast that rotates short, credible social-proof lines on an interval then stops. Pauses on hover, dismisses for the session, aria-live and safe-area aware.

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

Install

velocityx add social-proof-toast

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

---
import SocialProofToast from '../components/velocity/social-proof-toast/SocialProofToast.tsx';
---
<SocialProofToast client:visible />

A small, credible social-proof toast that rotates short lines on an interval — marketing psychology done with restraint, the opposite of spammy fake “someone just bought!!” urgency.

src/components/growth/SocialProofToast.tsx · live demo: /components/social-proof-toast

Usage

---
import SocialProofToast from '../components/growth/SocialProofToast.tsx';
---
<SocialProofToast
  client:idle
  messages={[
    'Built one-on-one by Aiden Wood — 15 years full-stack.',
    'Trusted by trades, clinics, realty and hospitality.',
  ]}
/>

Props

Prop	Type	Default	Description
enabled	boolean	true	Master switch.
messages	string[]	—	Lines to rotate through.
startDelayMs	number	6000	Delay before the first toast.
intervalMs	number	8000	Window each message shows for.
maxShows	number	4	Stop after this many rotations.
excludePaths	string[]	checkout/contact/…	Path prefixes to suppress on.
forceVisible	boolean	false	Showcase/demo only — skip delay + gating.

Behaviour

Slides in bottom-left after startDelayMs, rotates through messages, stops after maxShows. Pauses while hovered/focused or the tab is hidden so a message never vanishes mid-read. Dismissible (session-remembered, velocity.socialproof.dismissed). Skips excludePaths.

Events

Fires social_proof_shown with { message, index, show_number } on each reveal.

Accessibility & copy rule

role="status" + aria-live="polite" (no focus trap), visible dismiss, dark-mode + safe-area aware. Copy rule: keep lines short, true, and on the premium voice — never invent fake purchases or real-time names.

Files written

velocityx drops these into your project:

• components/velocity/social-proof-toast/SocialProofToast.tsx
• components/lib/analytics.ts
• components/lib/consent.ts

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.