Native React components for embedding Onbookr booking calendars. Fully typed with TypeScript and designed for both App Router and Pages Router in Next.js.
pnpm add @onbookr/reactRenders the booking calendar inline with auto-resizing. The iframe automatically adjusts height to match the booking flow content.
1'use client'2 3import { OnbookrEmbed } from '@onbookr/react'4 5export default function BookingPage() {6 return (7 <div className="mx-auto max-w-lg py-12">8 <h1 className="text-2xl font-bold mb-6">Book a Session</h1>9 <OnbookrEmbed10 username="janedoe"11 theme="light"12 onReady={() => console.log('Widget loaded')}13 onBookingSuccess={(data) => {14 console.log('Booked with:', data.username)15 }}16 />17 </div>18 )19}| Prop | Type | Default | Description |
|---|---|---|---|
| username* | string | — | The Onbookr username of the host. |
| baseUrl | string | "https://onbookr.com" | Base URL of the Onbookr instance (for self-hosted setups). |
| theme | "light" | "dark" | "auto" | "auto" | Widget color theme. |
| accentColor | string | — | Custom accent color (any valid CSS color value). |
| hideHeader | boolean | false | Hide the host name header. |
| hideBranding | boolean | false | Hide "Powered by Onbookr" branding. |
| onReady | () => void | — | Callback fired when the widget finishes loading. |
| onBookingSuccess | (data: {username}) => void | — | Callback fired when a booking is successfully completed. |
| onStepChange | (data: {step}) => void | — | Callback fired when the booking step changes. |
| onError | (data: {code, message}) => void | — | Callback fired when an error occurs (e.g., checkout failure, availability load failure). |
| width | string | number | "100%" | Width of the widget. |
| minHeight | string | number | "500px" | Minimum height (auto-resizes to content). |
| className | string | — | CSS class for the wrapper div. |
Renders a trigger button that opens the booking calendar in a modal overlay. Great for call-to-action buttons.
1'use client'2 3import { OnbookrPopup } from '@onbookr/react'4 5export function BookButton() {6 return (7 <OnbookrPopup8 username="janedoe"9 buttonText="Schedule a Call"10 theme="light"11 accentColor="#3b82f6"12 />13 )14}15 16// Or with a custom trigger element:17export function CustomBookButton() {18 return (19 <OnbookrPopup username="janedoe">20 <button className="my-custom-button">21 Book Now →22 </button>23 </OnbookrPopup>24 )25}| Prop | Type | Default | Description |
|---|---|---|---|
| username* | string | — | The Onbookr username of the host. |
| baseUrl | string | "https://onbookr.com" | Base URL of the Onbookr instance (for self-hosted setups). |
| theme | "light" | "dark" | "auto" | "auto" | Widget color theme. |
| accentColor | string | — | Custom accent color (any valid CSS color value). |
| hideHeader | boolean | false | Hide the host name header. |
| hideBranding | boolean | false | Hide "Powered by Onbookr" branding. |
| onReady | () => void | — | Callback fired when the widget finishes loading. |
| onBookingSuccess | (data: {username}) => void | — | Callback fired when a booking is successfully completed. |
| onStepChange | (data: {step}) => void | — | Callback fired when the booking step changes. |
| onError | (data: {code, message}) => void | — | Callback fired when an error occurs (e.g., checkout failure, availability load failure). |
| buttonText | string | "Book a session" | Text for the trigger button. |
| children | ReactNode | — | Custom trigger element (replaces default button). |
| className | string | — | CSS class for the trigger button. |
Renders the calendar inline with fixed dimensions. Unlike OnbookrEmbed, this does not auto-resize — useful when you need precise layout control.
import { OnbookrInline } from '@onbookr/react' <OnbookrInline username="janedoe" width="100%" height="700px" theme="dark"/>| Prop | Type | Default | Description |
|---|---|---|---|
| username* | string | — | The Onbookr username of the host. |
| baseUrl | string | "https://onbookr.com" | Base URL of the Onbookr instance (for self-hosted setups). |
| theme | "light" | "dark" | "auto" | "auto" | Widget color theme. |
| accentColor | string | — | Custom accent color (any valid CSS color value). |
| hideHeader | boolean | false | Hide the host name header. |
| hideBranding | boolean | false | Hide "Powered by Onbookr" branding. |
| onReady | () => void | — | Callback fired when the widget finishes loading. |
| onBookingSuccess | (data: {username}) => void | — | Callback fired when a booking is successfully completed. |
| onStepChange | (data: {step}) => void | — | Callback fired when the booking step changes. |
| onError | (data: {code, message}) => void | — | Callback fired when an error occurs (e.g., checkout failure, availability load failure). |
| width | string | number | "100%" | Width of the inline widget. |
| height | string | number | "600px" | Fixed height (no auto-resize). |
| className | string | — | CSS class for the container div. |
All components ship with full TypeScript definitions. You can import types directly:
import type { OnbookrEmbedProps, OnbookrPopupProps, OnbookrInlineProps, OnbookrEvent, OnbookrEventMap,} from '@onbookr/react'For advanced use cases, you can use the useOnbookrEvents hook directly to listen for widget messages on a custom iframe:
import { useRef } from 'react'import { useOnbookrEvents } from '@onbookr/react' function CustomWidget() { const iframeRef = useRef<HTMLIFrameElement>(null) useOnbookrEvents(iframeRef, { onReady: () => console.log('Ready!'), onBookingSuccess: (data) => console.log('Booked:', data), onStepChange: (data) => console.log('Step:', data.step), }) return ( <iframe ref={iframeRef} src="https://onbookr.com/widget/janedoe" style={{ width: '100%', border: 'none', minHeight: 500 }} /> )}