Design und Events

Das Aussehen kommt aus dem Dashboard-Designer. Die Host-Seite steuert nur Platzierung und Breite des Custom Elements. Ablauf-Hooks laufen über Custom Events.

Design im Dashboard

Owner und Admins öffnen Design an der Widget-Karte. Der Editor arbeitet mit einem versionierten Dokument (schemaVersion 1), nicht mit frei eingebettetem CSS oder HTML.

Unterstützte Gruppen:

Gruppe	Inhalt
Presets	Hell und Dunkel als vollständige Ausgangswerte
Farben	Hintergrund, Fläche, Text, Akzent, Rahmen, Fokus, Gefahr als `#RRGGBB`
Typografie	Systemschrift sans/serif/mono oder eine Workspace-Schrift, Größe 12–22 px
Abstand und Radius	Außenabstand, Lücken, Karten- und Button-Radius
Dichte	kompakt, komfortabel, weit
Abschnitte	Reihenfolge von Kopf, Kursliste, Formular und Bestätigung

Ungültige Farben bleiben sichtbar, sind aber nicht speicherbar. Kontrast- und Layoutwarnungen blockieren das Speichern nicht, sollen aber vor dem Veröffentlichen geprüft werden.

Wiederherstellen macht die unmittelbar vorherige Veröffentlichung zur neuen Revision. Der gespeicherte Entwurf bleibt erhalten.

Isolation auf der Host-Seite

Jedes Element hängt ein offenes Shadow DOM. Host-CSS erreicht interne Knoten nicht. Das Widget setzt am Shadow-Rand Schrift, Farbschema und Textgröße zurück.

Die Breite folgt dem Container des Elements, nicht dem Viewport. Unter 34 rem Breite wird die Kursliste einspaltig, Aktionen werden vollbreit.
Der Ladezustand hält eine Mindesthöhe, damit das Layout nicht springt.
prefers-reduced-motion unterdrückt unnötige Bewegung.
Auf hellen und dunklen Host-Seiten bleibt das veröffentlichte Widget-Theme maßgeblich.

Die Host-Seite darf das äußere Element positionieren, zum Beispiel:

orbinaut-booking-widget {
  display: block;
  max-width: 42rem;
  margin-inline: auto;
}

Öffentliche Events

Alle Events bubblen und durchqueren das Shadow DOM (composed: true). detail enthält nur öffentliche IDs und begrenzten Status – nie Widget-Key, Workspace-ID, Name oder E-Mail.

Event	`detail`	Wann
`orbinaut:ready`	`{ apiVersion, widgetId, courseCount }`	Manifest geladen. `apiVersion` ist `"1"`.
`orbinaut:course-selected`	`{ courseId }`	Besucherin wählt einen Kurs.
`orbinaut:booking-created`	`{ bookingId, courseId, status }`	Kostenlose Buchung bestätigt oder bezahlte Buchung serverseitig bestätigt.
`orbinaut:error`	`{ code, phase, retryable }`	Laden oder Buchung fehlgeschlagen. `phase` ist `"load"` oder `"booking"`.

document.addEventListener("orbinaut:booking-created", (event) => {
  const { bookingId, courseId, status } = event.detail;
  // Host-Analytics oder Danke-Logik. Einwilligung und Speicherdauer liegen bei dir.
});

document.addEventListener("orbinaut:error", (event) => {
  const { code, phase, retryable } = event.detail;
  if (retryable) {
    // z. B. Hinweis, es später erneut zu versuchen
  }
});

Die Codes und sichtbaren Texte stehen in der Fehlerbehebung. Host-Tracking über diese Events ist unabhängig von der datenschutzarmen Nutzungsmessung im Dashboard.