> ## 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.
# How the Restoo Widget Works
> The three ways to install the Restoo widget, the four pieces around it, and who is responsible for what.
The widget is the form your guests book and buy on. It can appear inside your own site, or on a page Restoo hosts for you.
Around it sit four more pieces: **three to measure** and **one to decide** what may go out to your platforms.
## The three ways to install it on your site
* **Modal over your page** *(recommended)*: a button opens the form on top of your site, full screen on mobile. You install it with Restoo.js.
* **Inline in your page**: the form appears as part of the content, also with Restoo.js.
* **Hosted on Restoo**: your guests book on your Restoo page and you just link to it, without touching code.
The first two leave the form **embedded in your site**; the third leaves it **hosted on Restoo**. That is what the rest of this guide calls them.
**You can combine them.** And the link to your Restoo page does not have to stay on your site: it works just as well in your Google profile, your socials, or your newsletter.
### Which one should I use?
**We recommend the modal over your page** in almost every case:
* **Your guests never leave your page**: they book right there, without you sending them somewhere else.
* **Better SEO and cheaper campaigns**: the widget is not downloaded on every visit, only when someone
clicks the button, so your page loads faster. That lifts your PageSpeed score, which affects both
your SEO and what your campaigns cost.
* **A better experience on mobile**: it opens full screen, so your site's navigation stays visible
and fixed.
* **No layout conflicts**: it renders in its own fixed layer, isolated from your page's CSS, its
width constraints, and whatever surrounds it.
## What each piece does
| Piece | What it does | What you do, and where |
| --------------------------------------------------------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
| [**The widget**](/widget/quickstart) | Takes what your guests book and buy | Configured in your Restoo account, and installed with Restoo.js if you embed it |
| [**Integrations**](/widget/integrations) | Declares your analytics and advertising platforms, once | Configured in your Restoo account |
| [**Restoo Connect**](/widget/connect) | Translates every booking step into the event each platform expects | Nothing: it loads with the widget |
| [**Consent**](/widget/consent) | Decides what is sent to each platform and what isn't | Collected in your cookie notice, or Restoo's if you host it |
| [**Restoo Attribution Transfer**](/widget/attribution-transfer) | Keeps the campaign and the ad click alive while the visitor browses your site | Installed on every page of your site |
## How the pieces fit together
```mermaid theme={null}
flowchart TD
V(["Visitor"]) --> A["Your campaign,
your socials,
your Google profile, etc."]
V -->|arrives directly| W
A --> W["The widget"]
A -->|if they land on another page| S
subgraph S["Every page of your site"]
U["Restoo Attribution Transfer"]
end
U -->|carries the campaign
from page to page| W
W -->|the booking, with its attribution| R["Your bookings book,
and the customer record"]
W -->|events| C["Restoo Connect"]
I["Integrations"] -.->|which destinations| C
C --> K{"Consent"}
K -->|analytics granted| P["GA4"]
K -->|advertising granted| Q["Google Ads
Meta · TikTok · ChatGPT Ads"]
K -->|informed, even if denied,
and only from your site| G["Your GTM container,
and your tags from there"]
K -->|no answer| Z(["Nothing goes out"])
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
```
**The booking is stored whatever happens**: what depends on consent is its attribution, and which destinations receive the event.
## Responsibilities, embedded or hosted
The difference is mostly in **who puts the measurement tags in place, and who asks for consent and passes the decision on**.
```mermaid theme={null}
flowchart LR
subgraph A["Hosted on Restoo"]
direction TB
KA["Restoo's cookie
notice"] -->|the decision| WA["The widget"]
WA -->|events| CA["Restoo Connect"]
CA --> TA["The tags from your
Integrations: GA4, Google Ads,
Meta, TikTok, ChatGPT Ads"]
end
subgraph E["Embedded in your site"]
direction TB
KE["Your cookie notice"] -->|the decision| SE["Restoo.js"]
SE -->|mounts the widget| WE["The widget"]
UE["Restoo UTM
Transfer"] -->|the campaign| WE
WE -->|events| CE["Restoo Connect"]
CE --> TE["Your tags: GA4, Google Ads,
Meta, TikTok, ChatGPT Ads,
and your GTM container"]
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
```
The full split:
| Responsibility | Hosted on Restoo | Embedded in your site |
| ------------------------------------------------------------------------------- | -------------------- | --------------------------------------------------------- |
| Installing Restoo.js on your site | Restoo | You |
| Installing Restoo Attribution Transfer on your site, and asking for its consent | You | You |
| Adjusting the form's appearance: colors and fonts | You, in your account | You, in your account or in code |
| Putting the measurement tags on the page | Restoo | You |
| Sending each event in the format each platform expects | Restoo Connect | Restoo Connect, or you if you listen to the widget events |
| Asking the visitor for consent | Restoo | You |
| Passing that decision to the widget | Restoo | You |
| Applying that decision per destination | Restoo Connect | Restoo Connect, or you if you listen to the widget events |
| Configuring your GTM container's Consent Mode | N/A: GTM never loads | You |
## Next steps
Put the widget on your site and start taking bookings.
Enable GA4, Google Ads, Meta, TikTok, ChatGPT Ads, or GTM in your account and start measuring.