Customize the reservation widget

MenuOrb generates the recommended code from Reservations > Settings. You can paste it unchanged or edit the supported data-* attributes before adding it to a website.

Complete attribute reference

Attribute	Required	Default	What it controls
data-menuorb-reservation	Yes	—	Marks the element where MenuOrb mounts the widget.
data-key	Yes	—	Public widget key that routes reservations to one restaurant.
data-display	No	form	form renders inline; button opens a popup.
data-width	No	100%	Inline iframe width. Accepts CSS widths such as 100%, 680px, or min(100%, 800px).
data-height	No	720	Initial iframe height in pixels. The widget then resizes automatically between 480 and 1400 pixels.
data-radius	No	16	Outer iframe or launcher-button corner radius in pixels. Use 0 for square corners.
data-color	No	#4f46e5	Launcher-button background in button mode. The form accent is configured in MenuOrb settings.
data-label	No	Reserve a table	Launcher text in button mode.
data-language	No	site language	Initial widget language: en, pt-BR, es, or fr. Unsupported values fall back to English.
data-title	No	Restaurant reservations	Accessible iframe title used by screen readers.

Note

The saved Accent, Background, Text, Rounded corners, and Compact layout settings control the booking form itself. Embed attributes control the outer iframe or popup launcher. This is why data-color changes the button but not the form’s saved accent color.

Inline form

<div
  data-menuorb-reservation
  data-key="YOUR_PUBLIC_KEY"
  data-display="form"
  data-width="100%"
  data-height="720"
  data-radius="16"
  data-language="en"
  data-title="Book a table at Harbor Restaurant"
></div>
<script async src="https://www.menuorb.com/widgets/menuorb-reservations.js"></script>

The form automatically reports its content height to the loader. data-height is the safe initial space while configuration and availability load.

Button that opens the form

<div
  data-menuorb-reservation
  data-key="YOUR_PUBLIC_KEY"
  data-display="button"
  data-color="#ea580c"
  data-radius="999"
  data-label="Book your table"
  data-language="en"
></div>
<script async src="https://www.menuorb.com/widgets/menuorb-reservations.js"></script>

In button mode, MenuOrb creates a centered modal, locks page scrolling while it is open, and supports closing by the close control, backdrop, or Escape key.

Change color, width, and alignment inline

Use widget attributes for supported widget values and style for placement of the container:

<div
  data-menuorb-reservation
  data-key="YOUR_PUBLIC_KEY"
  data-display="form"
  data-width="100%"
  data-height="680"
  data-radius="24"
  data-language="en"
  style="max-width: 760px; margin: 32px auto; padding: 0 16px;"
></div>
<script async src="https://www.menuorb.com/widgets/menuorb-reservations.js"></script>

For a button aligned to the right:

<div
  data-menuorb-reservation
  data-key="YOUR_PUBLIC_KEY"
  data-display="button"
  data-color="#4f46e5"
  data-label="Reserve now"
  style="display: flex; justify-content: flex-end;"
></div>
<script async src="https://www.menuorb.com/widgets/menuorb-reservations.js"></script>

Advanced button CSS

The loader creates a <button> inside your container. Give the container an ID and target its direct child. The button has inline defaults, so use !important only for values you intentionally override.

<style>
  #menuorb-booking > button {
    min-width: 220px !important;
    padding: 16px 28px !important;
    font-size: 16px !important;
    letter-spacing: 0.01em;
  }
</style>

<div
  id="menuorb-booking"
  data-menuorb-reservation
  data-key="YOUR_PUBLIC_KEY"
  data-display="button"
  data-color="#0f766e"
  data-label="Check availability"
></div>
<script async src="https://www.menuorb.com/widgets/menuorb-reservations.js"></script>

Switch the public key

The key begins with rw_live_ and is designed to be present in public website code. It identifies the restaurant but does not grant access to the owner dashboard.

To connect the embed to another restaurant:

1. Open that restaurant in MenuOrb.
2. Go to Reservations > Settings.
3. Copy its widget key or generated embed code.
4. Replace only the value inside data-key="...".
5. Confirm the new restaurant’s website origin is allowed.
6. Clear website/CDN caches and test a reservation.

data-key="rw_live_OLD_RESTAURANT_KEY"
data-key="rw_live_NEW_RESTAURANT_KEY"

Caution

Rotate key is a security reset, not the normal way to copy a key. Rotation invalidates every existing embed and hosted link immediately. After rotating, replace the key everywhere the old code was published.

Multiple widgets on one page

You can mount multiple containers, but load the MenuOrb script only once and use a unique key on each container.

<div data-menuorb-reservation data-key="FIRST_PUBLIC_KEY" data-display="button" data-label="Reserve downtown"></div>
<div data-menuorb-reservation data-key="SECOND_PUBLIC_KEY" data-display="button" data-label="Reserve waterfront"></div>
<script async src="https://www.menuorb.com/widgets/menuorb-reservations.js"></script>