Display style
Choose how your chatbot appears on your website:Chat Bubble
A chat launcher that appears in the bottom of the screen and opens the chatbot when clicked. This is the default style.
Search Bar
A page-aware search box at the bottom of the screen that allows visitors to ask questions about the current page and site.
Branding
Agent name
The name displayed in the chat header. This is what your visitors will see when chatting with your bot.Welcome messages
Customize the initial message(s) your chatbot displays when opened. You can add multiple welcome messages by separating each with a new line.Placeholder message
The placeholder text shown in the chat input field (e.g., “Ask a question…”).Footer message
An optional message displayed underneath the chat input. Supports markdown. Maximum 200 characters.Theme & colors
Theme
Choose between Light, Dark, or Auto for your chatbot.- Light and Dark always show that theme, on every device.
- Auto (match visitor device) follows each visitor’s device setting: visitors using dark mode see the dark version of your chatbot, everyone else sees the light version.
Customizing the Auto theme
With Auto selected, you can style the light and dark sides separately. Each side has its own Accent color, Text color, and icon fields.- Leave a field empty (Auto) to use the built-in neutral palette for that side: white with dark text on light, dark grey with light text on dark.
- Set a value to override just that side. For example, keep your brand accent on the light side and leave the dark side neutral.
- To go back to Auto for a field, clear it.
Pinning the theme on a specific page
If one part of your site should always show one side of an Auto chatbot (for example, a light-only marketing site while your app uses Auto), adddata-theme to the embed script on that page:
data-theme accepts light or dark, and only affects chatbots set to Auto. Embeds without the attribute keep following the visitor’s device.
Accent color
The primary color used for buttons, links, the launcher, and the chat header. Choose from preset colors or enter a custom hex value.Header color
Give the chat window header its own color, separate from the accent. Leave the field empty and the header matches the accent color, which is the default. Text on the header adjusts automatically to stay readable on the color you pick. On the Auto theme you can set a header color per side, like the other per-side fields: clear it to fall back to that side’s accent.Text color
The color of text displayed on accent-colored elements (e.g., the header). Typically white (#ffffff) for dark accent colors.
Icons
Customize the icons displayed in your chatbot:Click Reset next to any icon to restore the default.
Launcher text
Short text displayed in the launcher button (e.g., “Help”). Keep it short and sweet.Layout & behavior
Max height
Control the maximum height of the chat window. Default is 720px.Font size
Choose the font size for chat messages: Small, Medium, or Large.Header size
Choose the header size: Small, Medium, or Large.Position
Choose where the chat launcher appears on your website:- Bottom Right (default)
- Bottom Left
Advanced options
Auto popup welcome message
Set a delay before the welcome message automatically pops up. Options range from Off to several seconds (e.g., 3s).Auto scroll to new messages
When enabled, the chat window automatically scrolls to show new messages. Default is Yes.Display sources in messages
When enabled, shows the source links used to generate each response. Useful for transparency and allowing visitors to learn more.Sources label
Customize the label shown above source links (default: “Sources”).Horizontal scroll smart prompts
Enable horizontal scrolling for smart prompt suggestions.Hide “Powered by”
Hide the “Powered by SiteSpeakAI” branding in the chat footer.Removing the “Powered by” branding is available on paid plans.
Ready to automate your customer service with AI?
Join over 1000+ businesses, websites and startups automating their customer service and other tasks with a custom trained AI agent.