> For the complete documentation index, see [llms.txt](https://documentation.proto.cx/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://documentation.proto.cx/docs/modules/ai-agents/publishing/webchat.md).

# Webchat

{% hint style="info" %}
Webchat is Proto's embeddable chat popup for websites — free on every plan.
{% endhint %}

Visitors interact with the AI agent — and later a [live agent](/docs/modules/ai-agents/workflows-and-actions/human-handoff.md) — directly from your site. In the agent's **Publish** tab, create a Webchat channel or select an existing one from the table to open its settings.

***

## Basic settings

In the **Basics** accordion:

| Setting                                   | Description                                                                                                                                         |
| ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Name**                                  | Internal name distinguishing this channel from other Webchat instances.                                                                             |
| **Default chat language**                 | Language used at the start of a new chat. Available languages are set in the agent's [Agent settings](/docs/modules/ai-agents/manage-ai-agents.md). |
| **Icon**                                  | The channel's avatar, seen by live agents in the [Inbox](/docs/modules/inbox.md).                                                                   |
| **Allow attachments**                     | Lets people upload files and images to the chat.                                                                                                    |
| **Enable voice**                          | Lets people submit voice messages in addition to text.                                                                                              |
| **Enable emojis**                         | Shows an emoji picker in the message input.                                                                                                         |
| **Hide webchat if no live agents online** | Hides the popup entirely when no agent is online.                                                                                                   |

Select **Save** to confirm edits.

***

## Brand

In the **Brand** accordion, customise and preview the popup's appearance.

{% tabs %}
{% tab title="Welcome screen" %}
An optional page before the chat interface.

| Setting                   | Description                                    |
| ------------------------- | ---------------------------------------------- |
| **Enable welcome screen** | Toggles whether to include the welcome screen. |
| **Title**                 | The welcome screen heading.                    |
| **Description**           | The welcome screen subtitle.                   |
| **Start chat button**     | Text of the button used to launch a new chat.  |
| {% endtab %}              |                                                |

{% tab title="Chat screen" %}

| Setting                   | Description                                                                                         |
| ------------------------- | --------------------------------------------------------------------------------------------------- |
| **AI agent display name** | The name of the AI in the header.                                                                   |
| **Description**           | Subtext under the name in the header, e.g. "Replies immediately" — set for both AI and live agents. |
| **Message placeholder**   | Placeholder text in the input field.                                                                |
| {% endtab %}              |                                                                                                     |

{% tab title="Styles" %}

| Setting                 | Description                                                        |
| ----------------------- | ------------------------------------------------------------------ |
| **Border radius**       | Roundness of the popup corners.                                    |
| **Header colour**       | Background colour of the headers.                                  |
| **Message colour**      | Background colour of the person's message bubbles.                 |
| **Buttons colour**      | Used for buttons and quick reply options.                          |
| **AI agent icon**       | Avatar used in the toggle button, header, and next to AI messages. |
| **Popup toggle button** | Circle or rounded square.                                          |
| **Popup position**      | Bottom right or bottom left of the screen.                         |
| {% endtab %}            |                                                                    |
| {% endtabs %}           |                                                                    |

Select **Save** to confirm all edits.

***

## Pre-chat form

In the **Pre-Chat Form** accordion, define a form that opens before new chats.

| Setting                  | Description                                                                                                                                                                             |
| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Enable pre-chat form** | Toggles whether the form is applied before new chats.                                                                                                                                   |
| **Message**              | The title of the form.                                                                                                                                                                  |
| **Button text**          | The submit button's content.                                                                                                                                                            |
| **Form fields**          | Add, reorder, set placeholders, mark as **Required**, and delete. Field types: Name, Email, Phone number, or any [custom field](/docs/settings/teamspaces/custom-fields.md) for people. |

Select **Save** to confirm edits.

***

## Mobile behaviour

In the **Mobile Behaviour** accordion:

| Setting                           | Description                                                               |
| --------------------------------- | ------------------------------------------------------------------------- |
| **Mobile screen width threshold** | The mobile breakpoint.                                                    |
| **Fullscreen on mobile**          | Popup opens fullscreen on small screens.                                  |
| **Hide on mobile**                | Removes the toggle button and popup entirely.                             |
| **Mobile size**                   | Width and Height as a percentage of the viewport, when Fullscreen is off. |

***

## Test and deploy

In the **Setup** accordion, follow the **Test** link to try the AI agent in a webchat sandbox page.

To deploy, copy the **Deploy** script and paste it into the `<body>` tag of the webpages it should appear on.

***

## Related

{% content-ref url="/pages/wyk7vlROqPFPwdgyn5A0" %}
[Proactive messages](/docs/modules/ai-agents/publishing/webchat/proactive-messages.md)
{% endcontent-ref %}

{% content-ref url="/pages/Q8vjcCZyYoe2O9BUhiwc" %}
[Human handoff](/docs/modules/ai-agents/workflows-and-actions/human-handoff.md)
{% endcontent-ref %}