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

# Appearance

> Make the chat widget match your brand: colors, icons, position, and behavior.

Open **Appearance** in your chatbot's sidebar to control how the widget looks
and behaves on your site. The editor shows a live preview as you change
settings. Select **Save Changes** when you are done; visitors get the new
look on their next page load.

## Identity

| Setting                                                    | What it does                                                                                       |
| ---------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| **Chatbot Name**                                           | The name shown in the chat header.                                                                 |
| Welcome message and tooltip                                | The greeting inside the chat and the small bubble text that invites clicks.                        |
| **Input Placeholder Text**                                 | The hint text in the message box.                                                                  |
| **Disclaimer Text (Markdown)**                             | Optional terms shown before chatting, with **Hide Terms After Acceptance** to show them only once. |
| **Call to Action (Text / Link)** and **External Link URL** | Optional links in the widget chrome.                                                               |

## Colors and type

Set your brand colors (including **Icon Background Color** and
**Link Color**), the **Font Size** (default 16px), and **Enable Dark Mode**
for dark-themed sites.

## Icons

Upload custom icons for the bot avatar, user avatar, agent avatar, and the
chat bubble itself. Icon size options run from Small through 5XL.

## Position and size

| Setting                                                                  | What it does                                                                         |
| ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ |
| **Chat Height (in %)**                                                   | How tall the chat window is relative to the page. 70 to 80 percent suits most sites. |
| **Distance from Bottom (in px)** and **Horizontal Distance (in px)**     | Where the bubble sits on desktop.                                                    |
| **Distance from Bottom on Mobile** and **Horizontal Distance on Mobile** | The same, tuned separately for phones.                                               |

## Auto-open

**Delay to open chat window** (separate values for desktop and mobile, in
seconds) opens the chat automatically after the visitor has been on the page
that long. Leave it unset to open only on click.

## Hide parts of the widget

Toggles to simplify the widget: **Hide Bottom Navigation**,
**Hide Expand Button**, **Hide Feedback Buttons**, **Hide Home Page**,
**Hide Refresh Button**, **Hide Sources**, and **Hide Tooltip**.

<Tip>
  **Hide Sources** removes the citation links under answers. Keep sources
  visible for support bots; they let visitors verify answers and read more.
</Tip>

## Beyond the editor

* Custom CSS can restyle the widget further at runtime through the
  [SDK](/docs/developers/sdk) (`['set', 'css', ...]`).
* Removing the "Powered by SiteGPT" branding is a paid add-on; see
  **Billing** in your dashboard.

<iframe width="100%" height="400" src="https://www.youtube.com/embed/3VfnmuLiTB0" title="Appearance walkthrough" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />