# Installing the widget on your website

> Put the chat on every page of your website: copy a code from the console, paste it into the header and check that the widget appears.

Page: https://supportfast.ai/en/guide/website/install-widget/ · Section: Website · Updated on 30 October 2026

The widget is the chat on your website: a round button in a bottom corner of the page that opens the chat window when clicked. Your chat agent answers, with the instructions and knowledge you gave it. Conversations reach the console, in [Conversations](https://supportfast.ai/en/guide/conversations/inbox.md), together with those from your other channels.

The agent's Share tab offers three codes: the widget, in the Chat button panel, the link and the iframe. The link and the iframe are covered in [Full page and iframe](https://supportfast.ai/en/guide/website/full-page-and-iframe.md).

![The Share tab of the Agent profile with the Link and Direct Sharing, iFrame and Chat button panels; the Copy button of the Chat button panel is highlighted.](https://supportfast.ai/_astro/06-condividi-widget.CSIRY_6G.webp)

_Copy the Chat button code and paste it into the website's head tag._

> **Before you start**
>
> - A chat agent with the Active status, and access to the website's admin panel or files, or a web agency you can send the code to.

## Copy the code

1. **Open the Share tab**
   In the console, go to Chat agent › Agent profile › Share.

2. **Copy the widget code**
   In the Chat button panel, press Copy. The message “Copied to clipboard!” appears.

The code you copy looks like this:

**HTML · the widget code (sample agent code)**

```
<script defer id="supportfast-script" src="https://cdn.supportfast.ai/chatbot.js" data-chatbot-id="bot-a1b2c3d4e5"></script>
```

## Paste the code into your website

The code goes in the website's header, that is inside the `<head>` tag, right before `</head>`. Put it in the template shared by all pages, usually the theme header: this way the widget appears on the whole website.

- **As it is.** Always copy it from the console and paste it without changes, in Google Tag Manager too: if it changes, the widget doesn't appear.
- **Once per page.** A second code on the same page is ignored, even if it belongs to another agent. Different agents go on different pages.
- **At the bottom of the page too.** If your platform doesn't let you write in the header, the code also works right before `</body>`.

Choose the guide for your platform:

- [WordPress](https://supportfast.ai/en/guide/website/wordpress.md): With a plugin for custom code.

- [Shopify](https://supportfast.ai/en/guide/website/shopify.md): In the theme's theme.liquid file, before </head>.

- [HTML and other sites](https://supportfast.ai/en/guide/website/other-sites.md): HTML, Google Tag Manager, Wix, Squarespace, Webflow, Joomla, PrestaShop.

## The publishing domain

The publishing domain sets which website the widget can appear on; it doesn't restrict the link and the iframe. It's optional: if you leave it empty, the widget appears on any website that uses your code.

We recommend filling it in once the website is online. This way the widget doesn't appear on websites that aren't yours, even if someone copies the code.

1. **Open the general settings**
   Go to Chat agent › Agent profile › General, Agent Profile panel.

2. **Type the domain**
   In the Publishing Domain (Optional) field, type only the domain, all lowercase, without `https://` and without `www.`: for example `esempio.it`. With a capital letter, as in `Esempio.it`, the widget doesn't appear on any page.

3. **Save**
   Press Save changes in the bar at the bottom of the page. The message “Settings saved” appears.

With the domain `esempio.it` filled in, the widget behaves like this:

| Page address | Does the widget appear? |
| --- | --- |
| `esempio.it` and `www.esempio.it` | Yes. |
| `negozio.esempio.it` | No: a subdomain counts as a different website. |
| Another domain or a test address | No. |

Is your website on several domains or subdomains? Leave the field empty, or use one agent per website, each with its own domain.

> **Result**
>
> The widget appears on your website's pages, bottom right or bottom left depending on the Button position chosen in Interface. When clicked, it opens the chat with your agent.

## How to check

1. **Open the website in a private window**
   Private browsing shows you the website as a new visitor sees it. If the website uses a cache, clear it first.

2. **Look for the widget**
   Check the home page and a couple of inner pages.

3. **Ask a question**
   Open the chat and type a message: the agent must answer.

4. **Check the console**
   Open Chat agent › Conversations: the test conversation appears among those of the Web channel.

> **Tip**
>
> **Test the agent before putting it online.** With Test Chat, at the top of the agent's page, you talk to the same widget without touching the website: see [Testing and publishing](https://supportfast.ai/en/guide/chat-agent/test-and-publish.md).

## Widget, link and iframe: the differences

|   | Widget | Link and iframe |
| --- | --- | --- |
| Where it appears | On every page of the website, above the content | In a tab of its own or in a box on the page |
| Welcome bubble and closing X | Yes | No |
| Website page passed to the agent | Yes: the page's address and title | No |

In Conversations, chats from all three methods are in the Web channel.

> **Warning**
>
> **A widget and an iframe on the same page make two chats.** The visitor would see two separate conversations. Ask whoever looks after the website to hide the widget on the page with the iframe, using the CSS rule explained in [Widget JavaScript API](https://supportfast.ai/en/guide/developers/widget-api.md#moving-the-button-the-css-variables).

## Common problems

If the widget [doesn't appear](https://supportfast.ai/en/guide/help/widget-issues.md#the-widget-doesnt-show-on-the-website), appears [only when you scroll the page](https://supportfast.ai/en/guide/help/widget-issues.md#the-button-shows-only-after-a-while-or-when-i-scroll-the-page) or covers other elements, the causes and fixes are in [Website widget](https://supportfast.ai/en/guide/help/widget-issues.md).

## Frequently asked questions

**If I change the agent's colors or texts, do I have to reinstall the code?**

No: the code stays the same, and the changes you save in the console show up on the next visit.

## See also

- [What visitors see](https://supportfast.ai/en/guide/website/what-visitors-see.md): The button, the chat window and what people who use it can do.

- [Agent profile: Interface](https://supportfast.ai/en/guide/chat-agent/interface.md): Colors, texts, button position and welcome bubble.

- [Passing user data](https://supportfast.ai/en/guide/developers/user-data.md): Let the chat recognize customers who are already registered on your website.