# Webchat

Publishing an AI agent to Webchat, Proto's embeddable chat interface for websites. This allows your audience to interact with the agent—and [subsequently with live agents](https://documentation.proto.cx/docs/modules/ai-agents/workflows-and-actions/human-handoff)—directly from the web.

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, the following options are available:

* **Name** — the internal name of the channel, used to distinguish from any other Messenger channels the agent is published to.
* **Default chat language** — the language used by the AI agent at the start of a new chat. Available languages are set in the agent's [General](https://documentation.proto.cx/docs/modules/manage-ai-agents#general) settings.
* **Icon** — the channel's avatar seen by live agents in the [Inbox](https://documentation.proto.cx/docs/modules/inbox) dashboard.
* **Allow attachments** — toggles if files and images can be uploaded to the chat.
* **Enable voice** — toggles if voice messages can be submitted in addition to text.
* **Enable emojis** — toggles if an emoji selection menu is available to text input.
* **Hide webchat if no live agents online** — toggles if the embedded webchat will appear on webpages or not depending on one or more live agents being online.

Press **Save** to confirm edits.

***

### Proactive Messages

See [Proactive Messages](https://documentation.proto.cx/docs/modules/ai-agents/publishing/webchat/proactive-messages), where the AI agent can send the initial popup message to engage website visitors.

***

### Brand

In the **Brand** accordion, customise and preview the Webchat popup's aesthetics:

#### Welcome Screen

The welcome screen is an optional page that precedes the chat interface.

* **Enable welcome screen** — toggles whether to include the welcome screen.
* **Title** — the welcome screen heading.
* **Description** — the welcome screen subtitle.
* **Start chat button** — the content of the button used to launch a new chat.

#### Chat Screen

The chat screen is where all messaging occurs.

* **AI** agent **display name** — the name of the AI in the header. If left empty will default to the **Name** defined in the Basic settings above.
* **Description** (for each of the AI and live agents) — subtext under the name in the head, e.g. "Replies immediately".
* **Message placeholder** — the placeholder text in the prompt input field.

#### Styles

* **Border radius** — a slider to set the 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** — the avatar used in the popup toggle button, chat screen header, and next to AI messages.
* **Popup toggle button** — toggles whether the toggle button is a **circle** or rounded **square**.
* **Popup position** — toggles whether the popup embeds on the **bottom right** or **bottom left** of the screen.

Press **Save** to confirm all edits.

***

### Pre-Chat Form

In the **Pre-Chat Form** accordion, define and preview a form that begins chats:

* **Enable pre-chat form** — toggles whether the form is applied before new chats.
* **Message** — the title of the form.
* **Button text** — the form submit button's content.
* **Form fields** — add, rearrange, set placeholder text, and delete form fields with the respective buttons. Also toggle whether or not a field is **Required** to submit the form. When adding a field, choose from the following types:
  * **Name**
  * **Email**
  * **Phone number**
  * Any [**custom fields**](https://documentation.proto.cx/docs/settings/teamspaces/custom-fields) for people.

Press **Save** to confirm edits.

***

### Mobile Behaviour

In the **Mobile Behaviour** accordion, configure the Webchat appearance on devices with small screens:

* **Mobile screen width threshold** — the mobile breakpoint. Screens with a width resolution equal to or smaller than this value will use these settings.
* Set whether the Webchat popup appears or not:
  * **Fullscreen on mobile** — Webchat appears as a fullscreen popup when toggled open.
  * **Hide on mobile** — the Webchat toggle button and popup are removed.
* **Mobile size** — when **Fullscreen on mobile** is set above, the popup is sized with the **Width** and **Height**, defined as a percentage of the viewport resolution.

***

## Test & Deploy

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

To deploy, copy the the **Deploy** script from the accordion and paste it anywhere into the `<body>`tag of the webpages it should appear in. It will embed as a toggleable popup on the bottom right of the page.