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

# Widget Appearance

> Customize the look and feel of your chat widget — colors, fonts, theme, and more.

Make the widget match your brand. Go to your chatbot → **Settings** tab → **Appearance** sub-tab. All changes show in the **live preview** on the right.

## Color

| Setting           | Description                                                                                                     |
| ----------------- | --------------------------------------------------------------------------------------------------------------- |
| **Primary color** | The accent color used for buttons, links, and the chat bubble. Pick from 12 presets or enter a custom hex code. |

## Typography

| Setting         | Description                                        |
| --------------- | -------------------------------------------------- |
| **Font family** | Choose from 10 web-safe fonts for the widget text. |

## Theme

| Setting          | Options             | Description                                                                       |
| ---------------- | ------------------- | --------------------------------------------------------------------------------- |
| **Theme mode**   | Light, Dark, System | Controls the widget's color scheme. "System" follows the visitor's OS preference. |
| **Header style** | Branded, Simple     | "Branded" shows avatar + name in a colored header. "Simple" is a minimal top bar. |

## Layout

| Setting           | Range  | Description                                                                         |
| ----------------- | ------ | ----------------------------------------------------------------------------------- |
| **Corner radius** | 0–32px | Controls how rounded the widget corners are. 0 = sharp squares, 32 = fully rounded. |

## Text Content

| Setting                 | Description                                                              |
| ----------------------- | ------------------------------------------------------------------------ |
| **Welcome text**        | The greeting shown when the widget opens (also editable in Bot Identity) |
| **Message placeholder** | Placeholder text in the input field (e.g. "Type a message...")           |
| **Footer text**         | Custom footer text (available for whitelabel users)                      |
| **Footer note**         | Additional small text at the bottom of the widget                        |
| **Info dialog text**    | Content shown when visitors click the info icon                          |

## Legal Links

| Setting                  | Description                                                |
| ------------------------ | ---------------------------------------------------------- |
| **Terms of Service URL** | Link to your ToS page. Shown in the widget's info section. |
| **Privacy Policy URL**   | Link to your privacy policy. Shown alongside ToS.          |

## Widget Language

Set the language for all UI elements in the widget (buttons, placeholders, system messages). **English** (`en`) is the default. You can choose any of these **14** codes:

| Code | Language   | Native name |
| ---- | ---------- | ----------- |
| `en` | English    | English     |
| `cs` | Czech      | Čeština     |
| `de` | German     | Deutsch     |
| `es` | Spanish    | Español     |
| `fr` | French     | Français    |
| `sk` | Slovak     | Slovenčina  |
| `pt` | Portuguese | Português   |
| `it` | Italian    | Italiano    |
| `pl` | Polish     | Polski      |
| `nl` | Dutch      | Nederlands  |
| `sv` | Swedish    | Svenska     |
| `tr` | Turkish    | Türkçe      |
| `hu` | Hungarian  | Magyar      |
| `uk` | Ukrainian  | Українська  |

This is independent of the chatbot's response language — the AI responds based on the system prompt and the language of the user's question.

## Live Preview

The right side of the Appearance settings shows a **live conversation preview** that updates as you change settings. It renders:

* The header with your chosen style
* A sample conversation with message bubbles
* The input field with your placeholder text
* The chat bubble with your primary color

<Tip>
  Test both light and dark modes in the preview. Some color combinations look great in light mode but have poor contrast in dark mode.
</Tip>