# Web widget — your AI agent's chat on your website

> Add a chat bubble answered by your watsi AI agent to your website. How to create the widget, customize it, restrict it to your domain and install it.

Source: https://docs.watsi.ai/en/channels/web-widget

The **web widget** puts a chat bubble answered by your watsi AI agent on your website. You create it under **Integrations → Web Widget**, pick colors, title and position, authorize your domain and paste a snippet before your site's `</body>` tag. Conversations land in the same inbox as WhatsApp, and the agent replies with its Web channel setup.

> **Note**
> The web widget doesn't show up in Integrations for real-estate accounts.

## Create your widget

### Open Web Widget
    In **Integrations**, on the **Web Widget** card ("Chat on your website"), click **Configure**.
### Name it
    Type the **Widget name** (for example, "Main site chat") and click **Create Widget**.
### Customize the appearance
    Under **Appearance** choose **Color**, **Title**, **Subtitle**, **Position** (**Left** or
    **Right**), **Style** (**Soft** or **Soft + Glass**), **Theme** (**Automatic**, **Light** or
    **Dark**) and whether you want a **Sound** when sending and receiving messages. The **Preview**
    updates instantly and you can **Simulate conversation**.
### Authorize your domain
    Under **Where it can appear**, add your site's domain (for example, `yourdomain.com`). The
    `www.` version is included automatically.

> **Warning**
  Without an authorized domain, anyone could use your widget on another site. Always add your site's
  domain.

## Install it on your site

### Copy your code
Under **Code for your site**, click **Copy**.
### Paste it on your site
Paste it right before `</body>` on your site (in your template, in Wix, WordPress or whatever builder you use).
### Check that it loaded
The bubble shows up in the corner you chose. In watsi, the widget goes from **Awaiting installation** to **Connected**, and you'll see **Detected live on your site** as soon as it loads for the first time.

## Turn on the Web channel agent

If the widget shows **No active agent**, the agent isn't replying on your site yet. Click **Activate in the Playground** and turn the agent on for the Web channel.

## Related

- [Instagram & Messenger](/channels/instagram-messenger)
    Answer Meta direct messages too.
- [Origin channels](/channels/source-links)
    Trackable WhatsApp links per campaign.