Website-Widget

Das Widget bringt deinen Buchungsablauf direkt auf deine Website. Es funktioniert mit WordPress, Wix, Jimdo, Squarespace, Webflow, Shopify und jeder selbst gebauten Seite. Den fertigen Code mit deiner Adresse findest du im Dashboard unter Integrationen → Website-Widget.

Eingebettet

Der Buchungsablauf erscheint als Bereich in deiner Seite und passt seine Höhe automatisch an den Inhalt an.

<div data-bookbase-inline data-slug="dein-studio"></div>
<script src="https://bookbaseapi.com/widget.js" async></script>

Popup-Button

Jedes Element mit data-bookbase-popup öffnet die Buchung als Overlay. Du kannst also deinen eigenen Button verwenden.

<button data-bookbase-popup data-slug="dein-studio">Termin buchen</button>
<script src="https://bookbaseapi.com/widget.js" async></script>

Schwebender Button

Ein runder Button unten rechts auf jeder Seite:

<script
  src="https://bookbaseapi.com/widget.js"
  data-slug="dein-studio"
  data-floating="true"
  data-label="Termin buchen"
  data-color="#476e66"
  async
></script>

Optionen

Attribut	Wirkung
data-slug	Deine Buchungsadresse (Pflicht)
data-service	ID einer Leistung, um direkt im Kalender zu starten
data-locale	de oder en
data-color	Farbe des schwebenden Buttons
data-label	Beschriftung des schwebenden Buttons

JavaScript-API

Das Skript stellt window.BookBase bereit:

BookBase.open({ slug: "dein-studio", service: "8f2c…" });
BookBase.close();
BookBase.inline(document.querySelector("#termin"), { slug: "dein-studio" });

Nach einer erfolgreichen Buchung löst das Widget ein Ereignis aus, das du zum Beispiel für eine Danke-Seite nutzen kannst:

window.addEventListener("bookbase:booked", (event) => {
  console.log("Gebucht:", event.detail.reference);
});

WordPress

Füge im Block-Editor einen Block Individuelles HTML ein und kopiere den Code hinein. Bei Seitenbaukästen wie Elementor nutzt du das HTML-Widget.

Wix, Jimdo, Squarespace, Webflow

Alle diese Systeme haben ein Element für eigenen Code (zum Beispiel „Einbetten“, „Code-Block“ oder „Embed“). Füge dort den Code für die eingebettete Variante oder den Button ein.

Datenschutz

Das Widget lädt den Buchungsablauf in einem iframe von bookbaseapi.com. Es setzt keine Cookies und lädt keine Inhalte von Drittanbietern. Erwähne in deiner Datenschutzerklärung, dass Buchungsdaten über BookBase verarbeitet werden. Eine Vorlage findest du unter DSGVO für deine Kunden.