# Book 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.

- Slug: `book-demo`
- Category: [Contact](https://www.assembli.design/category/contact.md)
- Type: block
- Tags: demo, booking, scheduler, calendar, time-slots, lead-form, sales, b2b
- npm dependencies: @base-ui/react, lucide-react
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/book-demo
- Page: https://www.assembli.design/components/book-demo

![Book a Demo preview](https://www.assembli.design/thumbnails/book-demo-light.png)

## Props

Other props pass through to the root element.

| 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. |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/book-demo/book-demo.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/book-demo
```

Registry item JSON: https://www.assembli.design/r/book-demo.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.