Widgets

Owner und Admins verwalten Buchungswidgets unter Widgets (/widgets). Der Docs-Button unten rechts öffnet diese Anleitung. Die technische Einbettung, Events und Host-Fehler stehen unter Buchungs-Widget.

Ziel

Ein Aktives Widget mit gesichertem Embed-Code listet die freigegebenen, veröffentlichten Kurse auf deiner Website.

Voraussetzungen

Benötigte Rolle: Owner oder Admin. Trainer:in sieht Widgets nicht. Ohne Recht erscheint Keine Berechtigung für Widget-Verwaltung.
Der Workspace ist eingerichtet (Einrichtung).
Für Bestimmte Kurse brauchst du mindestens einen Kurs mit dem Status Veröffentlicht. Im Modus Alle veröffentlichten Kurse kannst du das Widget schon ohne veröffentlichten Kurs anlegen; es zeigt dann den Leerezustand.
Freie Plätze im Widget-Kontingent: Free und Solo 1 Widget, Studio und Business unbegrenzt.

Schritte

1. Widgets öffnen

Öffne in der Gruppe Vertrieb den Eintrag Widgets. Die feste Route ist https://app.orbinaut.ccl-dev.com/widgets.
Überschrift Widgets, Untertitel: Buchungswidgets verwalten.
Ohne Einträge: Noch kein Widget und Erstelle ein Widget für deine Buchungsseite.
Mit Einträgen zeigt die Tabelle Widget, Kurse, Websites, Geladen, Gestartet, Buchungen, Quote, Status und Aktionen. Unter dem Namen steht Key {Präfix}… · Version {Version}. Status trägt zwei Badges: Aktiv oder Deaktiviert sowie Messung aktiv oder Messung aus; über dem Free-Limit zusätzlich Durch Free-Limit gesperrt.
Lässt sich die Seite nicht laden, erscheint eine Fehlerkarte mit Erneut versuchen.

Wähle Widget anlegen. Hinweis: Der Klartext-Key und vollständige Embed-Code werden nach dem Erstellen genau einmal angezeigt.
Trage den Namen ein. Dieser Name erscheint im Widget und hilft bei der internen Zuordnung.
Trage optional unter Erlaubte Domains eine vollständige HTTPS-Origin pro Zeile ein, ohne Pfad. Ohne Eintrag darf das Widget auf jeder Website laden; die sichere Teilnehmerkonto-Anmeldung bleibt dann deaktiviert. Die Tabelle zeigt in dem Fall Alle Websites.
Unter Kursauswahl entscheidest du, welche Kurse das Widget enthält (nächster Abschnitt).
Unter Durchführungsart wählst du Vor Ort und online, Nur vor Ort oder Nur online.
Unter Filialen lässt du die Auswahl für alle Filialen und freien Einzeladressen leer oder hakst einzelne Filialen an.
Speichere mit Widget erstellen. Erfolg: Widget wurde erstellt.

3. Welche Kurse enthalten sind

Kursauswahl steuert den sichtbaren Umfang. Filter für Durchführungsart und Filialen gelten zusätzlich serverseitig. Besuchende sehen im Widget keine Filterleiste.

Wert	Wirkung
Bestimmte Kurse	Nur die angehakten, veröffentlichten Kurse. Mindestens einer. Neue Veröffentlichungen kommen nicht automatisch dazu.
Alle veröffentlichten Kurse	Neue veröffentlichte Kurse erscheinen automatisch.

Nur Kurse mit Status Veröffentlicht erscheinen in Veröffentlichte Kurse. Eine Serie zeigt im Widget ihre Termine als Liste; Buchen öffnet trotzdem die eine Buchungsseite der Durchführung.

Später änderst du über Bearbeiten dieselbe Konfiguration. Hinweis: Änderungen an Domains und Kursen gelten sofort für den bestehenden Key. Speichern: Änderungen speichern. Erfolg: Widget-Konfiguration wurde aktualisiert. In der Tabelle steht dann Alle veröffentlichten oder {n} ausgewählt.

4. Embed-Code einmalig sichern

Nach dem Anlegen (und nach Key rotieren) öffnet Orbinaut Embed-Code einmalig sichern. Orbinaut speichert nur den Hash. Nach dem Schließen kann dieser Key nicht erneut angezeigt werden.

Wähle Key und Embed-Code bewusst anzeigen.
Kopiere den Vollständigen Embed-Code mit Embed-Code kopieren. Erfolg: Embed-Code wurde kopiert.
Bestätige: Ich habe den Embed-Code sicher gespeichert oder kann den Key bei Bedarf rotieren.
Schließe mit Sicher schließen. Ohne Häkchen bleibt die Schaltfläche gesperrt und der Dialog offen.

In Beispielen nur den Platzhalter YOUR_WIDGET_KEY verwenden:

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

