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

# Chat widget text and appearance

> Set your chat widget's name, welcome messages, quick replies, colours, position and size on the AI Agent page, and check each change in the live preview.

# Chat widget text and appearance

Go to **AI Agent** in the sidebar. The page is titled **Chat Widget UI Configuration**. The live
preview on the right shows your changes as you make them (on a phone, switch to **Live Preview**).
Click **Publish** (or **Save changes**) to put them live on your website.

<Frame caption="Illustration of the Appearance tab: colours, position and size on the left, the live preview on the right.">
  <img src="https://mintcdn.com/zynfoai/TpFuLv_P_rJXw8fL/images/ui/website-chat-widget-hero.png?fit=max&auto=format&n=TpFuLv_P_rJXw8fL&q=85&s=899cfe093b7079f050f3e6ba23729c5d" alt="Chat Widget UI Configuration page on the Appearance tab with Primary Theme, Header Gradient, Widget Position, Border Radius, Font Size, Width and Height, next to a live widget preview" width="2380" height="1192" data-path="images/ui/website-chat-widget-hero.png" />
</Frame>

## General tab: what the widget says

* **Agent Name:** the name at the top of the widget (up to 50 characters).
* **Description:** a short line about what the agent helps with.
* **Chat Input Placeholder Text:** the grey text in the message box, such as "Ask me a question...".
* **Capabilities Message (Greeting):** how the agent describes what it can help with.
* **Fallback Message (Unknown Query):** what the agent says when it can't find an answer.

<Frame caption="Illustration of the Fallback Message and how it appears when the agent has no answer.">
  <img src="https://mintcdn.com/zynfoai/TpFuLv_P_rJXw8fL/images/ui/faq-automation-2.png?fit=max&auto=format&n=TpFuLv_P_rJXw8fL&q=85&s=a2d88480bd7304e3f0f2116e3f1446d9" alt="Fallback Message (Unknown Query) field and a chat where the agent replies with that message" width="1008" height="598" data-path="images/ui/faq-automation-2.png" />
</Frame>

* **Welcome Messages:** the first messages a visitor sees. Click **Add Welcome Message** to add more
  than one.
* **Prebuilt Messages (Quick Replies):** buttons a visitor can tap instead of typing, such as "Track my
  order". Click **Add Quick Reply** to add one.

The same tab has the widget's behaviour settings. See [Widget behaviour and settings](/agent-management/advanced-settings).

## Appearance tab: how the widget looks

* **Match your website:** click **Use my website's brand** to fill in the logo and main colour from
  your workspace's website (the one you trained the agent on). Check the preview, then save. If
  nothing is found, set them yourself below.
* **Logo:** an image address (`https://…`) shown at the top of the chat, next to the agent's name. A
  square image works best. Click **Remove** to go back to no logo.
* **Primary Theme:** your brand colour, used for buttons and the visitor's messages. Pick it or type a
  hex code.
* **Header Gradient:** the second colour in the widget header.
* **Widget Position:** **Bottom Right (Recommended)**, **Bottom Left**, **Top Right** or **Top Left**.
* **Border Radius (px):** how rounded the corners are, from 0 to 30.
* **Width (px)** and **Height (px):** the size of the open chat window (width 280–500, height 350–750).
* **Font Size (px):** from 11 to 18.

## Related topics

* [Widget behaviour and settings](/agent-management/advanced-settings)
* [Styling beyond these settings](/agent-management/custom-css)
* [Add the widget to your website](/embed/html-embed)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.