Widget anpassenDu 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-SteuerungsmethodenMethode
Beschreibung
| Öffnet das Widget |
| Schließt das Widget |
| Schaltet das Widget um |
| Gibt boolean zurück |
| Entfernt das Widget |
`Bookingbird.setWidgetButtonVisible(true | false)` |
Du kannst diese Methoden nach der Initialisierung ausführen — z.B. wenn ein benutzerdefinierter Button geklickt wird:
document.querySelector("#myButton").onclick = () => Bookingbird.open();
Web ComponentsBookingbird 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 }, '*');
EventsAbonniere 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älleAPI-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);