Install on other websites

Plain HTML

Place the container where the experience should appear and load the script once, preferably after the container.

<section aria-labelledby="booking-heading">
  <h2 id="booking-heading">Reserve your table</h2>
  <div
    data-menuorb-reservation
    data-key="YOUR_PUBLIC_KEY"
    data-display="form"
    data-width="100%"
    data-height="720"
    data-language="en"
  ></div>
</section>
<script async src="https://www.menuorb.com/widgets/menuorb-reservations.js"></script>

Next.js

Render the container first and use next/script so the loader runs in the browser after the page becomes interactive.

import Script from 'next/script';

export default function ReservationsPage() {
  return (
    <>
      <div
        data-menuorb-reservation
        data-key="YOUR_PUBLIC_KEY"
        data-display="form"
        data-width="100%"
        data-height="720"
        data-language="en"
      />
      <Script
        src="https://www.menuorb.com/widgets/menuorb-reservations.js"
        strategy="afterInteractive"
      />
    </>
  );
}

If the same loader is already present in the root layout, do not add it again on the page.

React single-page applications

The loader scans for containers when the script executes. Mount the script after the reservation container is rendered:

import { useEffect } from 'react';

export function ReservationWidget() {
  useEffect(() => {
    if (document.querySelector('script[data-menuorb-loader]')) return;
    const script = document.createElement('script');
    script.src = 'https://www.menuorb.com/widgets/menuorb-reservations.js';
    script.async = true;
    script.dataset.menuorbLoader = 'true';
    document.body.appendChild(script);
  }, []);

  return (
    <div
      data-menuorb-reservation
      data-key="YOUR_PUBLIC_KEY"
      data-display="button"
      data-color="#4f46e5"
      data-label="Reserve a table"
      data-language="en"
    />
  );
}

Note

In client-side routing, if the loader executed before the reservation component existed, it will not discover the later container automatically. Load the script after mounting the container or keep the widget on a server-rendered route.

Webflow, Wix, Squarespace, and other builders

Use an Embed, Custom code, or HTML block. Paste the standard MenuOrb code and publish. Some builders do not execute scripts in editor preview, so verify the live URL.

If the platform removes third-party scripts, create a normal button that links to the hosted URL:

<a href="https://www.menuorb.com/widgets/reservations/YOUR_PUBLIC_KEY?language=en" target="_blank" rel="noopener">
  Reserve a table
</a>

Direct iframe fallback

Use this only when the builder permits iframes but not the loader:

<iframe
  src="https://www.menuorb.com/widgets/reservations/YOUR_PUBLIC_KEY?language=en"
  title="Restaurant reservations"
  width="100%"
  height="760"
  loading="lazy"
  style="border:0;border-radius:16px;background:#fff"
></iframe>

The direct iframe cannot use the loader’s automatic height adjustment. Increase the fixed height if content is clipped.

Allowed origins

For external embeds, add the exact scheme and host:

https://restaurant.com
https://www.restaurant.com

Do not add a path such as /reservations. http and https are different origins, as are www and non-www. For local testing, add the exact development origin, for example http://localhost:3000.

Leaving the allow-list empty permits embedding from any website. For a production restaurant, an explicit allow-list is the safer choice.