# Appearance (/docs/customizing/appearance)

The agent's **Appearance** tab controls how the widget looks on your site. The preview on the right updates as you make changes. Switch it between **Launcher**, **Input**, **Chat** and **Walkthrough** to check each part of the widget, and use **Dark** to see it in dark mode.

<Screenshot label="The Appearance tab, with the settings on the left and the live preview on the right" src="/screenshots/appearance.webp" alt="The Appearance tab, with text and icon settings on the left and a live preview of the chat panel on the right" />

## Text [#text]

| Setting | What it changes | Limit |
| --- | --- | --- |
| **Assistant name** | The title at the top of the chat panel. Defaults to your agent's name. | 40 characters |
| **Launcher text** | The label on the button visitors click to open the widget. Defaults to "Get help". | 30 characters |

## Icon [#icon]

Replace the Skavelo mark with your own icon in the launcher, the input bar and while the widget is thinking. Use a square PNG, JPG, WebP or SVG image of up to 100 KB.

## Colors [#colors]

| Setting | What it changes |
| --- | --- |
| **Accent** | Highlights, the launcher glow and the walkthrough step marker |
| **Panel background** | The background of the chat panel |
| **Text** | The text color in the chat panel |

Leave **Panel background** and **Text** set to **Automatic** to follow each visitor's light or dark mode setting. If you choose both, the page warns you when the contrast is too low to read comfortably.

## Highlight [#highlight]

How walkthroughs mark the button to click. See [Highlight styles](/docs/customizing/highlight-styles).

## Position [#position]

Place the widget at the **Bottom left**, **Bottom center** or **Bottom right** of the screen.

## Saving [#saving]

Click **Save changes** in the bar below the tabs. Live sites pick up the new appearance on their next page load. **Discard** returns to your last saved settings.

<Callout title="Settings in code take priority">
  If your install snippet passes a `theme` to `Skavelo.init`, those values override what you set here. See the [SDK reference](/docs/developers/sdk-reference).
</Callout>

## Skavelo branding [#skavelo-branding]

On the Free plan, the chat panel shows "Powered by Skavelo". Paid plans can remove it; see [Plans and billing](/docs/account-team-billing/plans-and-usage).

<Callout type="info" title="See it in action">
  Examples and answers to common questions are on the [Appearance page](https://skavelo.com/features/appearance) on skavelo.com.
</Callout>