The Onbookr widget is designed to work on any website without domain restrictions. Here's how cross-origin embedding, security, and data privacy are handled.
Unlike some platforms that require domain whitelisting, Onbookr's embed widget works immediately on any domain. There is no need to:
Just add the embed code to your page and it works. This is made possible through our iframe-based architecture and permissive CORS policy on widget routes.
The widget renders inside an iframe loaded from onbookr.com/widget/[username]. The iframe is fully sandboxed — your site cannot access its contents and vice versa, ensuring security for both sides.
Widget routes are served with Content-Security-Policy: frame-ancestors *, allowing any website to embed the widget in an iframe. This header is only set for /widget/* routes — the main Onbookr site remains protected.
The booking availability and checkout API endpoints include Access-Control-Allow-Origin: * headers to allow the widget iframe (hosted on onbookr.com) to make API requests from within cross-origin embedding contexts.
The widget communicates with the parent page via the window.postMessage() API. Messages are tagged with source: 'onbookr-widget' for identification. The embed script and React components validate this tag before processing events.
┌─────────────────────────────────────────────┐│ Your Website (any-domain.com) ││ ││ ┌──── embed.js ────────────────────────┐ ││ │ • Finds [data-onbookr-username] els │ ││ │ • Creates iframe → onbookr.com │ ││ │ • Listens for postMessage events │ ││ │ • Auto-resizes iframe height │ ││ │ • Handles checkout redirect │ ││ └──────────────────────────────────────┘ ││ ││ ┌──── iframe ──────────────────────────┐ ││ │ onbookr.com/widget/{username} │ ││ │ │ ││ │ • Renders booking calendar │ ││ │ • Fetches availability via API │ ││ │ • Sends postMessage to parent │ ││ │ • Redirects to Stripe (top window) │ ││ └──────────────────────────────────────┘ │└─────────────────────────────────────────────┘The widget handles booking data responsibly:
If your website uses a strict Content Security Policy, you need to allow framing from onbookr.com and loading the embed script:
Content-Security-Policy: frame-src https://onbookr.com; script-src https://onbookr.com;Strict CSP
frame-src 'none' or a restrictive frame-src policy, you must add https://onbookr.com to allow the widget iframe to load.For Next.js, add the CSP headers in your middleware or next.config:
const nextConfig = { async headers() { return [ { source: '/(.*)', headers: [ { key: 'Content-Security-Policy', value: "frame-src https://onbookr.com; script-src 'self' https://onbookr.com;", }, ], }, ] },}If you're running a self-hosted instance of Onbookr, replace https://onbookr.com with your instance URL in the embed script and React component's baseUrl prop:
<!-- Self-hosted embed --><script src="https://your-instance.com/api/widget/embed.js"></script><div data-onbookr-username="admin"></div>// Self-hosted React<OnbookrEmbed username="admin" baseUrl="https://your-instance.com"/>