Back to home
Widget

Installing the widget

One script tag, one container element, and the widget renders inline on your site.

The DineOS widget is a small JavaScript bundle that renders the booking form inline on your website. It does not use an iframe by default, so it can inherit your site's typography and respect the surrounding layout.

The script tag

index.htmlhtml
<div id="dineos-widget"></div>
<script
  src="https://widget.dineos.com/v1/loader.js"
  data-restaurant="rst_3f9a2c1d"
  data-target="#dineos-widget"
  data-theme="warm"
  defer
></script>

Installation steps

  1. 1

    Copy the snippet

    From Settings → Widget in your dashboard, copy the script tag — the data-restaurant attribute is filled in for you.
  2. 2

    Paste into your site

    Add a <div id="dineos-widget"></div> where you want the form to appear and place the script tag at the end of <body>.
  3. 3

    Add your origin to the allowlist

    Back in Settings → Widget → Allowlist, add the exact origin (e.g. https://my-restaurant.com) where the widget will run. The widget refuses to render on origins not on the list.
  4. 4

    Test in a private window

    Open the page in an incognito window. The form should render within a second. Submit a test booking and verify it lands in the reservations list.

Content Security Policy

If your site sets a CSP, allow the widget's domains:

csp-headertext
Content-Security-Policy:
  script-src 'self' https://widget.dineos.com;
  connect-src 'self' https://api.dineos.com https://widget.dineos.com;
  img-src 'self' data: https://cdn.dineos.com;
iframe fallback
For sites that cannot loosen their CSP, an iframe-mode loader is available with the same configuration. Set data-mode="iframe" on the script tag to enable it.