# Install the chat widget with a script tag

> Add the intoCHAT chat bubble to any website with one script tag: where to paste it, the data-chatbot-id attribute, single-page apps and common mistakes.

One script tag adds the intoCHAT chat bubble to any website where you can edit the HTML. The tag only carries your agent ID. Everything else loads from intoCHAT, so later changes don't require touching your site.

## Get the snippet

1. Open your agent and go to the **Share** tab. It becomes available once the agent is saved.
2. On the **Bubble Chat** card, click **Copy Code**. The snippet already contains your agent ID.

```html
<script src="https://www.intochat.ai/api/embed.js" data-chatbot-id="YOUR_AGENT_ID"></script>
```

By default, any website that has this snippet can show your agent. To limit it to your own sites, set [allowed domains](/en/docs/allowed-domains).

## Where to paste it

Paste the script just before the closing `</body>` tag, on every page where the chat should appear. The simplest place is a global footer, layout or template that all pages share.

The end of the body is the recommended place, but the script also works in the `<head>`: it waits until the page has loaded before it builds the launcher. If your platform only offers a head field, paste it there.

If the same snippet ends up on a page twice, for example once in your theme and once through a plugin, only the first copy adds a launcher and the second is ignored. Snippets for different agents each add their own launcher.

## Attributes

| Attribute | Required | Description |
|---|---|---|
| `src` | Yes | Always `https://www.intochat.ai/api/embed.js` |
| `data-chatbot-id` | Yes | The ID of the agent to load, shown on the **Share** tab |

There are no other attributes. Colors, theme, font, position, launcher icon, tooltip, welcome messages, suggested questions, the welcome pop-up and auto-open are set on the [Appearance](/en/docs/appearance) tab.

The script reads `data-chatbot-id` from the script element that loaded it. Keep the attribute on that element. Tools that rewrite script tags can drop it: Google Tag Manager's Custom HTML tags do, which is why GTM needs [its own snippet](/en/integrations/google-tag-manager).

## What happens on the page

1. Once the HTML has loaded, the script fetches your agent's settings from intoCHAT.
2. It adds a round launcher to the bottom-left or bottom-right corner, with a short tooltip beside it. If you turned on the welcome pop-up or auto-open under **Launcher behaviour**, it shows them after the delay you set.
3. A click opens the chat in an iframe served by intoCHAT: a 380 × 600 pixel window on desktop, full screen on screens up to 768 pixels wide.
4. The widget stores a session ID in a cookie and in local storage on your site, so the conversation continues when the visitor opens another page.

## Single-page apps

The launcher is added to `document.body`, outside your app's root element. Client-side route changes don't affect it, so load the script once per full page load, not on every route change. If your framework replaces the entire `<body>` on navigation, the launcher is removed with it. Running the snippet again then puts the same launcher back instead of adding a second one.

For React and Next.js code, see [Next.js and React](/en/docs/nextjs-react).

## Content Security Policy

If your site sends a Content Security Policy, allow `https://www.intochat.ai` in:

- `script-src`, for the script
- `connect-src`, for loading the agent's settings
- `frame-src`, for the chat window

A custom launcher icon is an image on your page, so `img-src` must allow its address too.

## Check the installation

Reload a page on your site. The launcher should appear in the bottom corner within a few seconds. If it doesn't, open the browser's developer console:

- **"Chatbot not found."** The value of `data-chatbot-id` is wrong. Copy the snippet again from the **Share** tab.
- **"The embed script needs a data-chatbot-id attribute."** The attribute is missing, or a tool removed it from the tag. Copy the snippet again, or use the Google Tag Manager snippet if you load it through GTM.
- **"intoCHAT: this website is not in the allowed domains of this agent…"** The agent is limited to other sites. Add this site's domain on the **Share** tab under **Where this agent can appear**. See [Allowed domains](/en/docs/allowed-domains).
- **"intoCHAT: this agent is private…"** Switch off **Private agent** on the **Share** tab.
- **A Content Security Policy error.** Allow the addresses listed above.
- **No error and no request to intochat.ai.** The script isn't on the page, or an ad or privacy blocker stopped it. Test in a private window without extensions.

See [Troubleshooting](/en/docs/troubleshooting) for more cases.