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.

Minimales HTML

Vollständige 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.

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

Logge keine Widget-Keys und keine Formulardaten. detail enthält sie nicht; nimm sie auch nicht selbst aus dem DOM.

Mehrere Widgets

Ein Script, zwei Elemente, zwei Keys – zum Beispiel Studio und 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;
      };
    }
  }
}

Für Vue, Svelte oder ein CMS gilt derselbe Embed: Script einmal, Element mit den zwei Attributen.

Was Beispiele nicht tun

/api/widget/v1 nicht selbst aufrufen; das erledigt das Script
keine Workspace-ID, Kurs-ID oder Origin als HTML-Attribut setzen
YOUR_WIDGET_KEY nicht durch einen dokumentierten Demo-Key ersetzen