Bookingbird in Wix einbinden

💡 Übersicht

Das Bookingbird JavaScript SDK ermöglicht es dir, dein komplettes Buchungserlebnis direkt in deine Wix-Website einzubauen.
Du kannst einen schwebenden „Jetzt buchen“-Button anzeigen oder Buchungsseiten, Services oder Ressourcen überall auf deiner Seite einbetten.

Weil Wix mit Skripten auf eine bestimmte Art umgeht, solltest du das Bookingbird SDK normalerweise global hinzufügen (damit es auf jeder Seite geladen wird).
Wenn du Bookingbird aber nur auf einer bestimmten Seite haben willst, kannst du das Skript auch nur dort einfügen — schau dir dafür den Hinweis ganz unten im Artikel an.

🌍 Schritt 1: Das Bookingbird SDK global hinzufügen

📋 Einrichtung über das Wix Dashboard

1. Melde dich in deinem Wix Dashboard an und öffne deine Seite.

2. Geh zu Einstellungen → Entwicklung & Integrationen → Benutzerdefinierter Code.

3. Klicke auf + Benutzerdefinierten Code hinzufügen.

4. Füge den folgenden 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>

5. Stelle Code zu Seiten hinzufügen auf Alle Seiten.

6. Wähle Code platzieren in → Head.

7. Klick auf Übernehmen und Veröffentlichen für deine Seite.

Sobald veröffentlicht, lädt das Bookingbird SDK automatisch auf allen Seiten.
Wenn button.visible auf true gesetzt ist, erscheint standardmäßig ein schwebender „Jetzt buchen“-Button unten rechts.

⚙ Schritt 2: Passe die globale Einrichtung an

Du kannst verändern, wie Bookingbird aussieht und reagiert, indem du die Initialisierungsoptionen anpasst:

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

Um den globalen Button auszublenden und das Widget nur manuell zu öffnen, stelle button.visible auf false.

🔘 Schritt 3: Widget per eigenem Wix-Button öffnen (optional)

Wenn du das Bookingbird-Widget über deinen eigenen Button statt über den schwebenden Button auslösen willst:

1. Wähle im Wix Editor deinen Button aus.

2. Aktiviere Dev Mode (Velo).

3. Gib dem Button eine ID, z.B. book-now-btn.

4. Füge folgenden Code ins Code Panel deiner Seite ein:

$w.onReady(function () {
  $w('#book-now-btn').onClick(() => {
    if (window.Bookingbird) {
      window.Bookingbird.open();
    }
  });
});

Jetzt, wenn ein Besucher auf deinen Button klickt, öffnet sich das Bookingbird-Widget.

🧱 Schritt 4: Bookingbird-Komponenten einbetten

Sobald das SDK hinzugefügt wurde (global oder pro Seite), kannst du Bookingbird-Komponenten direkt auf deinen Wix-Seiten einbinden.

Beispiel-Komponenten

Buchungsseite:

<bookingbird-page page-id="your-page-id" hide-navigation="true" hide-footer="true" height="auto" embed-frame="true"></bookingbird-page>

Service:

<bookingbird-service service-id="your-service-id" width="100%" height="auto"></bookingbird-service>

Ressource:

<bookingbird-resource resource-id="your-resource-id" height="auto"></bookingbird-resource>

Zu Wix hinzufügen:

1. Geh im Wix Editor zu der Seite, wo du das Buchungselement haben willst.

2. Klicke auf Hinzufügen → Einbetten & Social → Code einbetten.

3. Füge den gewünschten Bookingbird-Komponenten-Code ein.

4. Passe die Höhe an (z.B. 600px).

5. Veröffentliche deine Seite.

⚙ Allgemeine Attribute

Attribut

Beschreibung

Wenn du height="auto" verwendest, passt Bookingbird die Höhe des iframes automatisch per postMessage-Kommunikation an.

💡 Optional: Füge das SDK nur auf einer Seite hinzu

Wenn du Bookingbird nicht auf jeder Seite laden möchtest:

1. Öffne deinen Wix Editor.

2. Wechsle zu der Seite, auf der du Bookingbird nutzen willst.

3. Klicke auf Hinzufügen → Einbetten & Soziales → Code einbetten.

4. Füge das gleiche Bookingbird SDK-Snippet direkt auf diese Seite ein:

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

5. Speichere und veröffentliche deine Seite.

Dadurch wird Bookingbird nur auf dieser bestimmten Seite geladen – ideal, wenn du deine Seite schlank halten willst oder Bookingbird nur an einem Ort anzeigen möchtest (z.B. auf deiner „Jetzt buchen“-Seite).

🧰 Fehlerbehebung

• Überprüfe deine Client ID auf Richtigkeit.

• Achte darauf, dass der Code im Head-Bereich eingefügt wird (oder in einem HTML-Embed, falls du es pro Seite einrichtest).

• Veröffentliche deine Seite erneut, falls Änderungen nicht angezeigt werden – Wix kann benutzerdefinierten Code zwischenspeichern.

• Öffne die Browser-Konsole und tippe Bookingbird ein – wenn dort ein Objekt erscheint, wurde das SDK erfolgreich geladen.

• Stelle sicher, dass deine Seite unter https:// läuft (Bookingbird verlangt eine sichere Verbindung).