> ## 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.

# Change how the chat widget looks

> Set the colors, chat icon, position, welcome message, tooltip, and auto-open behavior of the chat widget on your website.

Use the **Appearance** page to make the chat widget match your website. All changes on this page apply to the widget on every website where you installed it.

## Before you start

* Role: Manager or higher on the chatbot. See [Invite and manage team members](/docs/guides/account/team-members).
* Your brand colors as hex codes, for example `#1D4ED8`.
* Optional: image files for your custom icons.

## Change colors

<Steps>
  <Step title="Open Appearance">
    In your chatbot's sidebar, under **Customizations**, select **Appearance**.
  </Step>

  <Step title="Set the Primary Color">
    In **Primary Color**, enter a hex code. The widget uses this color for the chat icon background, message bubbles, and other accents. If you leave it empty, the widget uses black (`#000000`).
  </Step>

  <Step title="Set the Text Color">
    In **Text Color**, enter the color for text that sits on the primary color. If you leave it empty, the widget uses white (`#FFFFFF`).
  </Step>

  <Step title="Set the icon and link colors (optional)">
    * **Icon Background Color** sets a different background for the chat icon. Leave it empty to use the primary color.
    * Turn on **Transparent Icon Background** to show no background and no shadow behind the icon. Use this with a transparent PNG icon.
    * **Link Color** sets the color of links in answers. Leave it empty to use the primary color.
  </Step>

  <Step title="Save">
    Select **Save Changes** at the bottom of the page.
  </Step>
</Steps>

To make the widget dark, turn on **Enable Dark Mode**. To change the text size, set **Font Size (in px)**. The widget uses 16 px when this field is empty.

## Change the chat icon

The chat icon is the round or square button that opens the chat.

<Steps>
  <Step title="Choose the size, position, and shape">
    In the **Chat Icon** section, set these fields:

    * **Chat Icon Size**: from **Small (48x48 px)** to **5XL (156x156 px)**. The default is **Small (48x48 px)**.
    * **Position**: **Bottom - Right** (default) or **Bottom - Left**.
    * **Icon Shape**: **Circle** (default) or **Square**.
  </Step>

  <Step title="Save">
    Select **Save Changes**.
  </Step>

  <Step title="Upload a custom icon (optional)">
    Below the **Chat Icon** section, use **Select Chat Bubble Icon** to upload the image for the chat icon. The upload saves immediately.
  </Step>
</Steps>

If you do not upload a chat bubble icon, the chat icon uses your bot icon. If you upload neither, it shows the SiteGPT logo on your primary color.

You can also upload the avatars that show next to messages: **Select Bot Icon** (the chatbot), **Select User Icon** (the visitor), and **Select Agent Icon** (a team member who takes over the conversation).

## Move the chat icon away from other buttons

If the chat icon covers another button on your site, such as a cookie banner or a "back to top" button, change the distance from the edge of the screen.

<Steps>
  <Step title="Set the desktop distances">
    In the **Chat Icon** section, set **Distance from Bottom (in px)** and **Horizontal Distance (in px)**. Both default to 16.
  </Step>

  <Step title="Set the mobile distances (optional)">
    Set **Distance from Bottom on Mobile (in px)** and **Horizontal Distance on Mobile (in px)**. If you leave them empty, the widget uses the desktop values.
  </Step>

  <Step title="Save">
    Select **Save Changes**.
  </Step>
</Steps>

**Chat Height (in %)** sets how tall the open chat window is, as a percentage of the browser window. The default is 85. On screens narrower than 640 px, the open chat always fills the full screen.

## Change the name, welcome message, and tooltip

These fields are in the **Content** section.

| Field                      | Where visitors see it                                                   |
| -------------------------- | ----------------------------------------------------------------------- |
| **Chatbot Name**           | In the chat header.                                                     |
| **Welcome Message**        | The first message in every new conversation.                            |
| **Tooltip**                | A small message above the chat icon, before the visitor opens the chat. |
| **Input Placeholder Text** | In the message box, before the visitor types.                           |

If **Tooltip** is empty, the tooltip shows the welcome message. If both are empty, it shows "Hello! How can I assist you today?".

The tooltip shows on each page load until the visitor closes the tooltip or opens the chat. After that, it stays hidden in that browser. To never show it, turn on **Hide Tooltip**.

## Open the chat automatically

You set auto-open separately for desktop and mobile.

<Steps>
  <Step title="Go to the Auto Open Chat Window section">
    Scroll to **Auto Open Chat Window** on the **Appearance** page.
  </Step>

  <Step title="Turn on auto-open for desktop">
    In **Open chat window (In desktop)**, select **Always open automatically (after delay)**.
  </Step>

  <Step title="Set the desktop delay">
    In **Delay to open chat window (In desktop) (In seconds)**, enter the number of seconds to wait. The default is 5.
  </Step>

  <Step title="Repeat for mobile (optional)">
    Set **Open chat window (In mobile)** and **Delay to open chat window (In mobile) (In seconds)** the same way.
  </Step>

  <Step title="Save">
    Select **Save Changes**.
  </Step>
</Steps>

The delay does nothing on its own. The chat opens automatically only when the select is set to **Always open automatically (after delay)**.

Auto-open stops for a visitor after they close the chat. It does not start again in that browser unless the visitor opens the chat again or clears their browser storage. The chat also does not open automatically on pages you list in [Excluded Pages](/docs/guides/install/control-where-it-appears).

## Hide sources and feedback buttons

Turn on these switches, then select **Save Changes**:

* **Hide Sources**: hides the list of source links under each answer. Keep sources visible if you want visitors to check where an answer came from.
* **Hide Feedback Buttons**: hides the thumbs up and thumbs down buttons under answers.

Other switches on the page hide more parts of the widget: **Hide Bottom Navigation** (the Home, Messages, and Account tabs), **Hide Refresh Button**, **Hide Expand Button**, and **Hide Home Page**. For every field on this page, see [Settings reference](/docs/reference/settings).

For terms acceptance and disclaimer text, see [Add a disclaimer and consent](/docs/guides/answers/add-disclaimer-and-consent).

## Remove the "Powered by SiteGPT" branding

Removing the branding needs a paid add-on. On the **Billing** page, it is called **Remove 'Powered by SiteGPT' (Addon)**. See [Manage your plan and billing](/docs/guides/account/billing#buy-or-remove-an-add-on), [Plans and limits](/docs/reference/plans-and-limits), and [pricing](https://sitegpt.ai/pricing).

With the add-on, these fields become available on the **Appearance** page:

* **Hide Powered By (SiteGPT Branding)**: removes the watermark.
* **Watermark Text** and **Watermark Link**: replace the watermark text and link with your own.
* **Select Watermark Icon**: replaces the watermark icon.

Without the add-on, these fields show a lock icon and you cannot change them.

## Check that it works

1. Open your website in a new private browser window.
2. Look at the chat icon. It has your colors, size, shape, and position. The tooltip shows above it, unless you turned it off.
3. Open the chat. The header shows your chatbot name, and the first message is your welcome message.
4. If you set auto-open, reload the page and wait for the delay. The chat opens by itself.

<Tip>
  Use a private window to test the tooltip and auto-open. A normal window may remember that you already closed them.
</Tip>

To change the widget further with your own CSS, see the [JavaScript widget SDK](/docs/developers/widget-sdk).