Growth & Conversion
Demo Booking Card
An inline day-and-time picker for booking a demo call, showing every slot in the visitor's own detected timezone so nobody has to do the conversion math themselves. Submits the chosen slot to any scheduling backend and ends in a confirmed state.
$ velocityx add demo-booking-card
Built for react.
Needs react already installed
as a peer dependency.
An Astro-only project needs @astrojs/react wired up first — this won't run on its own in plain Astro.
Full docs for Demo Booking Card →
Needs a licence key —
subscribe here, then
velocityx loginonce.
Book a 30-minute demo
Pick a time that works for you — we'll send a calendar invite right away.
Times shown in UTC
30 min call
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| headline | string | No | 'Book a 30-minute demo' | |
| subhead | string | No | "Pick a time that works for you — we'll send a calendar invite right away." | |
| daysAhead | number | No | 5 | |
| slotTimes | string[] | No | ['09:00', '11:00', '13:30', '15:30'] | |
| durationMinutes | number | No | 30 | |
| bookedSlots | string[] | No | [] | |
| onSubmit | (slot: { startIso: string; timeZone: string }) => Promise<void> | void | No | ||
| ctaLabel | string | No | 'Confirm booking' | |
| confirmedHeadline | string | No | "You're booked." | |
| confirmedBody | (slot: Date) => string | No | (slot) => `We'll send a calendar invite for ${slot.toLocaleString(undefined, { weekday: 'long', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit', })}.` | |
| className | string | No | '' |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/demo-booking-card/DemoBookingCard.tsxUsing the Demo Booking Card component
Install it with velocityx add demo-booking-card.
The CLI writes the source straight into your project — no runtime dependency, no registry
lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.
Related components
More from Growth & Conversion.
A persistent top-docked bar that resurfaces a cart left behind on any route, showing item count and total with Resume and Clear actions — a cross-page return nudge, not a cart panel.
reactA bottom-docked banner that nudges mobile visitors to open or install the native app, with iOS/Android-aware copy and store links, and a dismissal that snoozes for two weeks instead of forever.
reactAn inline deadline banner for a sale or launch window that counts down and then degrades gracefully to a plain closing message the instant it ends — never a broken negative-time state. Dismissible and remembered for the session.
reactA claim-to-reveal discount code card with one-tap copy and an expiry note, so the offer reads as earned rather than just printed on the page.
react