How to Add Online Reservations to Your Restaurant Website (2026 Guide)

The four steps (the same on every platform)

Sign up via the contact form on the homepage and you'll be set up with a site slug — a URL-safe ID like your-restaurant — plus a pre-configured embed script tag containing your accent colour, theme, and currency. Setup typically takes a few hours; you'll receive the script tag by email.

Step 2 — Paste the embed script into your website

The script tag looks like this:

<script
  defer
  src="https://postonero.com/embed.js"
  data-site="your-restaurant"
  data-accent="#C8502A"
  data-theme="light"
  data-currency="GBP"></script>

Add it to your website's HTML, ideally right before the closing </body> tag. Where exactly you do this depends on your platform — see the platform-specific sections below. The defer attribute means the script loads in the background without slowing your page.

Step 3 — Add a Reserve button (or inline widget)

Once the embed script is loaded, you have two ways to surface the booking flow on the page.

Option A — Reserve button (modal)

Add the attribute data-posto-trigger to any button or link. Clicking it opens the booking modal as an overlay.

<button data-posto-trigger>Reserve a Table</button>

<!-- Or as a link -->
<a href="#" data-posto-trigger>Book a Table</a>

Option B — Inline widget (embedded on the page)

Add the attribute data-posto-mode="inline" to any empty container — typically a <div> in your Reserve section. The booking widget loads directly into that container, no modal. Best for dedicated reservation pages.

<div data-posto-mode="inline"></div>

Option C — Event RSVP buttons

For specific events (jazz night, wine dinners, tasting menus), use a button with the event name pre-filled:

<button
  data-posto-trigger
  data-posto-type="rsvp"
  data-posto-event="Jazz Night — Friday 20 June">
  RSVP to Jazz Night
</button>

Step 4 — Test a real booking

