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

# Migrar la instalación del widget

> Cambia el iframe de la v1 por Restoo.js, el script de la v2.

**Esta guía es para ti si el formulario de reserva aparece dentro de tu propia web**, con un `<iframe>` que apunta a `myrestoo.net`: ese código hay que sustituirlo. Si tus clientes reservan en una página de Restoo, ve a la [guía para alojado en Restoo](/es/widget/migration-hosted).

## Requisitos previos

* **Acceso al código de tu web.**
* **Tu Account ID de Restoo**: el identificador corto de tu local dentro de Restoo. Es la primera parte de la dirección desde la que accedes a tu formulario de reservas o a tu libro de reservas: en `https://best-burger.myrestoo.net`, el Account ID es `best-burger`. Si no lo tienes claro, pregunta a tu contacto en Restoo.

<Tip>
  Haz el cambio en una franja tranquila del día y comprueba que el botón o el
  formulario funciona **justo después**, antes de dar el trabajo por terminado.
</Tip>

## Cómo sustituir el código de instalación

<Steps>
  <Step title="Localiza el código de la v1 y bórralo">
    Busca un bloque parecido a este y **bórralo por completo**:

    ```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="Pega el código de la v2">
    Tienes dos opciones: usa una o las dos.

    <Tabs>
      <Tab title="Modal sobre tu página (recomendado)">
        [Recomendamos esta opción](/es/widget/intro#¿cuál-me-conviene) para casi cualquier web. En lugar de mostrar el formulario dentro de la página, un botón —«Reservar», por ejemplo— lo abre en una ventana emergente.

        ```html theme={null}
        <!-- Este es el botón que abre el formulario de reservas -->
        <button data-restoo-open>Reservar</button>

        <!-- Esta parte va al final de la página, después de tus etiquetas de medición -->
        <script type="module" src="https://best-burger.myrestoo.net/js/restoo-widget"></script>
        <script>
          window.addEventListener("restoo:loaded", () => {
            window.Restoo("best-burger").bindTriggers();
          });
        </script>
        ```

        Sustituye `best-burger` por tu propio Account ID **en los dos sitios**. Puedes poner el atributo `data-restoo-open` en **tantos botones o enlaces como quieras** por toda tu web —menú, cabecera, pie— y todos abrirán el mismo modal de reservas.

        Para la configuración completa, consulta la [guía rápida de instalación](/es/widget/quickstart#modal-sobre-tu-p%C3%A1gina-recomendado).
      </Tab>

      <Tab title="Incrustado en la página">
        Si prefieres mantener el formulario dentro de una página, como en la v1, usa esto:

        ```html theme={null}
        <!-- Aquí aparecerá el formulario de reservas -->
        <div id="restoo-widget"></div>

        <!-- Esta parte va al final de la página, después de tus etiquetas de medición -->
        <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>
        ```

        Sustituye `best-burger` por tu propio Account ID **en los dos sitios**.

        Para la configuración completa, consulta la [guía rápida de instalación](/es/widget/quickstart#integrado-en-tu-p%C3%A1gina).
      </Tab>
    </Tabs>

    <Info>
      Puedes **combinar las dos opciones** en la misma web: por ejemplo, un botón
      de «Reservar» en la cabecera y el formulario incrustado en tu página de
      reservas.
    </Info>
  </Step>

  <Step title="Comprueba que funciona">
    Abre tu web en otro navegador o en una ventana privada y confirma que el botón o el formulario aparece correctamente y que puedes **completar una reserva de prueba de principio a fin**.
  </Step>
</Steps>

## Cuando hayas terminado

**Si mides tus campañas o usas UTM tags, te queda una segunda parte.** El cambio de instalación afecta a cómo se mide la reserva, y eso se revisa en la [guía de migración de marketing y analítica](/es/widget/migration-embedded-marketing). Si de tus campañas se encarga una agencia, esa es la guía que hay que reenviarle.

Si no mides nada, ya has terminado.

## Preguntas frecuentes

<AccordionGroup>
  <Accordion title="¿Perderé reservas mientras hago el cambio?">
    No. El cambio surte efecto de inmediato.
  </Accordion>

  <Accordion title="¿Tengo que avisar a mis clientes o cambiar algo en Google o en redes sociales?">
    No. Tus enlaces actuales siguen funcionando.
  </Accordion>

  <Accordion title="Uso WordPress, Wix o Shopify: ¿dónde pego esto?">
    Normalmente, en la misma sección o plugin donde estaba el código de la v1:
    un bloque de «HTML personalizado» o el editor de la plantilla. Si no lo
    gestionas tú, pide a tu webmaster o a tu agencia que hagan el cambio
    siguiendo esta guía.
  </Accordion>

  <Accordion title="¿Y si además uso Google Analytics, Google Ads, Meta Pixel, TikTok Pixel, OpenAI Pixel, GTM o UTM tags?">
    Esa parte se actualiza por separado: consulta la [guía de migración de
    marketing y analítica](/es/widget/migration-embedded-marketing).
  </Accordion>
</AccordionGroup>

## ¿Necesitas ayuda?

Escríbenos a [soporte@restoo.me](mailto:soporte@restoo.me). Si de tu web se encarga una agencia o un webmaster externo, puedes reenviarles esta página: contiene todo el código que necesitan.