Einführung & SDK-Einrichtung

Was ist das Bookingbird SDK?

Das Bookingbird SDK macht es möglich, ein komplett funktionierendes Buchungserlebnis direkt auf deiner Website einzubetten.
Es ist leichtgewichtig, kommt ohne Abhängigkeiten aus und läuft in allen modernen Browsern (Chrome 60+, Firefox 55+, Safari 12+, Edge 79+).

Du kannst es nutzen, um:

Einen schwebenden „Jetzt buchen“-Button anzuzeigen.
Buchungsseiten, Services oder Ressourcen einzubetten.
Das Buchungs-Widget programmatisch zu steuern.

Installationsoptionen

Es gibt zwei einfache Wege, das SDK auf deiner Seite zu laden.

Option 1 — Empfohlen (Proxy Script)

Diese Methode sorgt dafür, dass das SDK asynchron geladen wird und deine Seite nicht blockiert.

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

Option 2 — Direktes Einbinden

<script src="https://cdn.bookingbird.io/latest/index.js"></script>
<script>
  Bookingbird.initialize({
    clientId: "your-client-id",
    options: {
      button: { visible: true, text: "Book now" },
      widget: { themeColor: "#6a7cff" }
    }
  });
</script>

Konfigurationsoptionen

Bookingbird.initialize({
  clientId: "your-client-id",
  apiBaseUrl: "https://api.bookingbird.io",
  locale: "en",
  options: {
    widget: {
      width: 420,
      height: 600,
      borderRadius: 16,
      closeOnEsc: true,
      closeOnBackdrop: true
    },
    button: {
      visible: true,
      text: "Book now",
      position: "bottom-right",
      themeColor: "#6a7cff",
      textColor: "#fff"
    }
  }
});

Überprüfung deiner Einrichtung

Nachdem du gespeichert und veröffentlicht hast, öffne deine Website – ein schwebender Bookingbird-Button sollte erscheinen.
Wenn du darauf klickst, öffnet sich das Buchungs-Widget, das mit deiner Client-ID verbunden ist.

Wenn nichts erscheint:

Prüfe deine Client-ID.
Stelle sicher, dass die SDK-URL (https://cdn.bookingbird.io/latest/index.js) richtig in deinem Browser lädt.
Öffne die Browser-Konsole und suche nach Bookingbird-Logs.

Hilfecenter