Open your website (in a private browsing window if you've already viewed it as the owner). Click the Reserve button. Pick a date, time, and party size. Enter your contact details. Submit.

Within a few seconds:

You should see a "Reservation confirmed" success message in the widget
A confirmation email should arrive at the address you entered
The booking should appear in the Postonero dashboard at postonero.com/dashboard under your site

If any of those don't happen, see the troubleshooting section below.

Platform-specific instructions

Jump to your platform:

WordPress Squarespace Wix Webflow Shopify Custom HTML

How to add online reservations to WordPress

Two reliable methods. The plugin route is easier; the theme-edit route is more durable.

Method 1: Header/footer scripts plugin (recommended)

Install the free plugin "WPCode" (formerly "Insert Headers and Footers") from the WordPress plugins directory
Go to Code Snippets → Header & Footer
Paste the Postonero script tag into the Footer section
Click Save
Add a Reserve button anywhere on your site using a Custom HTML block: <button data-posto-trigger>Reserve</button>

Method 2: Edit your theme's footer.php

Go to Appearance → Theme File Editor
Open footer.php
Paste the Postonero script tag immediately before the closing </body> tag
Click Update File

Watch-out: theme edits are overwritten when you update the theme. Use a child theme, or stick with the plugin method.

How to add online reservations to Squarespace

Squarespace's Code Injection feature is purpose-built for this. Available on Business plan and above.

Open your site in the Squarespace editor
Go to Settings → Advanced → Code Injection
Paste the Postonero script tag into the Footer field
Click Save
Add a Reserve button: edit any page, add a Code block, paste <button data-posto-trigger style="padding:12px 24px;background:#000;color:#fff;border:none;border-radius:6px;cursor:pointer">Reserve a Table</button> (adjust the styling to match your site)

Alternatively, on a dedicated Reserve page, add a Code block containing <div data-posto-mode="inline"></div> to embed the widget inline.

How to add online reservations to Wix

Wix supports custom code via its built-in tracking tools editor. Requires a Premium plan.

Open your Wix dashboard, go to Settings → Custom Code
Click + Add Custom Code
Paste the Postonero script tag
Set Add Code to Pages to "All pages"
Set Place Code in to "Body - end"
Click Apply
To add the Reserve button, use Wix's Embed HTML element: drag it onto a page and paste <button data-posto-trigger>Reserve a Table</button>

Wix-specific note: Wix wraps embedded HTML in an iframe, which prevents data-posto-trigger on a button inside an Embed HTML element from communicating with the parent script. Workaround: put the trigger button inside the Embed HTML element along with a duplicate of the script tag, OR use Wix's Velo (custom code) feature to add the button as a real DOM element.

How to add online reservations to Webflow

Webflow has clean built-in support for custom scripts.

Open your Webflow project
Go to Project settings → Custom code
Paste the Postonero script tag into the Footer Code field
Click Save Changes, then Publish
Add the Reserve button: in the Designer, select any button element, open the element settings panel (gear icon), and add a custom attribute: name = data-posto-trigger, value = leave empty
Republish

For inline embedding, drag a Custom Code embed onto the page containing <div data-posto-mode="inline"></div>.

How to add online reservations to Shopify

Shopify isn't the typical restaurant platform but some restaurants use it (especially for restaurants with merchandise stores). Add the script via the theme editor.

Open Shopify admin, go to Online Store → Themes
Click Actions → Edit code on your live theme
In the Layout folder, open theme.liquid
Paste the Postonero script tag immediately before the closing </body> tag
Click Save
Add a Reserve button via a Custom HTML section in the theme customiser, or by adding it directly into a page template

How to add online reservations to a custom HTML site

The cleanest case. Paste the script tag before </body>.

<!DOCTYPE html>
<html>
<head>
  <!-- your existing head -->
</head>
<body>

  <!-- your existing site content -->

  <button data-posto-trigger>Reserve a Table</button>

  <!-- Postonero embed (paste before </body>) -->
  <script
    defer
    src="https://postonero.com/embed.js"
    data-site="your-restaurant"
    data-accent="#C8502A"
    data-theme="light"
    data-currency="GBP"></script>

</body>
</html>

For static-site frameworks (Eleventy, Astro, Hugo, Jekyll, etc.) — the script tag goes in your base layout template, same place as a Google Analytics tag would.

Advanced — auto-open via URL parameter

Want a link that opens the booking modal directly when clicked? Append ?book=1 to any page on your site that loads the embed script:

// Opens the reservation modal on page load
https://your-restaurant.com/?book=1

// Same, but scrolls to your Reserve section behind the modal
https://your-restaurant.com/?book=1#reserve

// Opens an event RSVP modal pre-filled with the event name
https://your-restaurant.com/?book=rsvp&event=Jazz+Night

This is ideal for:

Google Business Profile booking links — paste the URL into the GBP "Reservations" / "Appointment links" field. Diners coming from Google land directly in the booking modal.
Email reminder CTAs — turning every "Book again" button in your marketing emails into a one-click action
Ad landing pages — make the destination URL of any Google Ads or Facebook Ads campaign open the modal directly, removing one step from the funnel
QR codes on table tents — guests scan and immediately get a "Book your next visit" modal

The auto-open params are stripped from the URL after firing (via history.replaceState) so a refresh or share doesn't replay the modal.

Troubleshooting

The Reserve button doesn't open anything when clicked

Three likely causes:

The script didn't load. Open browser DevTools (F12), go to the Console tab. If you see [Posto] Missing data-site attribute on embed script, the script loaded but the data-site attribute is wrong. If you see no Postonero messages at all, the script tag isn't on the page — re-check the script tag was pasted in the right place.
The button is inside a Wix or Squarespace embed iframe. See the Wix-specific note above.
You have a Content Security Policy blocking the iframe. Rare on most platforms but happens on enterprise sites. Add https://postonero.com to your frame-src directive.

The widget loads but is the wrong colour

The accent colour is set per-restaurant in the Postonero dashboard. Either edit it there (changes take effect immediately for new page loads) or override per-embed by setting data-accent="#YOURCOLOUR" on the script tag.

Confirmation emails aren't arriving

Check the spam folder first. If genuinely not arriving, contact Postonero support — most often the issue is your RESEND_FROM_EMAIL domain not yet being verified in Resend's DKIM/SPF records.

The widget is too tall / too short on mobile

The widget self-reports its height to the parent page via postMessage and the parent automatically resizes. If you see a scrollbar inside the widget on mobile, it usually means the parent container has a fixed height — remove any height: 600px CSS on the parent and let it auto-size.

Frequently asked questions

How do I add online reservations to my restaurant website?

The easiest way is to embed a third-party reservation widget via a single script tag. Postonero loads as an iframe from one script tag and works on any website — WordPress, Squarespace, Wix, Webflow, Shopify, or custom HTML. Most restaurants are taking real bookings within an hour.

Do I need a developer to add a reservation system?

No, in most cases. Adding a script tag is a built-in feature of every major website builder — Squarespace's Code Injection, Wix's Custom Code, Webflow's Site Settings, WordPress's plugin or theme footer. The instructions for each platform are above.

Can I add a Postonero booking widget to WordPress?

Yes. Either use a header/footer scripts plugin (like WPCode / Insert Headers and Footers) and paste the script tag into the footer scripts section, or add it directly to your theme's footer.php file before the closing body tag. Then add data-posto-trigger to any button or block to make it open the booking modal.

Will the reservation widget work on mobile?

Yes. Modern reservation widgets including Postonero are mobile-first by design — the booking modal becomes a bottom sheet on mobile, the date picker uses native mobile controls, and the form is touch-optimised. Test on your phone after installing.

How long does it take to add online reservations to a website?

Adding the embed script and testing a booking typically takes 15-30 minutes. The longer piece is configuring opening hours, max covers per slot, and branding (accent colour, theme) in the Postonero dashboard — this typically takes 30-60 minutes total. Most restaurants are fully live within a single afternoon.

Can I use Postonero alongside another booking system?

Yes. Postonero doesn't conflict with any other system — it loads its own iframe via its own script tag. You can run Postonero alongside OpenTable or any other widget during a transition period without either system breaking the other.

Related guides

Ready to get started?

Postonero is £20/month flat. No per-cover. No commission. No contract. Cancel any time.

Tell us about your restaurant — typical reply within one business day. We set up your site account, send the pre-configured embed script (with your accent colour, theme, and currency), and walk you through the first booking. Live the same afternoon.

Get in touch See how it works