Embeddable menu widget

The menu widget reads the same data as the editor — a change in the back office shows up in the public widget within seconds. There are three consumption layers, from "drop-in tag" to "build your own app".

Script tag (simplest)

A single script tag in your site's HTML. Onboard renders the widget into the named 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>

By default the widget inherits the host page's font and the restaurant's accent color. Both can be overridden via data-* attributes.

React package

For Next.js, Vue or Astro sites that want a component API, there is @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 })}
    />
  );
}

The package accepts callback hooks (onItemView, onCategoryChange) for your own analytics tracking and renders the widget as a real React component — no iframe.

Raw JSON access

Render the widget yourself by reading the data directly:

GET/api/menu/{restaurantId}

The response carries categories, items, specials, allergens and additives — everything the widget uses internally. CORS is open, the response is cached for 60 seconds. Great for statically generated sites with build-time refresh or your own React Native app.