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

# Guía rápida de instalación

> Pon el widget de Restoo en marcha en unos minutos, sin saber programar.

Solo necesitas tu **Account ID**, el identificador corto de tu local en Restoo. En los ejemplos de abajo usamos `best-burger` como valor de muestra.

<Tip>
  Tu Account ID es el subdominio que Restoo te asigna en `myrestoo.net`. Si
  gestionas tus reservas en `https://best-burger.myrestoo.net/myrestoo`, tu
  Account ID es `best-burger`.
</Tip>

Si no sabes cuál elegir, la [introducción](/es/widget/intro#las-tres-formas-de-instalarlo-en-tu-web) compara las tres y explica [por qué recomendamos el modal](/es/widget/intro#¿cuál-me-conviene).

<Tabs>
  <Tab title="Modal sobre tu página (recomendado)">
    <Steps>
      <Step title="Añade Restoo.js en tu web">
        Pega **Restoo.js** justo antes de la etiqueta de cierre `</body>`, y sustituye `best-burger` por tu Account ID.

        Si tu web ya carga etiquetas de medición (GA4, Google Ads, Meta, TikTok, ChatGPT Ads…), pégalo **después** de ellas: así no pierdes ningún evento de reserva.

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

      <Step title="Marca cualquier botón o enlace de tu web">
        Añade el atributo `data-restoo-open` a cualquier botón o enlace que deba abrir el formulario de reservas.

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

      <Step title="Conecta el botón con el widget">
        Añade este bloque justo debajo de Restoo.js. Se carga de forma diferida, así que la configuración va dentro de un `restoo:loaded`: es lo que garantiza que `window.Restoo` ya exista.

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

      <Step title="Listo">
        Recarga la página y haz clic en tu botón: el formulario de reservas se abre encima de tu página. Puedes poner el mismo atributo `data-restoo-open` en tantos botones o enlaces como quieras.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Integrado en tu página">
    <Steps>
      <Step title="Añade Restoo.js en tu web">
        Pega **Restoo.js** justo antes de la etiqueta de cierre `</body>`, y sustituye `best-burger` por tu Account ID.

        Si tu web ya carga etiquetas de medición (GA4, Google Ads, Meta, TikTok, ChatGPT Ads…), pégalo **después** de ellas: así no pierdes ningún evento de reserva.

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

      <Step title="Añade un contenedor donde incrustar el formulario">
        Añade un `<div>` vacío con un `id` único en donde deba aparecer el formulario de reservas dentro de tu página.

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

      <Step title="Monta el widget en tu contenedor">
        Añade este bloque justo debajo de Restoo.js, con el `id` del `<div>` que acabas de crear. Se carga de forma diferida, así que la configuración va dentro de un `restoo:loaded`: es lo que garantiza que `window.Restoo` ya exista.

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

      <Step title="Listo">
        Recarga la página: el widget de reservas ya aparece dentro de tu contenedor.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Alojado en Restoo">
    <Steps>
      <Step title="Localiza la dirección de tu página alojada en Restoo">
        Es la dirección desde la que gestionas tus reservas, sin el `/myrestoo` final: si entras por `https://best-burger.myrestoo.net/myrestoo`, la dirección de tu página alojada es `https://best-burger.myrestoo.net`.
      </Step>

      <Step title="Enlázala desde tu web">
        Pon esa dirección en el botón de «Reservar» de tu web. Vale cualquier botón o enlace que ya tengas.

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

      <Step title="Listo">
        [Todas las opciones de configuración](/es/widget/advanced-installation#alojado-en-restoo) están en tu cuenta de Restoo, sin tocar código.
      </Step>
    </Steps>

    <Tip>
      Ese mismo enlace puedes usarlo donde quieras: tu perfil de Google, la biografía de tus redes o tu newsletter.
    </Tip>
  </Tab>
</Tabs>

**Con esto ya se puede reservar.** Los siguientes pasos son opcionales, aunque muy recomendables: hacer que el widget parezca tuyo y que cada reserva llegue a tu analítica.

## Siguientes pasos

<CardGroup cols={2}>
  <Card title="Apariencia" icon="palette" href="/es/widget/appearance">
    Ajusta el widget a tu marca: colores y tipografías.
  </Card>

  <Card title="Configurar tus integraciones" icon="sliders" href="/es/widget/integrations">
    Activa GA4, Google Ads, Meta, TikTok, ChatGPT Ads o GTM en tu cuenta y empieza a medir.
  </Card>
</CardGroup>