Script, Attribute und CSP: Widget einbinden. Origins, Filter und Messung: Widget konfigurieren.

5. Design

Im Menü Weitere Aktionen in der Spalte Aktionen öffnest du Design. Der Designer ist eine eigene Seite unter /widgets/{id}/design. Der Titel lautet Widget-Design · {Name}. Zurück zu Widgets und Designer schließen führen zur Liste. Bei ungespeicherten Änderungen fragt Orbinaut Ungespeicherte Änderungen verwerfen?
Gestalte und speichere einen Entwurf. Erst Design veröffentlichen ändert das öffentliche Widget. Der Embed-Code bleibt gleich.
Start-Theme setzt Hell oder Dunkel nach Bestätigung (Theme wirklich anwenden?). Theme zurücksetzen stellt die Ausgangswerte des gewählten Themes wieder her.
Tabs: Farben, Typografie, Layout. Rechts steht die Live-Vorschau mit Beispieldaten, keine echte Buchung. Unter Vorschaugröße wechselst du zwischen Desktop und Mobil.
Rückgängig nimmt die letzte Änderung zurück. Ungültige Farbwerte bleiben sichtbar. Bis zur Korrektur erscheint Korrigiere die markierten Farbwerte vor dem Speichern. Das Speichern ist gesperrt.
Die Qualitätsprüfung unter der Vorschau listet Kontrast- und Layoutwarnungen, zum Beispiel Buttonkontrast zu niedrig oder Bedienelemente stehen sehr eng. Ohne Befund: Keine Kontrast- oder Layoutprobleme erkannt. Warnungen blockieren das Speichern nicht, erscheinen aber noch einmal vor dem Veröffentlichen.
Entwurf speichern legt den Entwurf ab. Das Badge zeigt Entwurf gespeichert oder Nicht gespeichert. Ohne Veröffentlichung bleibt Noch nicht veröffentlicht mit dem Hinweis Der gespeicherte Entwurf ist noch nicht öffentlich.
Design veröffentlichen fragt Widget-Design veröffentlichen? und macht den gespeicherten Entwurf im bestehenden Embed öffentlich.
Letzten Stand wiederherstellen setzt die unmittelbar vorherige Veröffentlichung als neue Revision. Dein gespeicherter Entwurf bleibt erhalten.

War eine gespeicherte Konfiguration nicht verwendbar, öffnet der Designer den sicheren Standardentwurf und meldet Die gespeicherte Konfiguration war nicht verwendbar.

Farben, Kontrast und Host-Events: Design und Events.

6. Vorschau, Messung und Key

Im Menü Weitere Aktionen neben dem Widget:

Aktion	Wirkung
Vorschau	Öffnet Widget-Vorschau · {Name} mit veröffentlichtem Theme und aktuellen Kursfiltern. Badges: {n} sichtbare Kurse, Theme-Revision {n}, Messung aus. Die Vorschau folgt dem Link Buchen nicht (Nur Vorschau, keine Buchung). Ohne Treffer: Mit den aktuellen Filtern sind keine Kurse sichtbar.
Messung aktivieren / Messung deaktivieren	Datenschutzarme Zählung (geladen, gestartet, Buchungen). Keine Cookies, Profile oder IP-Adressen. Neue Widgets starten mit aktiver Messung.
Key rotieren	Der bisherige Embed-Code funktioniert sofort nicht mehr. Der neue Key erscheint genau einmal.
Deaktivieren	Der bestehende Key wird sofort abgewiesen. Die Konfiguration bleibt. Status Deaktiviert.
Aktivieren	Der bestehende Key kann wieder Inhalte laden. Status Aktiv.

Ergebnis

Das Widget steht in der Tabelle mit Status Aktiv oder Deaktiviert.
Die Spalte Kurse zeigt Alle veröffentlichten oder die Anzahl der ausgewählten Kurse.
Der Embed-Code liegt außerhalb von Orbinaut. Listen zeigen nur Präfix und Key-Version, nie den Klartext.
Buchen öffnet /b/{slug}/{courseId} in einem neuen Tab (source=widget). Den Ablauf für Teilnehmende beschreibt die öffentliche Buchung.

Wenn etwas schiefgeht

Beobachtung	Ursache	Nächster Schritt
Keine Berechtigung für Widget-Verwaltung	Rolle Trainer:in oder fehlendes Verwaltungsrecht	Owner oder Admin bitten
Veröffentliche zuerst einen Kurs	Kein veröffentlichter Kurs	Kurs veröffentlichen oder Alle veröffentlichten Kurse wählen
Das Limit dieses Plans ist erreicht	Widget-Kontingent ausgeschöpft	Widget deaktivieren oder Plan wechseln
Widget leer auf der Host-Seite	Key rotiert, Widget Deaktiviert, Origin nicht erlaubt	Fehlerbehebung