> ## Documentation Index
> Fetch the complete documentation index at: https://restoo.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](/widget/migration-hosted).

## 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.

<Tip>
  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.
</Tip>

## How to replace the installation code

<Steps>
  <Step title="Find the v1 code and delete it">
    Look for a block like this one and **delete it completely**:

    ```html theme={null}
    <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>
    ```
  </Step>

  <Step title="Paste the v2 code">
    You have two options: use one, or both.

    <Tabs>
      <Tab title="Modal over your page (recommended)">
        [We recommend this option](/widget/intro#which-one-should-i-use) 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.

        ```html theme={null}
        <!-- 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](/widget/quickstart#modal-over-your-page-recommended).
      </Tab>

      <Tab title="Embedded in the page">
        If you would rather keep the form inside a page, as in v1, use this:

        ```html theme={null}
        <!-- 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](/widget/quickstart#inline-in-your-page).
      </Tab>
    </Tabs>

    <Info>
      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.
    </Info>
  </Step>

  <Step title="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**.
  </Step>
</Steps>

## 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](/widget/migration-embedded-marketing). 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

<AccordionGroup>
  <Accordion title="Will I lose bookings while I make the change?">
    No. The change takes effect immediately.
  </Accordion>

  <Accordion title="Do I have to tell my guests or change anything on Google or social media?">
    No. Your current links keep working.
  </Accordion>

  <Accordion title="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.
  </Accordion>

  <Accordion title="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](/widget/migration-embedded-marketing).
  </Accordion>
</AccordionGroup>

## Need help?

Email us at [soporte@restoo.me](mailto:soporte@restoo.me). If an agency or an external webmaster runs your website, you can forward them this page: it contains all the code they need.