Contact Split
Contact
Source and install need .
pnpm dlx shadcn@latest add @assembli/book-demoBook a Demo
B2B demo booking section. The pitch, what the call covers, the rep you'll meet and a quote sit beside a two-step card: a short form (work email check, company size, optional notes), then a month calendar with arrow-key navigation and the day's times in the visitor's time zone. Confirming shows the booked time, an Add to calendar .ics download and a reschedule link.
Props
Other props pass through to the root element.
eyebrow
React.ReactNode
Default
"Book a demo"title
React.ReactNode
Default
"See it on your own work"intro
React.ReactNode
Default
"A 30-minute call with someone who knows the product inside…points
BookDemoPoint[]
Default
DEFAULT_POINTSWhat the visitor gets from the call. Three reads best.
rep
BookDemoRep
Default
{ name: "Jordan Ellis", role: "Solutions engineer" }proof
BookDemoProof
availability
(date: Date) => string[]
Default
defaultAvailabilitySlot start times offered on a day: "HH:mm" in the visitor's local time, or full ISO timestamps. Days that return none are disabled. The default offers weekday slots between 9:00 and 16:30.
sizes
string[]
Default
DEFAULT_SIZESCompany size choices for the qualification step.
duration
number
Default
30Meeting length in minutes.
daysAhead
number
Default
45How far ahead the calendar goes, in days.
minNotice
number
Default
120Slots closer than this many minutes from now are hidden.
requireWorkEmail
boolean
Default
trueTurn away gmail.com, outlook.com and other personal addresses.
weekStartsOn
0 | 1
Default
00 for Sunday, 1 for Monday.
locale
string
Default
"en-US"meeting
{ title?: string; location?: string; description?: string }
Used for the calendar file. Defaults to "Demo with {rep}".
onBook
(booking: BookDemoBooking) => void | Promise<void>
Called on confirm. Throw (or reject) to show an error; resolve to show the confirmation.
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | React.ReactNode | "Book a demo" | |
| title | React.ReactNode | "See it on your own work" | |
| intro | React.ReactNode | "A 30-minute call with someone who knows the product inside… | |
| points | BookDemoPoint[] | DEFAULT_POINTS | What the visitor gets from the call. Three reads best. |
| rep | BookDemoRep | { name: "Jordan Ellis", role: "Solutions engineer" } | |
| proof | BookDemoProof | – | |
| availability | (date: Date) => string[] | defaultAvailability | Slot start times offered on a day: "HH:mm" in the visitor's local time, or full ISO timestamps. Days that return none are disabled. The default offers weekday slots between 9:00 and 16:30. |
| sizes | string[] | DEFAULT_SIZES | Company size choices for the qualification step. |
| duration | number | 30 | Meeting length in minutes. |
| daysAhead | number | 45 | How far ahead the calendar goes, in days. |
| minNotice | number | 120 | Slots closer than this many minutes from now are hidden. |
| requireWorkEmail | boolean | true | Turn away gmail.com, outlook.com and other personal addresses. |
| weekStartsOn | 0 | 1 | 0 | 0 for Sunday, 1 for Monday. |
| locale | string | "en-US" | |
| meeting | { title?: string; location?: string; description?: string } | – | Used for the calendar file. Defaults to "Demo with {rep}". |
| onBook | (booking: BookDemoBooking) => void | Promise<void> | – | Called on confirm. Throw (or reject) to show an error; resolve to show the confirmation. |
Related
Block
Support Hub
Contact