Add an Onbookr booking calendar to any website with a single script tag. Works with WordPress, Squarespace, Wix, Webflow, static HTML, and any other platform.
Add the embed script to your page, then place a container element where you want the calendar to appear.
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <title>My Website</title>6</head>7<body>8 <h1>Book an Appointment</h1>9 10 <!-- Onbookr booking calendar -->11 <div data-onbookr-username="your-username"></div>12 13 <!-- Load the embed script (place before </body>) -->14 <script src="https://onbookr.com/api/widget/embed.js"></script>15</body>16</html>Script loading
data-onbookr-username on the page and converts them into booking widgets. It also observes the DOM for dynamically added elements (e.g., in single-page apps).Customize the widget using data attributes on the container element:
| Prop | Type | Default | Description |
|---|---|---|---|
| data-onbookr-username* | string | — | The Onbookr username of the host. Required. |
| data-onbookr-popup | boolean attribute | — | Enable popup mode. Renders a trigger button that opens the widget in a modal overlay. |
| data-onbookr-button-text | string | "Book a session" | Custom text for the popup trigger button. Only used with data-onbookr-popup. |
| data-onbookr-button-class | string | — | CSS class(es) to apply to the popup trigger button, replacing default styles. |
| data-onbookr-theme | "light" | "dark" | "light" | Color theme of the widget. |
| data-onbookr-accent-color | string | — | Custom accent color. Any valid CSS color value. |
| data-onbookr-hide-header | "true" | "false" | Hide the host name and "Book a session" header. |
| data-onbookr-hide-branding | "true" | "false" | Hide "Powered by Onbookr" branding. |
| data-onbookr-width | string | "100%" | Maximum width of the widget (CSS value, e.g. "500px"). Inline mode only. |
<div data-onbookr-username="janedoe" data-onbookr-theme="dark" data-onbookr-accent-color="#3b82f6"></div><div data-onbookr-username="janedoe" data-onbookr-hide-header="true" data-onbookr-hide-branding="true"></div><div data-onbookr-username="janedoe" data-onbookr-width="480px"></div><!-- Each container creates a separate widget --><div data-onbookr-username="alice"></div><div data-onbookr-username="bob"></div>Add the data-onbookr-popup attribute to render a button that opens the booking calendar in a modal overlay instead of embedding it inline. This is ideal for CTAs, navbars, or anywhere you want to keep the page layout clean.
<!-- Renders a "Book a session" button that opens a modal --><div data-onbookr-username="janedoe" data-onbookr-popup></div><div data-onbookr-username="janedoe" data-onbookr-popup data-onbookr-button-text="Schedule a Call"></div>If the container has child elements, they become the clickable trigger and no default button is rendered.
<!-- Your own button / link / element as the trigger --><div data-onbookr-username="janedoe" data-onbookr-popup> <a href="#" class="my-cta-link">Book with Jane →</a></div><div data-onbookr-username="janedoe" data-onbookr-popup data-onbookr-button-text="Get Started" data-onbookr-button-class="btn btn-primary btn-lg"></div><div data-onbookr-username="janedoe" data-onbookr-popup data-onbookr-theme="dark" data-onbookr-accent-color="#3b82f6" data-onbookr-button-text="Book Now"></div>Closing the popup
OnbookrWidget.close().The widget iframe automatically adjusts its height to match the content as the user navigates through booking steps. The embed script listens for onbookr:resize messages from the iframe and updates the height accordingly.
The initial minimum height is 500px. If you need a fixed height instead, set it via CSS on the container element.
The embed script dispatches Custom DOM Events on document for every widget message. You can listen for these to react to booking actions:
// Fires when the widget is loaded and readydocument.addEventListener('onbookr:ready', () => { console.log('Widget is ready')}) // Fires when a booking is successfully completeddocument.addEventListener('onbookr:booking-success', (event) => { console.log('Booking confirmed for:', event.detail.username) // e.g., show a thank-you message, trigger analytics}) // Fires when the user moves between booking stepsdocument.addEventListener('onbookr:step-change', (event) => { console.log('Current step:', event.detail.step)}) // Fires when an error occurs in the widgetdocument.addEventListener('onbookr:error', (event) => { console.error('Widget error:', event.detail.code, event.detail.message) // e.g., show an error banner, log to Sentry})When a user completes the booking form and proceeds to checkout, they are redirected to Stripe's secure payment page. The redirect opens in the top-level window (not inside the iframe) to ensure full compatibility with Stripe's payment flow.
onbookr:booking-success event.Try different configurations and see the result in real time. Enter a valid Onbookr username to see live availability data.
<script src="https://onbookr.com/api/widget/embed.js"></script> <div data-onbookr-username="your-username" ></div>
Book a session