# Make the chat look like your brand

Agent: set the chat's avatar, launcher, colors, font, corners, dark mode, animations and sounds so Darwin's chat matches your website, with a live preview.

This is the Markdown version of https://www.meetdarwin.ai/help/agent/chat-appearance, published by Darwin and generated on 27 October 2026.

Find it in Darwin: Agent (https://app.meetdarwin.ai/admin/agent#studio-colors). Updated Oct 26, 2026.

The chat's look is on the **Agent** page, with your agent's name and opening message: select **Agent** in the sidebar. Every change shows in the preview on the right straight away. Your website keeps the saved design until you select **Save changes**.

_Screenshot: The Agent page with Agent selected in the sidebar: the Agent, Agent personality, Colors and Top of the chat sections, and the preview on the right with the opening message and launcher._

1. **Add your avatar and launcher image**

   Under **Agent**, **Upload image** beside **Avatar** adds the picture shown beside every message. **Launcher** sets the button visitors select to open the chat: **Default** uses your avatar, and **Custom** takes an image of its own. Both take a PNG, JPG, WebP or SVG under 5 MB. More in [Name, voice and opening message](https://www.meetdarwin.ai/help/agent/name-voice-and-opening).

   _Screenshot: The Agent section: Name marked 1, Upload image marked 2, and the Launcher choice of Default or Custom marked 3._

2. **Set your colors**

   Under **Colors**, enter a hex value or use the picker for each color: **Brand** for the launcher and send button, **Background** for the chat window, **Visitor messages**, **Agent messages**, and **Links** in replies. While your agent shows initials, **Avatar** sets the color behind them. Darwin keeps text readable on whatever you pick.

   _Screenshot: The Colors section: Brand, Background, Visitor messages, Agent messages, Links and Avatar, each with a swatch and hex value._

3. **Pick the font and corners**

   Under **Text and shape**, open **Font** (1) to see each font in its own typeface. Then choose the **Corners** (2): **Boxed**, **Rounded** or **Circle button**. **Circle button** only rounds the launcher.

   _Screenshot: The Text and shape section with the Font menu, set to DM Sans, marked 1 and the Corners choice of Boxed, Rounded or Circle button marked 2._

4. **Set dark mode, animations and sounds**

   Under **Chat preferences**, switch **Animations** and **Message sounds** on or off. Turn on **Dark mode** to show visitors whose device is set to dark a dark version of your colors.

   _Screenshot: The Chat preferences section with switches for Animations, Dark mode (highlighted) and Message sounds._

5. **Save your design**

   Select **Save changes** in the bar at the bottom of the editor. **Discard** goes back to the saved design. Then open your website to see it live.

   _Screenshot: The bar at the bottom of the editor reading Unsaved changes · kept in this tab, with Discard and Save changes, Save changes highlighted._

## Good to know

- Select the refresh icon in the preview's address bar to replay the opening.
- The consent line and privacy link under the message box are set in [Settings → Agent](https://www.meetdarwin.ai/help/agent/agent-settings), and save on their own.
- The chat shows the **Powered by Darwin** badge on every plan.

- [Add chat buttons to your website](https://www.meetdarwin.ai/help/buttons/chat-buttons): Buttons on your pages that open the chat and start the conversation.
- [Name, voice and opening message](https://www.meetdarwin.ai/help/agent/name-voice-and-opening): Your agent’s name, avatar, opening message and reply buttons.