Widget-Beispiele

Ersetze in jedem Beispiel YOUR_WEB_ORIGIN, YOUR_API_URL und YOUR_WIDGET_KEY. Verwende keine echten Keys in Tickets, Screenshots oder dieser Dokumentation.

Vorlage und laufende Hosts

Das sind zwei verschiedene Artefakte:

Artefakt	Zweck
Statische Vorlage `/examples/widget-html.html`	Copy-Paste-Referenz mit absichtlich grobem Host-CSS. Datei im Repo: `apps/docs/public/examples/widget-html.html`. Der Download bleibt diese Datei.
`examples/widget-html` und `examples/widget-angular`	Lauffähige Hosts. Dort fügst du den echten Embed-Code aus dem Dashboard ein.

Die statische Vorlage startet keinen lokalen Server und nimmt keinen Embed entgegen. Die Ordner unter examples/ enthalten dagegen lauffähige Hosts.

Minimales HTML

Vollständige statische Seite: /examples/widget-html.html.

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

Die Host-Seite darf aggressives globales CSS setzen. Farben und Schrift des Widgets kommen aus dem Shadow DOM und dem veröffentlichten Design. Buchen öffnet die gehostete Buchungsseite in einem neuen Tab.

Lokale Beispiel-Hosts

Starte die Hosts mit npm run dev:widget-html und npm run dev:widget-angular. Sie werden nicht von npm run dev gestartet.

Voraussetzungen:

lokale App: Web http://localhost:3006, API http://localhost:3000
Widget im Dashboard Aktiv, Embed-Code aus dem Dialog Embed-Code einmalig sichern
in Erlaubte Domains die exakte Origin des Beispiel-Hosts

http://localhost:4177 ist nicht http://127.0.0.1:4177. Schema, Host und Port müssen mit der Adresszeile übereinstimmen.

Beide Hosts haben dasselbe Formular: Feld Embed-Code, Button Einbinden. Danach rendert das Widget.

HTML-Host

Origin: http://localhost:4177

npm run dev:widget-html

Angular-Host

Origin: http://localhost:4178

npm run dev:widget-angular

Angular braucht CUSTOM_ELEMENTS_SCHEMA. Füge den Embed nicht per innerHTML als <script> ein, da der Browser so eingesetzte Script-Tags nicht ausführt. Lade das Modul separat als type="module" und belasse das Custom Element in der Vorlage.

Events auf der Host-Seite

<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>
  const events = [
    "orbinaut:ready",
    "orbinaut:book-clicked",
    "orbinaut:error",
  ];
  for (const name of events) {
    document.addEventListener(name, (event) => {
      console.info(name, event.detail);
    });
  }
</script>

Protokolliere keine Widget-Keys und keine Teilnehmerdaten. detail enthält sie nicht; nimm sie auch nicht selbst aus dem DOM. orbinaut:book-clicked liefert { courseId, bookingUrl }.

Mehrere Widgets

Ein Script, zwei Elemente, zwei Keys, zum Beispiel für ein Studio- und ein Online-Angebot:

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

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

Filter und Design setzt du je Widget im Dashboard, nicht über HTML-Attribute.

Frontend-Setup (React)

Das Custom Element bleibt dasselbe. Lade das Modul einmal in der Host-App, zum Beispiel in index.html oder über einen dynamischen Import.

export function BookingWidget() {
  return (
    <orbinaut-booking-widget
      api-url="YOUR_API_URL"
      widget-key="YOUR_WIDGET_KEY"
    />
  );
}

TypeScript kennt den Tag nicht von allein. Eine minimale Deklaration:

declare namespace React {
  namespace JSX {
    interface IntrinsicElements {
      "orbinaut-booking-widget": React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement>,
        HTMLElement
      > & {
        "api-url": string;
        "widget-key": string;
      };
    }
  }
}

Frontend-Setup (Angular)

Setze CUSTOM_ELEMENTS_SCHEMA, sonst kennt Angular den Tag orbinaut-booking-widget nicht. Lade das Modul in index.html oder über ein dynamisch erzeugtes script-Element als type="module". Ein per innerHTML eingesetzter Dashboard-Embed führt das Script nicht aus.

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

@Component({
  selector: "app-booking-widget",
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <orbinaut-booking-widget
      api-url="YOUR_API_URL"
      widget-key="YOUR_WIDGET_KEY"
    ></orbinaut-booking-widget>
  `,
})
export class BookingWidgetComponent {}

Der laufende Host examples/widget-angular zeigt denselben Ablauf über Embed-Code und Einbinden.

Für Vue, Svelte oder ein CMS gilt derselbe Embed wie in HTML: Lade das Script einmal und verwende das Element mit den zwei Attributen.

Was Beispiele nicht tun

/api/widget/v1 nicht selbst aufrufen; das erledigt das Script. Die Widget-API ist intern und nur lesend.
keine Workspace-ID, Kurs-ID oder Origin als HTML-Attribut setzen
keine Buchung, Zahlung oder Anmeldung im Widget erwarten; Buchen öffnet /b/{slug}/{courseId}
YOUR_WIDGET_KEY nicht durch einen dokumentierten Demo-Key ersetzen
die Beispiel-Origins nicht als http://127.0.0.1:4177 oder http://127.0.0.1:4178 eintragen, wenn die Seite unter localhost läuft