Bookingbird in Webflow einbinden

💡 Überblick

Das 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

1. Öffne dein Webflow-Projekt.

2. Gehe zu Project Settings → Custom Code → Head Code.

3. 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>

4. 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 anpassen

Du 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
    }
  }
});

🔘 Schritt 3: Widget manuell auslösen (optional)

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 einbetten

Sobald das SDK global hinzugefügt wurde, kannst du auch jede Bookingbird-Komponente direkt auf deinen Webflow-Seiten einbetten.

1. Füge ein Embed-Element zu deiner Webflow-Seite hinzu.

1. 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>

3. Stell die Höhe vom Embed-Element im Webflow Designer ein (z.B. 600px).

4. Veröffentlich deine Seite, um die eingebettete Buchungsansicht live zu sehen.

⚙ Allgemeine Attribute

Attribut

Beschreibung

Für automatische Höhe schickt der eingebettete Frame eine Resize-Nachricht:

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

🧰 Fehlerbehebung

• Ü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.