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

# Widget Appearance

> Customize how your chat widget looks so it matches your brand and fits your website.

The widget is the chat bubble visitors see on your site. You control how it
looks under **Settings → Appearance**. Every change auto-saves, and you can see
it live in the **Playground** preview.

## Appearance options

| Setting              | What it does                                                                             | Default                                    |
| -------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------ |
| **Action color**     | The accent color for buttons and highlights.                                             | Blue                                       |
| **Background color** | The color of the chat panel. Text contrast adjusts automatically so it stays readable.   | Light                                      |
| **Home wallpaper**   | A background pattern for the home screen, with its own color and opacity.                | None                                       |
| **Widget icon**      | The glyph on the launcher bubble – pick from 8 styles (chat, bot, headphones, and more). | Default                                    |
| **Widget position**  | Which side of the screen the launcher sits on – **Left** or **Right**.                   | Right                                      |
| **Custom logo**      | Your own logo, shown in the chat header in place of the default.                         | None                                       |
| **Custom footer**    | A small markdown link at the bottom of the panel, up to 200 characters.                  | "Powered by [Chatref](https://chatref.ai)" |
| **Language**         | The language for the widget's built-in text (buttons, placeholders).                     | English                                    |

## Customize the look

<Steps>
  <Step title="Open Appearance">
    Go to your agent's dashboard and open **Settings → Appearance**.
  </Step>

  <Step title="Set your colors">
    Pick an **Action color** for buttons, then a **Background color** for the
    panel. Text contrast is handled for you, so light or dark both stay
    readable.
  </Step>

  <Step title="Choose an icon and position">
    Pick one of the 8 **Widget icons** for the launcher bubble, then set its
    **Widget position** to **Left** or **Right**.
  </Step>

  <Step title="Add your branding">
    Upload a **Custom logo** for the header, and add a **Custom footer** link if
    you want – for example, an online coffee store might use
    `Powered by [Bean & Co](https://example.com)`.
  </Step>

  <Step title="Set a wallpaper (optional)">
    Turn on a **Home wallpaper** pattern, then tune its color and opacity to
    taste.
  </Step>
</Steps>

<Tip>
  Pick an **Action color** that stands out against your site so visitors notice
  the chat bubble. Keep the footer short – it is meant for a single credit or
  link.
</Tip>

## Light or dark mode

Dark mode is **not** an Appearance setting. It lives in **Settings → General**
as the **Dark Mode** toggle.

New bots start in **light mode**. If you want a dark widget, open
**Settings → General** and turn **Dark Mode** on. See
[Agent Settings](/agents/agent-settings) for the full General tab.

<Note>
  Dark mode switches the whole widget to a dark color theme. It is off by default
  for every new bot – you opt in.
</Note>

## Next steps

<CardGroup cols={2}>
  <Card title="Quick Actions" icon="bolt" href="/widget/quick-actions">
    Add up to 4 shortcut buttons – call, email, or a link – to the chat header.
  </Card>

  <Card title="Agent Settings" icon="gear" href="/agents/agent-settings">
    Find the Dark Mode toggle, language, and other general settings.
  </Card>
</CardGroup>