Anpassung, Komponenten & Events

🎨 Widget anpassen

Du kannst sowohl den schwebenden Button als auch das Popup-Widget steuern.

Beispiel:

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-Steuerungsmethoden

Methode

Beschreibung

Du kannst diese Methoden nach der Initialisierung ausführen — z.B. wenn ein benutzerdefinierter Button geklickt wird:

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

🧩 Web Components

Bookingbird bietet native Web-Komponenten, die du direkt in deine Seite einfügen kannst.

Buchungsseite:

<bookingbird-page page-id="your-page-id" hide-navigation="true"></bookingbird-page>

Service:

<bookingbird-service service-id="your-service-id" width="400px"></bookingbird-service>

Ressource:

<bookingbird-resource resource-id="your-resource-id" height="600px"></bookingbird-resource>

Allgemeine Attribute:

• width (Standard 100%)

• height (Standard 600px)

• hide-navigation

• hide-footer

Für automatisches Anpassen der Größe, benutze:

window.parent.postMessage({ type: 'bookingbird-resize', height: 800 }, '*');

🔔 Events

Abonniere SDK-Events für bessere Kontrolle:

Bookingbird.on("ready", () => console.log("Bookingbird ready"));
Bookingbird.on("open", () => console.log("Widget opened"));
Bookingbird.on("close", () => console.log("Widget closed"));

Verfügbare Events:
ready, open, close, launcher:click, config:loaded, config:error,
config:updated, settings:updated, api:url:changed, destroy

🧠 Erweiterte Anwendungsfälle

• API-Basis-URL dynamisch aktualisieren:

  Bookingbird.setApiUrl("https://staging-api.bookingbird.io");

• Bestimmte Ressourcen direkt öffnen:

  Bookingbird.openResource("resource-id");

• Widget-Button dynamisch ein- oder ausblenden:

  Bookingbird.setWidgetButtonVisible(false);