Help centre › Website widget

Adding the widget to your site

The Make a Rezzy reservation widget is a small block of code you paste into your own website. It gives guests a clear "Book a table" entry point on your homepage or bookings page — either an inline form they complete without leaving your site, or a button that opens a secure Make a Rezzy booking page in a new tab — so you do not have to build or maintain a separate booking system of your own. This article walks through creating a widget, copying the embed code, and adding it to your pages.

What the widget is, in one sentence

A reservation widget is a small "Book a table" element — either a single button, or an inline form where guests pick the date, party size, and time directly on your page. With the inline form they enter their details and confirm the booking without leaving your site; with the button, a Make a Rezzy booking page that picks up your brand colours opens in a new tab. Every booking lands in your diary alongside bookings from your listing pages and the phone, so your team only has one place to look.

Creating a widget

Every business can have any number of widgets — for example, one on the homepage and a different one on your private-dining page. To create your first widget:

  1. Sign in to manage.makearezzy.com and pick your business.
  2. Open Website Widget from the left-hand menu.
  3. Click Add Widget in the top-right of the page.
  4. Give the widget a name — this is for your own reference (for example, "Homepage CTA" or "Events page"). Guests never see it.
  5. Choose an integration. Pick "None" for a standalone booking widget. Pick "Spektrix" if your website already uses Spektrix and you want the widget to read the customer's basket — see the Spektrix integration overview for what that does.
  6. Click Create Widget.

You will land in the widget configurator straight away, with a live preview of the default widget. From here you can change colours, copy, and style — see Customising the widget for the full set of controls.

Getting the embed code

The embed code lives on the left of the configurator under Embed snippet. It looks like this: 

<div data-makearezzy-widget="your-widget-id"></div>
<script defer>
  (function () {
    fetch("https://www.makearezzy.com/api/reservation-widget/v1/embed/?version=1")
      .then(function (r) { return r.json(); })
      .then(function (d) {
        var s = document.createElement("script");
        s.src = d.url;
        document.head.appendChild(s);
      });
  })();
</script>

Two parts:

  • The <div> is the placeholder — wherever you paste this <div>, that is where the widget will appear on your page.
  • The <script> loads the widget code from Make a Rezzy. Paste it once anywhere on the page. It does not need to live next to the <div>.

Click Copy snippet below the code block to copy the whole thing to your clipboard.

Pasting the snippet into your site

The snippet is plain HTML and JavaScript — it works on any website that lets you paste a block of custom HTML. The exact steps depend on what your site is built with. For instructions on WordPress, Squarespace, Wix, and others, see Adding the widget on popular platforms.

A few rules of thumb that apply regardless of platform:

  • Pick the page first. Most restaurants put the widget on the homepage, on a dedicated Book a table page, or both. You can paste the same snippet onto more than one page.
  • Put the embed code where you want the widget to appear. Above the fold for high traffic, inside a section for a calmer look, or in the footer for a light touch.
  • Save and publish. Most site builders do not show the embedded widget in the editor preview — you will need to publish or visit the live page in a fresh browser tab to see it working.

Testing the widget

Once the snippet is live on your site:

  1. Open the page in a fresh browser window (or a private tab) to bypass any cache.
  2. Try the widget. A button widget opens the Make a Rezzy booking page in a new tab. An inline widget shows the date, guests, and time inputs on the page first — pick a time, enter your details, and the booking is confirmed right there on your page. If the booking needs a deposit, a secure payment page opens in a new tab to finish.
  3. Complete a test booking with your own email. You will get the confirmation email — see Booking confirmation emails for what it looks like.
  4. Check the booking has arrived in your Calendar. Cancel it once you are done so it does not block a real table.

More than one widget on the same page

You can place multiple widgets on the same page — for example, a button widget in the header and a separate inline widget further down. Each widget has its own snippet with its own ID, so they will not interfere with each other. The loader script only needs to be on the page once, but pasting it twice does no harm.

Removing the widget

Delete the embedded code and that will remove the widget. You can leave the widget itself in Make a Rezzy — it does not cost anything and you may want to bring it back later. To bin it completely, open the configurator and delete it from the widgets list.

Where to go next