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

# Cómo funciona el widget de Restoo

> Las tres formas de instalar el widget de Restoo, las cuatro piezas que lo rodean y de quién es cada responsabilidad.

El widget es el formulario donde tus clientes reservan y compran. Puede aparecer dentro de tu web, o en una página que te aloja Restoo.

A su alrededor hay cuatro piezas más: **tres para medir** y **una para decidir** qué puede salir hacia tus plataformas.

## Las tres formas de instalarlo en tu web

* **Modal sobre tu página** *(recomendado)*: un botón abre el formulario encima de tu web, a pantalla completa en el móvil. Lo instalas tú con Restoo.js.
* **Integrado en tu página**: el formulario aparece como parte del contenido, también con Restoo.js.
* **Alojado en Restoo**: tus clientes reservan en tu página de Restoo y tú solo la enlazas, sin tocar código.

Las dos primeras dejan el formulario **incrustado en tu web**; la tercera lo deja **alojado en Restoo**. Así los llama el resto de esta guía.

**Puedes combinarlas.** Y el enlace a tu página de Restoo no tiene que quedarse en tu web: sirve igual en tu perfil de Google, en tus redes o en tu newsletter.

### ¿Cuál me conviene?

**Recomendamos el modal sobre tu página** en casi cualquier caso:

* **Tus clientes no se van de tu página**: reservan ahí mismo, sin que los mandes a otro sitio.
* **Mejor SEO y campañas más baratas**: el widget no se descarga en cada visita, sino cuando alguien
  pulsa el botón, así que tu página carga más rápido. Eso sube tu puntuación de PageSpeed, que
  influye tanto en el SEO como en el coste de tus campañas.
* **Mejor experiencia en móvil**: se abre a pantalla completa, así que la navegación de tu web
  sigue visible y fija.
* **Sin conflictos de maquetación**: se renderiza en su propia capa fija, aislada del CSS de tu
  página, de sus restricciones de anchura y del contenido que lo rodea.

## Qué hace cada pieza

| Pieza                                                              | Qué hace                                                                          | Qué hay que hacer, y dónde                                                      |
| ------------------------------------------------------------------ | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
| [**El widget**](/es/widget/quickstart)                             | Recoge lo que tus clientes reservan y compran                                     | Se configura en tu cuenta de Restoo, y se instala con Restoo.js si lo incrustas |
| [**Integraciones**](/es/widget/integrations)                       | Declara tus plataformas de analítica y publicidad, una sola vez                   | Se configura en tu cuenta de Restoo                                             |
| [**Restoo Connect**](/es/widget/connect)                           | Traduce cada paso de la reserva al evento que espera cada plataforma              | Nada: se carga con el widget                                                    |
| [**Consentimiento**](/es/widget/consent)                           | Decide qué se envía a cada plataforma y qué no                                    | Se recoge en tu aviso de cookies, o en el de Restoo si lo alojas                |
| [**Restoo Attribution Transfer**](/es/widget/attribution-transfer) | Conserva la campaña y el clic del anuncio mientras el visitante navega por tu web | Se instala en todas las páginas de tu web                                       |

## Cómo encajan las piezas

```mermaid theme={null}
flowchart TD
    V(["Visitante"]) --> A["Tu campaña, tus redes,<br/>tu perfil de Google, etc."]
    V -->|entra directo| W
    A --> W["El widget"]
    A -->|si aterriza en otra página| S

    subgraph S["Todas las páginas de tu web"]
        U["Restoo Attribution Transfer"]
    end

    U -->|conserva la campaña<br/>de una página a otra| W
    W -->|la reserva, con su atribución| R["Tu libro de reservas,<br/>y la ficha del cliente"]
    W -->|eventos| C["Restoo Connect"]
    I["Integraciones"] -.->|qué destinos| C
    C --> K{"Consentimiento"}
    K -->|analítica concedida| P["GA4"]
    K -->|publicidad concedida| Q["Google Ads<br/>Meta · TikTok · ChatGPT Ads"]
    K -->|informado, aunque deniegue,<br/>y solo desde tu web| G["Tu contenedor de GTM,<br/>y de ahí tus etiquetas"]
    K -->|sin respuesta| Z(["No sale nada"])

    style W fill:#246FE5,stroke:#1a53ac,color:#ffffff
    style C fill:#246FE5,stroke:#1a53ac,color:#ffffff
    style U fill:#246FE5,stroke:#1a53ac,color:#ffffff
    style I fill:#246FE5,stroke:#1a53ac,color:#ffffff
    style K fill:#a16207,stroke:#6f4400,color:#ffffff
    style Z fill:#6b7280,stroke:#4b5563,color:#ffffff
```

