> ## Documentation Index
> Fetch the complete documentation index at: https://agenvik.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Web chat channel — customise your AI agent widget

> Set your Agenvik chat widget's display name, greeting message, input placeholder, and brand color before embedding it on your website.

The **Channel** card controls how your Agent appears in the web chat widget.

## What you will learn

* How to set web chat labels and messages
* How to choose the primary color
* How to preview the visitor experience
* Where to go when you are ready to install the widget

## Open the Channel card

Open an Agent and find **Channel**.

<Frame>
  <img src="https://mintcdn.com/arokart/bVqC9z00iBm9fRgB/images/product-ss/web-channel-settings.png?fit=max&auto=format&n=bVqC9z00iBm9fRgB&q=85&s=6e3afb8cd4831dc0bf0498aa5a4dd16b" alt="Web Channel settings placeholder" width="1512" height="943" data-path="images/product-ss/web-channel-settings.png" />
</Frame>

## Configure display text

Set the fields visitors will see in the web chat:

* **Display Name**: the name shown in the chat header
* **Subtitle**: short supporting text under the display name
* **Welcome Message**: the first message visitors see
* **Input Placeholder**: helper text inside the message box

Use language that matches your Agent's job. A support Agent might say, `Ask me about setup, billing, or troubleshooting.`

## Choose the primary color

Set **Primary Color** to match your brand or website accent color. Use a valid hex color such as `#301B69`.

<Frame>
  <img src="https://mintcdn.com/arokart/bVqC9z00iBm9fRgB/images/product-ss/web-channel-color.png?fit=max&auto=format&n=bVqC9z00iBm9fRgB&q=85&s=e01b0aa18cd43f8bdc7d028a5493cbf3" alt="Web Channel color placeholder" width="1512" height="943" data-path="images/product-ss/web-channel-color.png" />
</Frame>

## Preview the widget

Use **Web Preview** on the Agent page to check the first impression before launch.

<Frame>
  <img src="https://mintcdn.com/arokart/bVqC9z00iBm9fRgB/images/product-ss/agent-preview.png?fit=max&auto=format&n=bVqC9z00iBm9fRgB&q=85&s=e8cd2f0842d1031234a3b3a7e3136655" alt="Web Preview placeholder" width="1512" height="943" data-path="images/product-ss/agent-preview.png" />
</Frame>

Check that:

* The welcome message is clear
* The placeholder invites the right questions
* The color works on light and dark website sections
* The Agent gives useful fallback responses

## Install on your website

When the Agent is ready, use the Developer Guide to install the web widget.

<Card title="Install the web widget" icon="code" href="/developer-guide/install-web-widget">
  Follow the website setup flow and verify the widget after publishing.
</Card>

## Next steps

<CardGroup cols={2}>
  <Card title="Configure before launch" icon="check-circle" href="/developer-guide/configure-before-launch">
    Run the pre-launch checklist.
  </Card>

  <Card title="Conversations" icon="message-circle" href="/user-guides/inbox/conversations">
    Review visitor chats after the widget is live.
  </Card>
</CardGroup>