Widget einbinden

Vorbereitung im Dashboard

Owner und Admins legen Widgets unter Widgets an. Trainerinnen haben keinen Zugriff.

Widget anlegen und Name, Kurse, Filialen und erlaubte Domains setzen.
Den Dialog Embed-Code einmalig sichern bewusst öffnen.
Den Code kopieren und erst schließen, nachdem du bestätigt hast, dass du ihn gespeichert hast oder den Key rotieren kannst.

Orbinaut speichert nur den SHA-256-Hash. Listen zeigen später nur Präfix und Key-Version. Ein verlorener Key lässt sich nicht erneut anzeigen; rotiere ihn stattdessen.

Minimales Embed

Das Script kommt von der Orbinaut-Web-Origin. Die API-Origin steht in api-url.

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

Teil	Vertrag
Script	`YOUR_WEB_ORIGIN/widget/v1/orbinaut-widget.js` als `type="module"`, einmal pro Seite
Custom Element	`orbinaut-booking-widget`
`api-url`	HTTPS-Origin ohne Pfad, Query, Hash oder Zugangsdaten. HTTP nur für `localhost`, `127.0.0.1` und `[::1]`
`widget-key`	vollständiger Key mit Präfix `orb_widget_v1_`

Ändert sich eines der beiden Attribute, lädt nur dieses Element neu. Entfernst du das Element, bricht es laufende Anfragen ab.

Eine neutrale HTML-Vorlage liegt unter /examples/widget-html.html. Der automatisierte Smoke-Test ist apps/e2e/tests/widget-embed.spec.ts.

Aktivierung, Vorschau, Rotation

Aktion	Wirkung
Vorschau	zeigt Theme und aktuelle Kursfilter. Die Vorschau erfasst keine Nutzung und legt keine Buchung an.
Key rotieren	ersetzt den Hash, erhöht die Key-Version und macht den bisherigen Embed-Code sofort ungültig. Der neue Key erscheint genau einmal.
Deaktivieren	weist den aktuellen Key ab. Kursfilter und Origins bleiben erhalten.
Aktivieren	erlaubt dem bestehenden Key wieder, Inhalte zu laden.

Nach einer Rotation musst du den neuen Embed-Code auf jeder Host-Seite ersetzen.

Content-Security-Policy

Eine strikte Host-Policy braucht mindestens:

Content-Security-Policy:
  script-src YOUR_WEB_ORIGIN;
  connect-src YOUR_API_URL;

Das Modul verwendet kein eval, keine globalen Host-Styles und keine Inline-Event-Handler. Constructable Stylesheets machen style-src für das Widget überflüssig. Veröffentlicht das Design eine eigene Schrift, ergänze font-src YOUR_API_URL.

Blockiert script-src das Modul, kann das Custom Element nicht rendern. Höre in diesem Fall auf das error-Ereignis des Script-Tags aus deinem bereits erlaubten Bundle und zeige eigenen Fallback-Inhalt.

Teilnehmerkonto und Pop-ups

Steht die exakte Host-Origin in Erlaubte Domains, bietet das Widget optional Anmeldung oder Registrierung. Das öffnet ein First-Party-Fenster zur Orbinaut-Web-Origin. Die Host-Seite muss nutzerinitiierte Pop-ups dorthin erlauben. Ein blockiertes Fenster lässt die Gastbuchung unverändert.

Mehrere Widgets

Das Script nur einmal laden. Danach dürfen beliebig viele orbinaut-booking-widget-Elemente folgen, auch mit unterschiedlichen Keys. Jedes Element besitzt Manifest, Formular und Idempotenzschlüssel selbst.

Siehe Beispiele und Fehlerbehebung.