Customizing the WidgetYou can control both the floating button and the popup widget.
Example:
Bookingbird.initialize({
clientId: "your-client-id",
options: {
button: {
visible: true,
text: "Reserve now",
themeColor: "#FF3366",
textColor: "#ffffff",
position: "bottom-left"
},
widget: {
width: 500,
height: 700,
borderRadius: 20
}
}
});
Widget Control MethodsMethod
Description
| Opens the widget |
| Closes the widget |
| Toggles the widget |
| Returns boolean |
| Removes widget |
`Bookingbird.setWidgetButtonVisible(true | false)` |
You can call these methods after initialization — e.g. from a custom button click:
document.querySelector("#myButton").onclick = () => Bookingbird.open();
Web ComponentsBookingbird offers native web components for direct embedding into your site.

Booking Page:
<bookingbird-page page-id="your-page-id" hide-navigation="true"></bookingbird-page>Service:
<bookingbird-service service-id="your-service-id" width="400px"></bookingbird-service>Resource:
<bookingbird-resource resource-id="your-resource-id" height="600px"></bookingbird-resource>Common attributes:
width (default 100%)
height (default 600px)
hide-navigation
hide-footer
For automatic resizing, use:
window.parent.postMessage({ type: 'bookingbird-resize', height: 800 }, '*');
EventsSubscribe to SDK events for better control:
Bookingbird.on("ready", () => console.log("Bookingbird ready"));
Bookingbird.on("open", () => console.log("Widget opened"));
Bookingbird.on("close", () => console.log("Widget closed"));Available Events:ready, open, close, launcher:click, config:loaded, config:error,config:updated, settings:updated, api:url:changed, destroy
Advanced Use CasesDynamically update your API base URL:
Bookingbird.setApiUrl("https://staging-api.bookingbird.io");Open specific resources directly:
Bookingbird.openResource("resource-id");Hide/show widget button dynamically:
Bookingbird.setWidgetButtonVisible(false);