> ## Documentation Index
> Fetch the complete documentation index at: https://document.botsmith.pro/llms.txt
> Use this file to discover all available pages before exploring further.
# Customize Your Chat Widget Appearance and Branding
> Brand your BotSmith chat widget with custom colors, logo, avatar, font, bubble style, and widget position to match your website design.
The **Appearance** tab lets you fully brand the chat widget that appears on your website. Change colors, upload a logo and avatar, pick a position, adjust fonts and bubble shapes, and more — all without touching code. Open your agent builder and click **Appearance** to access these settings.
After making your changes, click **Save Appearance**. To verify how everything looks on a live page, click **View Live Preview** to open a preview in a new tab.
Keep your primary color consistent with your brand's main call-to-action color. Visitors recognize your brand color as a cue to interact, which improves click-through rates on the chat launcher button.
## Colors
BotSmith gives you three independent color pickers:
| Color | Where it appears | Default |
| ------------------- | ------------------------------------------------- | ------------------------ |
| **Primary Color** | Widget header background and user message bubbles | `#7c3aed` (purple) |
| **Secondary Color** | Accents and secondary UI elements | `#a78bfa` (light purple) |
| **Accent Color** | Highlights, focus rings, and interactive elements | `#ec4899` (pink) |
Each picker includes a color swatch you can click to open a color wheel, plus a hex input field for precise values. A live swatch preview appears below the pickers so you can compare all three colors side by side before saving.
## Logo and Avatar
Add your brand imagery to make the widget feel native to your website.
| Image | Where it appears | Accepted formats | Max size |
| ---------- | ------------------------------------------------------------- | ------------------------ | -------- |
| **Logo** | Widget header, next to your agent's name | PNG, JPG, GIF, WEBP, SVG | 5 MB |
| **Avatar** | Displayed beside every bot message in the conversation thread | PNG, JPG, GIF, WEBP, SVG | 5 MB |
To upload either image, click the dashed upload area under **Logo** or **Avatar**, then select a file from your computer. BotSmith stores the image and applies it immediately on save. To replace an image, click **Change Logo** or **Change Avatar**. To remove it entirely, click the **✕** icon on the image preview.
## Widget Position
Choose where the chat launcher button appears on your visitors' screens.
| Option | Description |
| ---------------------------- | ----------------------------------------------------------------------- |
| **Bottom Right** *(default)* | Lower-right corner — the most common placement |
| **Bottom Left** | Lower-left corner — useful if other UI elements occupy the bottom right |
| **Top Right** | Upper-right corner |
| **Top Left** | Upper-left corner |
Select a position from the **Position** dropdown under **Widget Settings**.
## Widget Theme
Control the overall color scheme of the chat window.
| Theme | Description |
| -------------------- | --------------------------------------------------------------- |
| **Light** | White background with dark text |
| **Dark** | Dark background with light text — matches dark-mode websites |
| **Auto** *(default)* | Automatically follows the visitor's operating system preference |
Select a theme from the **Theme** dropdown.
## Font and Bubble Style
**Font family** — choose from a curated list of web-safe and popular fonts:
* Inter *(default)*
* Arial, Helvetica, Verdana, Trebuchet MS
* Georgia, Times New Roman
* Courier New
* Roboto, Open Sans
**Font size** — sets the base text size inside the chat window:
| Option | Size |
| ------------------ | ----- |
| Small | 14 px |
| Medium *(default)* | 16 px |
| Large | 18 px |
**Bubble style** — controls the border-radius of message bubbles:
| Style | Look |
| ----------------------- | ---------------------------------------------------- |
| **Rounded** *(default)* | Fully rounded corners — friendly and modern |
| **Smooth** | Slightly rounded corners — balanced and professional |
| **Square** | Sharp corners — clean and minimal |
## Widget Size
Controls the dimensions of the expanded chat window.
| Size | Width |
| ------------------ | ------ |
| Small | 360 px |
| Medium *(default)* | 420 px |
| Large | 500 px |
Choose the size that fits your page layout. On mobile devices the widget automatically adapts to fit the screen regardless of this setting.
## Auto-Expand
Toggle **Auto-expand Widget** to automatically open the chat window as soon as the page loads — without requiring the visitor to click the launcher button.
Use this on high-intent pages (like a contact page or a pricing page) where starting a conversation immediately is likely to help visitors. On most pages, leaving auto-expand off gives visitors the choice to engage on their own terms.
## Powered By Text
By default, BotSmith displays a small "Powered by BotSmith" attribution at the bottom of the chat widget.
On eligible paid plans you can customize or remove this text:
* **Custom text** — enter your own brand name (up to 50 characters). The widget will display "Powered by *Your Brand Name*".
* **Hidden** — leave the field empty and the attribution disappears entirely.
Custom branding (changing or removing the "Powered by BotSmith" attribution) requires a **Starter, Professional, or Enterprise** plan. Upgrade at [Account & Plans](/account/plans).