Skip to main content
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.
  • Your brand colors as hex codes, for example #1D4ED8.
  • Optional: image files for your custom icons.

​
Change colors

1

Open Appearance

In your chatbot’s sidebar, under Customizations, select Appearance.
2

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).
3

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).
4

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

Save

Select Save Changes at the bottom of the page.
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.
1

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

Save

Select Save Changes.
3

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

Set the desktop distances

In the Chat Icon section, set Distance from Bottom (in px) and Horizontal Distance (in px). Both default to 16.
2

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

Save

Select Save Changes.
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. 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.
1

Go to the Auto Open Chat Window section

Scroll to Auto Open Chat Window on the Appearance page.
2

Turn on auto-open for desktop

In Open chat window (In desktop), select Always open automatically (after delay).
3

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

Repeat for mobile (optional)

Set Open chat window (In mobile) and Delay to open chat window (In mobile) (In seconds) the same way.
5

Save

Select Save Changes.
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.

​
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. For terms acceptance and disclaimer text, see Add a 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, Plans and limits, and 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.
Use a private window to test the tooltip and auto-open. A normal window may remember that you already closed them.
To change the widget further with your own CSS, see the JavaScript widget SDK.