# Webinar Registration

> Webinar or live-event sign-up section. The date and time show in the visitor's own time zone, beside a live countdown that turns into Live now or Replay available, an agenda and speakers. The registration card validates a work email, holds a pending state, then offers Google Calendar, an .ics download and a share link. After the event it gates the replay instead.

- Slug: `webinar-registration`
- Category: [Calls to action](https://www.assembli.design/category/calls-to-action.md)
- Type: block
- Tags: webinar, event, registration, countdown, form, calendar, speakers, agenda
- npm dependencies: motion, lucide-react
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/webinar-registration
- Page: https://www.assembli.design/components/webinar-registration

![Webinar Registration preview](https://www.assembli.design/thumbnails/webinar-registration-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` | `"Close the books in three days, not ten"` |  |
| `description` | `React.ReactNode` | `"A 45-minute working session on running month-end close con…` |  |
| `start` | `string` | `"2026-11-19T16:00:00Z"` | ISO start time, e.g. "2026-11-19T16:00:00Z". Shown in the visitor's own time zone. |
| `durationMinutes` | `number` | `45` |  |
| `status` | `WebinarStatus` |  | Forces a state. Otherwise it follows the clock: upcoming, live during the slot, then replay. |
| `agenda` | `WebinarAgendaItem[]` | `DEFAULT_AGENDA` |  |
| `speakers` | `WebinarSpeaker[]` | `DEFAULT_SPEAKERS` |  |
| `registered` | `number` | `1284` | People registered so far. Goes up by one when the visitor registers. |
| `onRegister` | `(data: WebinarRegistrationData) => void \| Promise<void>` |  | Called with the form data. Return a promise to hold the pending state; reject it to show an error. |
| `replayHref` | `string` | `"#"` | Where the replay plays, linked once the form is sent in the replay state. |
| `joinHref` | `string` | `"#"` | The stream link, offered once someone registers while the event is live. |
| `shareUrl` | `string` |  | The link "Copy link" copies. Defaults to the current page. |
| `consentLabel` | `React.ReactNode` |  |  |

## 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/webinar-registration/webinar-registration.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/webinar-registration
```

Registry item JSON: https://www.assembli.design/r/webinar-registration.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.