Make the booking widget match your brand. Customize themes, accent colors, sizing, and visibility of various elements.
The widget supports light and dark color schemes. Set the theme via configuration to match your website's design.
<!-- Light theme (default) --><div data-onbookr-username="janedoe" data-onbookr-theme="light"></div> <!-- Dark theme --><div data-onbookr-username="janedoe" data-onbookr-theme="dark"></div>// Light theme<OnbookrEmbed username="janedoe" theme="light" /> // Dark theme<OnbookrEmbed username="janedoe" theme="dark" /> // Auto — inherits from parent page (default)<OnbookrEmbed username="janedoe" theme="auto" />Override the primary accent color used for buttons, selected states, and interactive elements. Pass any valid CSS color value.
#3b82f6#10b981#f59e0b#ef4444#8b5cf6#ec4899<div data-onbookr-username="janedoe" data-onbookr-accent-color="#3b82f6"></div><OnbookrEmbed username="janedoe" accentColor="#3b82f6"/>--primary CSS custom property inside the widget. This affects buttons, selected calendar dates, step indicators, and focus rings.You can hide optional UI elements to create a cleaner, more integrated look:
Removes the host name and "Book a session" subtitle at the top. Useful when you already have your own heading above the widget.
data-onbookr-hide-header="true" / hideHeaderRemoves the "Powered by Onbookr" link at the bottom of the widget.
data-onbookr-hide-branding="true" / hideBranding<div data-onbookr-username="janedoe" data-onbookr-hide-header="true" data-onbookr-hide-branding="true"></div>The widget is responsive by default and fills the width of its container. Control the maximum width with the width attribute/prop:
<!-- Constrain to 480px --><div data-onbookr-username="janedoe" data-onbookr-width="480px"></div> <!-- Or use CSS on the container --><div style="max-width: 500px; margin: 0 auto;"> <div data-onbookr-username="janedoe"></div></div>// Auto-resizing embed (recommended)<OnbookrEmbed username="janedoe" width="100%" minHeight="500px" /> // Fixed-size inline<OnbookrInline username="janedoe" width={480} height={700} />Since the widget renders inside an iframe, you cannot directly style its internal elements with your site's CSS. However, you can style the container and iframe wrapper:
/* Style the container */[data-onbookr-username] { border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);} /* Style the iframe within */[data-onbookr-username] iframe { border-radius: 12px;}accentColor and theme options. These modify the widget's CSS custom properties from within the iframe.