Customization, Components & Events

🎨 Customizing the Widget

You 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 Methods

Method

Description

You can call these methods after initialization — e.g. from a custom button click:

document.querySelector("#myButton").onclick = () => Bookingbird.open();

🧩 Web Components

Bookingbird 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 }, '*');

🔔 Events

Subscribe 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 Cases

• Dynamically 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);