ÜberblickDas Bookingbird JavaScript SDK ermöglicht es dir, das Buchungserlebnis von Bookingbird ganz einfach in deine Webflow-Website einzubauen.
Es kann entweder einen schwebenden „Jetzt buchen“-Button anzeigen oder Buchungskomponenten (wie Seiten, Services oder Ressourcen) direkt in dein Layout einbetten.
Weil Webflow mit Skripten speziell umgeht, musst du das Bookingbird SDK global im Head Code deines Projekts einfügen – so wird das SDK auf jeder Seite geladen.
Schritt 1: Füge das Bookingbird SDK global hinzuÖffne dein Webflow-Projekt.
Gehe zu Project Settings → Custom Code → Head Code.
Füge folgenden Code-Schnipsel ein:
<!-- Bookingbird SDK Global Integration -->
<script>
!(function () {
if (!(window.Bookingbird = window.Bookingbird || []).invoked) {
window.BookingbirdActions = [];
var proxy = new Proxy({ invoked: !0 }, {
get: function (target, name) {
if (name === "invoked") return target.invoked;
return function () {
var args = Array.prototype.slice.call(arguments);
window.BookingbirdActions.push({ e: name, a: args });
};
}
});
window.Bookingbird = proxy;
var s = document.createElement("script");
s.src = "https://cdn.bookingbird.io/latest/index.js";
s.async = true;
document.head.appendChild(s);
window.Bookingbird.initialize({
clientId: "your-client-id",
options: { button: { visible: true, text: "Book now" } }
});
}
})();
</script>Klick auf Änderungen speichern und Veröffentlichen deiner Seite.
Nach dem Veröffentlichen wird das Bookingbird SDK automatisch auf jeder Seite geladen.
Wenn die Option button.visible auf true gesetzt ist, erscheint ein schwebender „Jetzt buchen“-Button (standardmäßig unten rechts).

Schritt 2: Integration anpassenDu kannst anpassen, wie Bookingbird überall angezeigt wird, indem du die Optionen im Script einstellst.
Beispiel:
window.Bookingbird.initialize({
clientId: "your-client-id",
options: {
button: {
visible: true,
text: "Reserve now",
position: "bottom-left",
themeColor: "#FF3366"
},
widget: {
width: 420,
height: 600,
borderRadius: 16
}
}
});Wenn du keinen schwebenden Button willst, kannst du ihn ausblenden und das Buchungs-Widget stattdessen über einen eigenen Webflow-Button öffnen.
<script>
window.Bookingbird.initialize({
clientId: "your-client-id",
options: { button: { visible: false } }
});
document.querySelector("#book-now-btn").onclick = () => window.Bookingbird.open();
</script>Gib deinem Webflow-Button die ID book-now-btn, und das Widget öffnet sich, wenn du auf den Button klickst.
Schritt 4: Bookingbird-Komponenten einbettenSobald das SDK global hinzugefügt wurde, kannst du auch jede Bookingbird-Komponente direkt auf deinen Webflow-Seiten einbetten.
Füge ein Embed-Element zu deiner Webflow-Seite hinzu.

Füge eines der untenstehenden Beispiele ein:
Buchungsseite:
<bookingbird-page page-id="your-page-id" hide-navigation="true" hide-footer="true"></bookingbird-page>Service:
<bookingbird-service service-id="your-service-id" width="100%" height="600px"></bookingbird-service>Ressource:
<bookingbird-resource resource-id="your-resource-id" height="600px"></bookingbird-resource>Stell die Höhe vom Embed-Element im Webflow Designer ein (z.B. 600px).
Veröffentlich deine Seite, um die eingebettete Buchungsansicht live zu sehen.

Allgemeine AttributeAttribut
Beschreibung
| Blendet die Navigationsleiste aus |
| Blendet den Footer-Bereich aus |
| Legt die Komponentengröße fest (Standard: 100% / 600px) |
| Passt die Rahmenhöhe automatisch an den Inhalt an |
Für automatische Höhe schickt der eingebettete Frame eine Resize-Nachricht:
window.parent.postMessage({ type: 'bookingbird-resize', height: 800 }, '*');Überprüf noch mal, ob dein clientId richtig ist.
Stell sicher, dass deine veröffentlichte Seite https:// nutzt — Bookingbird verlangt eine sichere Verbindung.
Falls Komponenten nicht auftauchen, prüf, ob das globale Skript ordentlich hinzugefügt wurde in Project Settings → Custom Code → Head Code.
Du kannst deine Browser-Konsole öffnen und Bookingbird eingeben, um zu prüfen, ob das SDK geladen ist.