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.

Tags: webinar event registration countdown form calendar speakers agenda
Dependencies: motion(npm, opens in a new tab)lucide-react(npm, opens in a new tab)

Props

Other props pass through to the root element.

title
string
Default "Close the books in three days, not ten"
description
React.ReactNode
Default "A 45-minute working session on running month-end close con…
start
string
Default "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
Default 45
status
WebinarStatus
Forces a state. Otherwise it follows the clock: upcoming, live during the slot, then replay.
agenda
WebinarAgendaItem[]
Default DEFAULT_AGENDA
speakers
WebinarSpeaker[]
Default DEFAULT_SPEAKERS
registered
number
Default 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
Default "#"
Where the replay plays, linked once the form is sent in the replay state.
joinHref
string
Default "#"
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

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	–