Install the reservation widget on WordPress

Prepare MenuOrb first

1. Enable public reservations and the website widget.
2. Add the WordPress origins under Allowed websites. Add both versions when both resolve, for example https://restaurant.com and https://www.restaurant.com.
3. Save settings and copy the generated code.

Gutenberg block editor

1. Open Pages and edit the destination page.
2. Select Add block.
3. Add Custom HTML.
4. Paste one of the examples below.
5. Use Preview to verify the form.
6. Update or publish the page.

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"
></div>
<script async src="https://www.menuorb.com/widgets/menuorb-reservations.js"></script>

Button and popup

<div
  data-menuorb-reservation
  data-key="YOUR_PUBLIC_KEY"
  data-display="button"
  data-color="#4f46e5"
  data-label="Reserve a table"
  data-language="en"
></div>
<script async src="https://www.menuorb.com/widgets/menuorb-reservations.js"></script>

Elementor

1. Edit the page with Elementor.
2. Drag an HTML widget into the target section.
3. Paste the generated MenuOrb code.
4. Click Update and test the public page in a private browser window.

For button mode, place the HTML widget inside the Elementor column that controls alignment. You can also add style="display:flex;justify-content:center" to the MenuOrb container.

Header or footer builders

Use button mode in a header. Add the container where the button should appear, but load the script only once. If the theme has a global custom-code area, the <script> can live there and the <div> can remain in the header block.

WordPress optimization and consent plugins

Performance tools may delay, combine, or remove third-party scripts. If the container appears empty:

• exclude https://www.menuorb.com/widgets/menuorb-reservations.js from delayed JavaScript;
• exclude it from JavaScript minification/combination when the optimizer changes its behavior;
• permit the MenuOrb script in the cookie-consent tool when scripts are blocked by default;
• clear page, object, CDN, and browser caches;
• test the public URL, not only the visual editor canvas.

Common tools expose these options under names such as Delay JavaScript execution, Excluded JavaScript files, or Script exceptions.

WordPress.com limitation

Some WordPress.com plans remove custom <script> tags. If the saved page removes the MenuOrb loader, use the hosted booking link from MenuOrb as a button URL or upgrade to a plan/plugin setup that permits custom scripts.

Updating the key later

Edit the same Custom HTML or Elementor HTML block and replace the data-key value. Do not add a second loader script. Publish the update and purge caches.