Booking Widget
Embeddable booking & reservation widget for any website. Renders a Calendly-style booking flow that connects to your Periscale calendar, services, and availability.
The widget ships as an npm package (@periscaleai/booking-widget) with two top-level flavors and a set of building blocks:
BookingWidget— generic Calendly-style flow. Date → Time → Details → Confirm. Use this for consultations, classes, services, haircuts — any single-attendee appointment.RestaurantBookingWidget— restaurant flow with party size + table picker. Date → Time → Party → Table → Details → Confirm.- Building blocks —
CalendarPicker,TimeSlotGrid,StepIndicator,TabBar, etc. for verticals that don't fit either flavor.
What you get
- Real-time slot availability driven by your booking config + per-day overrides
- Automatic confirmation emails (with vertical-specific details where relevant — e.g. party size & table for restaurants)
- Phone-number-based "My bookings" lookup so guests can view and cancel without an account
- Cancellation policy enforcement (configurable per business)
- Theming via Tailwind utility classes
- TypeScript-first — both ESM and CJS bundles, full
.d.ts
Authentication
Same sb_live_* API key as the chat widget. The widget appends ?api_key=… on every request to the Periscale booking API; the backend resolves the business that owns the key.
Bundle size
| Entry | ESM | CJS |
|---|---|---|
@periscaleai/booking-widget (generic) | ~38 kB | ~52 kB |
@periscaleai/booking-widget/restaurant | ~48 kB | ~52 kB |
@periscaleai/booking-widget/blocks | ~30 kB | ~35 kB |
(Pre-gzip. React and lucide-react are peer dependencies, not bundled.)
Next steps
- Quick Start — get a booking flow live in under a minute
- Restaurant flavor — party size & table-picker steps
- Configuration — every prop on every widget
- Building blocks — compose your own industry flow
- JavaScript API — programmatic clients for non-React or server-side use