> ## 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
> Customize the visual design and behavior of your chatbot to match your brand
Use the Appearance settings to customize how your chatbot looks and behaves on your website. Control colors, icons, positioning, and auto-open behavior to create a seamless brand experience.
## Accessing appearance settings
Navigate to your chatbot dashboard and select **Appearance** from the sidebar to access all customization options.
## Content settings
Set the display name for your chatbot that appears in the chat interface header.
**Example:** "Support Assistant" or "Sales Bot"
{' '}
Configure the message that appears when users hover over the chat icon. If
left empty, the welcome message will be used as the tooltip. **Example:**
"Need help? Chat with us!"
{' '}
The first message users see when they open the chatbot. Make it friendly and
informative to encourage engagement. **Example:** "Hello! How can I assist you
today?"
Keep welcome messages concise (1-2 sentences) for better engagement.
The placeholder text shown in the message input field before users type their question.
**Example:** "Ask me anything..." or "Type your question here..."
## Chat interface
**Primary color**\
The main brand color used for the chat header, buttons, and user messages.
**Text color**\
The color of text displayed on primary color backgrounds (typically white or black for contrast).
Ensure sufficient contrast between primary and text colors for accessibility. Use tools like WebAIM's contrast checker.
{' '}
**Font size** Set the base font size in pixels for all chat text (default:
16px). **Chat height** Control the height of the chat window as a percentage
of the viewport (1-100%).
Recommended chat height: 70-80% for optimal user experience.
{' '}
Watermark customization requires the "Remove SiteGPT Branding" addon
(\$59/mo). Visit your [billing page](/navigating-your-account/billing) to
add this feature.
**Watermark text** Replace the default "Powered by SiteGPT" text with your own
branding. **Watermark link** Set a custom URL for the watermark link. **Watermark
icon** Upload a custom icon to display next to the watermark text. **Hide powered
by branding** Completely remove the SiteGPT watermark from your chatbot.
**Hide sources**\
Remove the source links that show where the chatbot found its information.
**Hide tooltip**\
Disable the tooltip that appears when hovering over the chat icon.
**Hide feedback buttons**\
Remove the thumbs up/down reaction buttons from chatbot responses.
**RTL mode**\
Enable right-to-left text direction for languages like Arabic or Hebrew.
**Dark mode**\
Enable dark theme for the entire chat interface. When enabled, the widget automatically applies dark colors to all elements including the chat window, messages, and buttons for a better experience in low-light environments.
Dark mode respects your primary color settings while adjusting other interface elements for optimal contrast and readability.
## Auto open chat window
Configure when and how the chat window automatically opens for visitors.
**Open chat window**\
Choose whether to automatically open the chat window on desktop devices.
* Don't open automatically
* Always open automatically (after delay)
**Delay**\
Set the number of seconds to wait before auto-opening the chat window (only applies when auto-open is enabled).
Recommended delay: 3-5 seconds to avoid disrupting the user experience.
**Open chat window**\
Choose whether to automatically open the chat window on mobile devices.
* Don't open automatically
* Always open automatically (after delay)
**Delay**\
Set the number of seconds to wait before auto-opening the chat window on mobile.
Auto-opening on mobile can be more intrusive. Consider longer delays (5-7 seconds) or disabling it entirely.
## Chat icon
**Distance from bottom**\
Set the vertical distance from the bottom of the screen in pixels (desktop).
**Distance from bottom on mobile**\
Override the desktop value for mobile devices (optional).
**Horizontal distance**\
Set the horizontal distance from the left or right edge in pixels (desktop).
**Horizontal distance on mobile**\
Override the desktop value for mobile devices (optional).
**Position**\
Choose whether the chat icon appears in the bottom-right or bottom-left corner.
Default positioning: 20px from bottom and 20px from right edge.
{' '}
Select from multiple icon sizes: | Size | Dimensions | |------|------------| |
Small | 48x48 px | | Medium | 56x56 px | | Large | 64x64 px | | XL | 72x72 px
\| | 2XL | 80x80 px | | 3XL | 96x96 px | | 4XL | 128x128 px | | 5XL | 156x156
px |
Most websites use Medium (56x56 px) or Large (64x64 px) for optimal
visibility without being intrusive.
Upload custom images to replace the default icons:
**Bot icon**\
The icon shown in the chat bubble and next to bot messages.
**User icon**\
The icon displayed next to user messages in the chat.
**Agent icon**\
The icon shown when a human agent joins the conversation.
**Chat bubble icon**\
The icon displayed in the floating chat button on your website.
Use square images (1:1 aspect ratio) for best results. PNG format with transparent backgrounds works well for icons.
## Preview
The appearance page includes a preview panel showing how your chatbot will look. After making changes, you need to save them and reload the page to see the updated preview.
## Best practices
Ensure sufficient contrast between your primary color and text color for readability. Use tools like WebAIM's contrast checker to verify accessibility.
**Minimum contrast ratios:**
* Normal text: 4.5:1
* Large text: 3:1
Preview your chatbot on both desktop and mobile devices to ensure positioning and sizing work well across screen sizes.
**Test checklist:**
* Desktop browsers (Chrome, Firefox, Safari, Edge)
* Mobile devices (iOS, Android)
* Different screen sizes (phone, tablet, desktop)
* Both portrait and landscape orientations
Short, friendly welcome messages (1-2 sentences) perform better than lengthy introductions.
**Good examples:**
* "Hi! How can I help you today?"
* "Welcome! Ask me anything about our products."
**Avoid:**
* Long paragraphs explaining everything the bot can do
* Multiple questions in the welcome message
Auto-opening the chat can increase engagement, but use appropriate delays (3-5 seconds) to avoid disrupting the user experience.
**Best practices:**
* Use longer delays on mobile (5-7 seconds)
* Consider disabling auto-open on mobile entirely
* Test with real users to find optimal timing
* Monitor bounce rates after enabling auto-open
## Next steps
Overview of all customization options
Initial appearance setup during chatbot creation
Configure chatbot behavior and features
Advanced customization with CSS and SDK methods