Buchungs-Widget

Das Buchungs-Widget ist Beta. Es ist eine eigenständige Web-Komponente. Es lädt serverseitig gefilterte, veröffentlichte Kurse auf der Website des Anbieters. Bei jedem Kurs gibt es Buchen. Der Link öffnet die gehostete Buchungsseite /b/{slug}/{courseId} in einem neuen Tab (source=widget). Die Host-Seite braucht kein React und keine andere Bibliothek.

Liste der nächsten 50 im Dashboard freigegebenen, veröffentlichten Kurse
Kursauswahl Alle veröffentlichten Kurse oder Bestimmte Kurse; neue Veröffentlichungen erscheinen automatisch nur bei Alle veröffentlichten Kurse
serverseitige Filter für Durchführungsart und Filialen (keine Filterleiste für Besuchende)
Buchen öffnet /b/{slug}/{courseId} in einem neuen Tab (source=widget)
Wiederkehrende Kurse: verfügbare Termine als Liste sichtbar (höchstens 100 je Kurs); die Buchung selbst bleibt eine Buchung auf der gehosteten Seite
bis zu 20 öffentliche Kursbilder je Kurs in der gespeicherten Reihenfolge; keine privaten Bilder oder PDFs
Design aus dem Dashboard; Isolation im Shadow DOM gegenüber Host-CSS
Texte auf Deutsch, Englisch oder Französisch, steuerbar über lang
öffentliche Host-Events orbinaut:ready, orbinaut:book-clicked, orbinaut:error

Das Widget nimmt keine Buchung entgegen. Es gibt kein Gastformular, keine Zahlung und keine Teilnehmerkonto-Anmeldung im Embed. Filter setzt du im Dashboard, nicht als Besucher-UI.

Die Buchung, Zahlung und optionale Kontoaktivierung laufen auf der öffentlichen Buchungsseite.

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_…`)
`lang` (optional)	Sprache der Widget-Texte: `de`, `en` oder `fr`. `locale` ist ein gleichwertiger Alias.

<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. Die Widget-API ist intern und nur lesend. Öffentliche Events ergänzen sie. Schreibende Pfade gibt es nicht. Host-Seiten rufen /api/widget/v1 nicht selbst auf.

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. Eine Serie listet ihre Termine.
optionale öffentliche Kursbilder mit gepflegter Bildbeschreibung unter Kurse verwalten
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 – Snippets und lokale Beispiel-Hosts
Fehlerbehebung – sichtbare Meldungen und nächste Schritte