**La reserva se guarda pase lo que pase**: lo que depende del consentimiento es su atribución, y qué destinos reciben el evento.

## Responsabilidades según lo uses incrustado o alojado

La diferencia está sobre todo en **quién pone las etiquetas de medición, y quién pide el consentimiento e informa la decisión**.

```mermaid theme={null}
flowchart LR
    subgraph A["Alojado en Restoo"]
        direction TB
        KA["El aviso de cookies<br/>de Restoo"] -->|la decisión| WA["El widget"]
        WA -->|eventos| CA["Restoo Connect"]
        CA --> TA["Las etiquetas de tus<br/>Integraciones: GA4, Google Ads,<br/>Meta, TikTok, ChatGPT Ads"]
    end

    subgraph E["Incrustado en tu web"]
        direction TB
        KE["Tu aviso de cookies"] -->|la decisión| SE["Restoo.js"]
        SE -->|monta el widget| WE["El widget"]
        UE["Restoo UTM<br/>Transfer"] -->|la campaña| WE
        WE -->|eventos| CE["Restoo Connect"]
        CE --> TE["Tus etiquetas: GA4, Google Ads,<br/>Meta, TikTok, ChatGPT Ads,<br/>y tu contenedor de GTM"]
    end

    A ~~~ E

    style WA fill:#246FE5,stroke:#1a53ac,color:#ffffff
    style WE fill:#246FE5,stroke:#1a53ac,color:#ffffff
    style CA fill:#246FE5,stroke:#1a53ac,color:#ffffff
    style CE fill:#246FE5,stroke:#1a53ac,color:#ffffff
    style UE fill:#246FE5,stroke:#1a53ac,color:#ffffff
    style SE fill:#246FE5,stroke:#1a53ac,color:#ffffff
    style KA fill:#a16207,stroke:#6f4400,color:#ffffff
    style KE fill:#a16207,stroke:#6f4400,color:#ffffff
```

El reparto completo:

| Responsabilidad                                                           | Alojado en Restoo          | Incrustado en tu web                                    |
| ------------------------------------------------------------------------- | -------------------------- | ------------------------------------------------------- |
| Instalar Restoo.js en tu web                                              | Restoo                     | Tú                                                      |
| Instalar Restoo Attribution Transfer en tu web, y pedir su consentimiento | Tú                         | Tú                                                      |
| Ajustar la apariencia del formulario: colores y tipografías               | Tú, en tu cuenta           | Tú, en tu cuenta o en el código                         |
| Poner las etiquetas de medición en la página                              | Restoo                     | Tú                                                      |
| Enviar cada evento en el formato que espera cada plataforma               | Restoo Connect             | Restoo Connect, o tú si escuchas los eventos del widget |
| Pedirle el consentimiento al visitante                                    | Restoo                     | Tú                                                      |
| Informar esa decisión al widget                                           | Restoo                     | Tú                                                      |
| Aplicar esa decisión destino a destino                                    | Restoo Connect             | Restoo Connect, o tú si escuchas los eventos del widget |
| Configurar el Consent Mode de tu contenedor de GTM                        | No aplica: GTM no se carga | Tú                                                      |

## Siguientes pasos

<CardGroup cols={2}>
  <Card title="Guía rápida de instalación" icon="rocket" href="/es/widget/quickstart">
    Pon el widget en tu web y empieza a recibir reservas.
  </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>
