Skip to content
Getting Started
Welcome to SiteSpeakAI What is SiteSpeakAI Create your chatbot
Managing Your Chatbot
Appearance Conversation History Visitor Recent Chats Lead capture Welcome message Human handoff Voice & TTS Languages Sharing Deploy & Install Bring Your Own Keys Settings AI Agents (MCP)
Training Your Chatbot
Overview Website & Links BookStack PDFs & Files Audio App Integrations Fine-Tuning
Installing Your Chatbot
Overview HTML Website
Website Builders
App Builders
E-commerce
CMS Platforms
LMS Platforms
Communication & Messaging
Localized Guides
Tools & Actions
Overview Custom API Action SQLite Database MySQL Database BookStack: Search Wiki Brave: Web Search Firecrawl: Search Capture Leads Send Transcript Navigate to Page Polar Paddle Suggested Messages Shopify Cal.com Calendly HubSpot Meetings MCP Client
Integrations
Overview Google Chat HubSpot Drip WhatsApp Zapier
Agency & Reseller
Agency & Reseller Program Getting Started Branding Custom Domain Client Management Webhooks Team Members
Advanced
MCP Endpoint Identify Users CSV to SQLite Content Security Policy Data & Security
Getting Started
Quick Start Authentication
Chatbot
Retrieve Chatbot Settings Get Analytics Get Conversation History Get All Leads
User
Retrieve User Account Retrieve All Chatbots

Managing Your Chatbot

Customize your chatbot's appearance

Match your chatbot’s look and feel to your brand with customizable themes, colors, icons, and more

Customize your chatbot’s appearance to match your brand and create a seamless experience for your visitors.

To access appearance settings, go to Configuration → Appearance in your chatbot dashboard.

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.

The default launcher logo also adapts: it renders dark on pale accents and white on colored or dark accents, so it stays readable on both sides.

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), add ,data-theme to the embed script on that page:

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:

Icons

Launcher Icon

Description

Displayed in the chat launcher button

Recommended Size

100 x 100px

Header Icon

Displayed in the chat header

100 x 100px

Share Icon

Displayed on the share page for your agent

100 x 100px

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.

Choose the font size for chat messages: Small, Medium, or Large.

On this page