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

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

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

If you are not sure which one to pick, the [introduction](/widget/intro#the-three-ways-to-install-it-on-your-site) compares the three and explains [why we recommend the modal](/widget/intro#which-one-should-i-use).

<Tabs>
  <Tab title="Modal over your page (recommended)">
    <Steps>
      <Step title="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.

        ```html theme={null}
        <script type="module" src="https://best-burger.myrestoo.net/js/restoo-widget"></script>
        ```
      </Step>

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

        ```html theme={null}
        <button data-restoo-open>Book a table</button>
        ```
      </Step>

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

        ```html theme={null}
        <script>
          window.addEventListener("restoo:loaded", () => {
            window.Restoo("best-burger").bindTriggers();
          });
        </script>
        ```
      </Step>

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

  <Tab title="Inline in your page">
    <Steps>
      <Step title="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.

        ```html theme={null}
        <script type="module" src="https://best-burger.myrestoo.net/js/restoo-widget"></script>
        ```
      </Step>

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

        ```html theme={null}
        <div id="restoo-widget"></div>
        ```
      </Step>

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

        ```html theme={null}
        <script>
          window.addEventListener("restoo:loaded", () => {
            window.Restoo("best-burger").mount("restoo-widget");
          });
        </script>
        ```
      </Step>

      <Step title="Done">
        Refresh the page — the booking widget now appears inside your container.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Hosted on Restoo">
    <Steps>
      <Step title="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`.
      </Step>

      <Step title="Link it from your site">
        Put that address on your site's booking button. Any button or link you already have will do.

        ```html theme={null}
        <a href="https://best-burger.myrestoo.net">Book a table</a>
        ```
      </Step>

      <Step title="Done">
        [All the configuration options](/widget/advanced-installation#hosted-on-restoo) are in your Restoo account, without touching code.
      </Step>
    </Steps>

    <Tip>
      You can use that same link anywhere else: your Google profile, your social media bio, or your newsletter.
    </Tip>
  </Tab>
</Tabs>

**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

<CardGroup cols={2}>
  <Card title="Appearance" icon="palette" href="/widget/appearance">
    Bring the widget into your brand: colors and fonts.
  </Card>

  <Card title="Set Up Your Integrations" icon="sliders" href="/widget/integrations">
    Enable GA4, Google Ads, Meta, TikTok, ChatGPT Ads, or GTM in your account and start
    measuring.
  </Card>
</CardGroup>