Migrating the Widget Installation

Swap the v1 iframe for Restoo.js, the v2 script.

This guide is for you if the booking form appears inside your own website, with an <iframe> pointing at myrestoo.net: that code has to be replaced. If your guests book on a Restoo page, go to the guide for hosted on Restoo.

Prerequisites

• Access to your website’s code.
• Your Restoo Account ID: the short identifier of your venue inside Restoo. It is the first part of the address you use to reach your booking form or your reservation book: in https://best-burger.myrestoo.net, the Account ID is best-burger. If you are not sure, ask your contact at Restoo.

Make the change during a quiet stretch of the day and check that the button or the form works right afterwards, before calling the job done.

How to replace the installation code

1. Find the v1 code and delete it

   Look for a block like this one and delete it completely:

   <style>
     iframe#restooBookingIframe {
       width: 1px;
       min-width: 100%;
     }
   </style>
   <script src="https://cdn.myrestoo.net/js/iframeResizer.min.js"></script>
   <iframe loading="lazy" id="restooBookingIframe" src="https://best-burger.myrestoo.net/" onload="iFrameResize();" height="700" width="100%" frameborder="0"></iframe>
   
2. Paste the v2 code

   You have two options: use one, or both.

   Modal over your page (recommended)

   We recommend this option for almost any website. Instead of showing the form inside the page, a button — “Book a table”, for example — opens it on top of the page.

   <!-- This is the button that opens the booking form -->
   <button data-restoo-open>Book a table</button>
   
   <!-- This part goes at the end of the page, after your measurement tags -->
   <script type="module" src="https://best-burger.myrestoo.net/js/restoo-widget"></script>
   <script>
     window.addEventListener("restoo:loaded", () => {
       window.Restoo("best-burger").bindTriggers();
     });
   </script>
   

   Replace best-burger with your own Account ID in both places. You can put the data-restoo-open attribute on as many buttons or links as you like across your site — menu, header, footer — and they will all open the same booking modal.

   For the full configuration, see the Installation Quickstart.

   Embedded in the page

   If you would rather keep the form inside a page, as in v1, use this:

   <!-- The booking form will appear here -->
   <div id="restoo-widget"></div>
   
   <!-- This part goes at the end of the page, after your measurement tags -->
   <script type="module" src="https://best-burger.myrestoo.net/js/restoo-widget"></script>
   <script>
     window.addEventListener("restoo:loaded", () => {
       window.Restoo("best-burger").mount("restoo-widget");
     });
   </script>
   

   Replace best-burger with your own Account ID in both places.

   For the full configuration, see the Installation Quickstart.

   You can combine both options on the same site: a “Book” button in the header, for instance, and the form embedded in your reservations page.

3. Check that it works

   Open your site in another browser or a private window and confirm that the button or the form shows up correctly and that you can complete a test booking end to end.

When you are done

If you measure your campaigns or use UTM tags, there is a second part left. Changing the installation affects how the booking is measured, and that is reviewed in the marketing and analytics migration guide. If an agency runs your campaigns, that is the guide to forward to them.

If you do not measure anything, you are done.

Frequently asked questions

Will I lose bookings while I make the change?

No. The change takes effect immediately.

Do I have to tell my guests or change anything on Google or social media?

No. Your current links keep working.

I use WordPress, Wix, or Shopify — where do I paste this?

Usually in the same section or plugin where the v1 code was: a “custom HTML” block or the template editor. If you don’t manage it yourself, ask your webmaster or your agency to make the change following this guide.

What if I also use Google Analytics, Google Ads, Meta Pixel, TikTok Pixel, OpenAI Pixel, GTM, or UTM tags?

That side is updated separately: see the marketing and analytics migration guide.

Need help?

Email us at [e-mail]. If an agency or an external webmaster runs your website, you can forward them this page: it contains all the code they need.