Buchungs-Widget

Das Buchungs-Widget ist eine eigenständige Web-Komponente. Es lädt veröffentlichte Kurse und nimmt Buchungen auf der Website des Anbieters entgegen, ohne dass die Host-Seite React oder eine andere Bibliothek benötigt.

Kostenlose Gastbuchung mit Name, E-Mail-Adresse und ausdrücklicher Einwilligung
Optionale Anmeldung am Teilnehmerkonto, wenn die Host-Origin in der Domain-Allowlist steht
Bezahlte Kurse, sobald der Workspace einen aktiven Zahlungsanbieter hat
Serverseitige Filter für Kurse, Filialen und Durchführungsart
Design aus dem Dashboard; Isolation im Shadow DOM gegenüber Host-CSS

Embed-Vertrag

Die Host-Seite bindet genau ein Script ein und platziert danach ein oder mehrere Custom Elements. Das Element akzeptiert nur diese Attribute:

Attribut	Bedeutung
`api-url`	HTTPS-Origin der Orbinaut-API, ohne Pfad, Query oder Zugangsdaten
`widget-key`	Veröffentlichbarer Widget-Key (`orb_widget_v1_…`)

<script type="module" src="YOUR_WEB_ORIGIN/widget/v1/orbinaut-widget.js"></script>

<orbinaut-booking-widget
  api-url="YOUR_API_URL"
  widget-key="YOUR_WIDGET_KEY"
></orbinaut-booking-widget>

Kursfilter, erlaubte Origins, Design, Durchführungsart und Nutzungsmessung gehören nicht ins HTML. Sie werden im Dashboard konfiguriert und über das Manifest ausgeliefert.

Abgrenzung zur REST-API

Das Widget spricht intern /api/widget/v1. Dieser Pfad ist kein öffentlicher Integrationsvertrag für eigene Clients. Server-zu-Server-Integrationen, Kalenderfeeds und Webhooks stehen unter REST-API.

Das Widget wählt Workspace und Kursumfang ausschließlich über den Widget-Key. Beispiele dürfen keine frei wählbare Workspace-ID enthalten.

Voraussetzungen

Owner- oder Admin-Rolle im Workspace
mindestens ein veröffentlichter Kurs
Widget im Dashboard angelegt und aktiv
für fremde Websites: exakte HTTPS-Origin in Erlaubte Domains
aktuelle Evergreen-Browser (Chrome, Firefox, Safari, Edge) mit Custom Elements, Shadow DOM und ES-Modulen

Nächste Schritte

Einbinden – Script, Custom Element, Schlüssel und CSP
Konfigurieren – Origins, Kurse, Filialen, Messung
Design und Events – Theme und Host-Events
Beispiele – kopierbare Snippets
Fehlerbehebung – sichtbare Meldungen und nächste Schritte