React / Next.js

Native React components for embedding Onbookr booking calendars. Fully typed with TypeScript and designed for both App Router and Pages Router in Next.js.

Installation

bash

pnpm add @onbookr/react

Components

<OnbookrEmbed />

Renders the booking calendar inline with auto-resizing. The iframe automatically adjusts height to match the booking flow content.

app/booking/page.tsx

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.

components/book-button.tsx

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.

<OnbookrInline />

Renders the calendar inline with fixed dimensions. Unlike OnbookrEmbed, this does not auto-resize — useful when you need precise layout control.

tsx

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.

TypeScript

All components ship with full TypeScript definitions. You can import types directly:

typescript

import type {  OnbookrEmbedProps,  OnbookrPopupProps,  OnbookrInlineProps,  OnbookrEvent,  OnbookrEventMap,} from '@onbookr/react'

Advanced: useOnbookrEvents Hook

For advanced use cases, you can use the useOnbookrEvents hook directly to listen for widget messages on a custom iframe:

tsx

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 }}    />  )}

Customization Events & Callbacks

React / Next.js

Native React components for embedding Onbookr booking calendars. Fully typed with TypeScript and designed for both App Router and Pages Router in Next.js.

Installation

bash

pnpm add @onbookr/react

Components

<OnbookrEmbed />

Renders the booking calendar inline with auto-resizing. The iframe automatically adjusts height to match the booking flow content.

app/booking/page.tsx

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.

components/book-button.tsx

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.

<OnbookrInline />

Renders the calendar inline with fixed dimensions. Unlike OnbookrEmbed, this does not auto-resize — useful when you need precise layout control.

tsx

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.

TypeScript

All components ship with full TypeScript definitions. You can import types directly:

typescript

import type {  OnbookrEmbedProps,  OnbookrPopupProps,  OnbookrInlineProps,  OnbookrEvent,  OnbookrEventMap,} from '@onbookr/react'

Advanced: useOnbookrEvents Hook

For advanced use cases, you can use the useOnbookrEvents hook directly to listen for widget messages on a custom iframe:

tsx

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 }}    />  )}

Customization Events & Callbacks

React / Next.js

Installation

Components

<OnbookrEmbed />

<OnbookrPopup />

<OnbookrInline />

TypeScript

Advanced: useOnbookrEvents Hook

React / Next.js

Installation

Components

<OnbookrEmbed />

<OnbookrPopup />

<OnbookrInline />

TypeScript

Advanced: useOnbookrEvents Hook