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

# Appearance

> Style your agent's chat widget to match your brand — colors, avatar, and the chat bubble.

**Appearance** controls how your agent looks to visitors: its colors, avatar, and
the floating chat bubble. Set it so the widget feels like a native part of your
site.

Open **Agent UI → Appearance** from the agent sidebar.

## Prerequisites

* An agent (see [Create an agent](/building/create-agent)).

## Customize the look

<Steps>
  <Step title="Open Appearance">
    In the agent sidebar, go to **Agent UI → Appearance**.
  </Step>

  <Step title="Set your brand colors">
    Choose colors for the widget so it matches your site's palette.
  </Step>

  <Step title="Add an avatar / image">
    Upload an avatar or image to represent the agent in the chat.
  </Step>

  <Step title="Position the chat bubble">
    Choose where the floating chat bubble sits (for example, the bottom-right
    corner).
  </Step>

  <Step title="Save & preview">
    Save your changes and check the preview to see how the widget looks.
  </Step>
</Steps>

<Frame>
  <img src="https://mintcdn.com/a2v2ai/ItYQQYTHsiiRmr-t/images/customize/appearance.png?fit=max&auto=format&n=ItYQQYTHsiiRmr-t&q=85&s=54c5d52fa02951a046584414e0a5b64a" alt="The Appearance panel with brand colors and avatar set, with a live preview." width="1440" height="900" data-path="images/customize/appearance.png" />
</Frame>

## Options reference

| Option                   | What it controls                              |
| ------------------------ | --------------------------------------------- |
| **Colors**               | The widget's accent/brand colors.             |
| **Avatar / image**       | The picture shown for the agent in chat.      |
| **Chat bubble position** | Where the floating launcher sits on the page. |

<Note>
  Appearance settings apply to the embedded widget and the hosted chat. After you
  publish, your live widget reflects the saved appearance.
</Note>

## Tips

<Tip>
  * Match your **primary brand color** for a seamless look.
  * Use a recognizable avatar (your logo or a friendly mascot) — it increases
    engagement.
  * Preview on both desktop and mobile widths before embedding.
</Tip>

## Related

<CardGroup cols={2}>
  <Card title="Message customization" icon="message" href="/customize/messages" />

  <Card title="Embed & install" icon="code" href="/embed/install" />

  <Card title="Visibility" icon="eye" href="/embed/visibility" />
</CardGroup>