Einbettbares Speisekarten-Widget

Das Speisekarten-Widget liest dieselben Daten wie der Editor — eine Änderung im Backoffice ist binnen Sekunden im öffentlichen Widget sichtbar. Es gibt drei Konsum-Schichten, von „einzeln einfügen" bis „eigene App bauen".

Skript-Tag (am einfachsten)

Ein einziger Script-Tag im HTML deiner Seite. Onboard rendert das Widget in den genannten Container.

<div id="onboard-menu"></div>
<script
  src="https://cdn.onboardos.org/menu-widget.js"
  data-restaurant-id="YOUR_RESTAURANT_ID"
  data-target="#onboard-menu"
  data-locale="de"
  async
></script>

Standardmäßig erbt das Widget die Schrift der Host-Seite und die Restaurant-Akzentfarbe. Beides lässt sich per data-*-Attribut überschreiben.

React-Package

Für Next.js-, Vue- oder Astro-Seiten, in denen ein Wrapper Komponenten-API bietet, gibt es @onboard/widget-react (Version 2.1.0):

import { MenuWidget } from '@onboard/widget-react';

export default function MenuSection() {
  return (
    <MenuWidget
      restaurantId="YOUR_RESTAURANT_ID"
      locale="de"
      accent="#c89a4f"
      onItemView={(item) => track('menu_item_view', { item: item.id })}
    />
  );
}

Das Package akzeptiert Callback-Hooks (onItemView, onCategoryChange) für eigenes Analytics-Tracking und gibt das Widget vollständig als React-Komponente aus — kein Iframe.

Direkter JSON-Zugriff

Wer das Widget selbst rendern will, liest die Daten direkt:

GET/api/menu/{restaurantId}

Die Antwort enthält Kategorien, Items, Specials, Allergene, Zusatzstoffe — alles, was das Widget intern nutzt. CORS ist offen, die Antwort wird 60 Sekunden gecacht. Ideal für statisch generierte Seiten mit Build-Zeit-Refresh oder eigene React-Native-Apps.