Installation Quickstart

Get the Restoo widget live in a few minutes, without writing code.

You only need your Account ID — the short identifier for your venue in Restoo. The examples below use best-burger as a placeholder.

Your Account ID is the subdomain Restoo gives you at myrestoo.net. If you manage your bookings at https://best-burger.myrestoo.net/myrestoo, your Account ID is best-burger.

If you are not sure which one to pick, the introduction compares the three and explains why we recommend the modal.

Modal over your page (recommended)

1. Add Restoo.js to your site

   Paste Restoo.js just before the closing </body> tag, and replace best-burger with your own Account ID.

   If your site already loads measurement tags (GA4, Google Ads, Meta, TikTok, ChatGPT Ads…), paste it after them, so no booking event is missed.

   <script type="module" src="https://best-burger.myrestoo.net/js/restoo-widget"></script>
   
2. Mark any button or link on your site

   Add a data-restoo-open attribute to any button or link that should open the booking form.

   <button data-restoo-open>Book a table</button>
   
3. Connect the button to the widget

   Add this block right below Restoo.js. It is loaded as a deferred module, so the setup goes inside a restoo:loaded listener: that is what guarantees window.Restoo already exists.

   <script>
     window.addEventListener("restoo:loaded", () => {
       window.Restoo("best-burger").bindTriggers();
     });
   </script>
   
4. Done

   Refresh the page and click your button — the booking form opens on top of your page. You can add the same data-restoo-open attribute to as many buttons or links as you like.

Inline in your page

1. Add Restoo.js to your site

   Paste Restoo.js just before the closing </body> tag, and replace best-burger with your own Account ID.

   If your site already loads measurement tags (GA4, Google Ads, Meta, TikTok, ChatGPT Ads…), paste it after them, so no booking event is missed.

   <script type="module" src="https://best-burger.myrestoo.net/js/restoo-widget"></script>
   
2. Add a container where the form will be embedded

   Add an empty <div> with a unique id at the place on your page where the booking form should appear.

   <div id="restoo-widget"></div>
   
3. Mount the widget in your container

   Add this block right below Restoo.js, with the id of the <div> you just created. It is loaded as a deferred module, so the setup goes inside a restoo:loaded listener: that is what guarantees window.Restoo already exists.

   <script>
     window.addEventListener("restoo:loaded", () => {
       window.Restoo("best-burger").mount("restoo-widget");
     });
   </script>
   
4. Done

   Refresh the page — the booking widget now appears inside your container.

Hosted on Restoo

1. Find the address of your page on Restoo

   It is the address you manage your bookings from, without the trailing /myrestoo: if you sign in at https://best-burger.myrestoo.net/myrestoo, the address of your page is https://best-burger.myrestoo.net.

2. Link it from your site

   Put that address on your site’s booking button. Any button or link you already have will do.

   <a href="https://best-burger.myrestoo.net">Book a table</a>
   
3. Done

   All the configuration options are in your Restoo account, without touching code.

You can use that same link anywhere else: your Google profile, your social media bio, or your newsletter.

Guests can book now. The next steps are optional, but well worth taking: making the widget look like yours, and getting every booking into your analytics.

Next steps

Appearance

Bring the widget into your brand: colors and fonts.

Set Up Your Integrations

Enable GA4, Google Ads, Meta, TikTok, ChatGPT Ads, or GTM in your account and start measuring.