Widget Customization
Make the chat widget match your brand and behave exactly the way you want. All customization happens in your dashboard — changes apply to your website automatically, without touching the embed code.
You'll find the settings at Dashboard → Chatbots → select your chatbot:
- The Widget tab controls the appearance (position, colors, size, texts)
- The Behavior tab controls how the widget interacts with visitors
Click Save Changes at the top of the page to apply your edits.
Widget Tab: Appearance
Position
Choose where the widget appears on your website:
| Position | Description |
|---|---|
| Bottom Right | Floating chat bubble in the bottom-right corner (default) |
| Bottom Left | Floating chat bubble in the bottom-left corner |
| Inline (Embedded) | Widget is embedded directly on the page instead of floating |
With the Inline position, the chat is embedded at the spot where the embed script is placed and is always open — no bubble, no close button. Ideal for dedicated chat or support pages. See Widget Embedding for details.
Color Theme
Pick one of three color presets:
| Preset | Description |
|---|---|
| Default | The standard ChatReact color scheme |
| Brand | Your company's brand colors from Company Settings |
| Custom | Pick your own colors |
The Brand preset is only available once brand colors are set. Go to your Company Settings to extract colors from your website.
With Custom selected, you can set four base colors:
- Primary — bubble, header gradient, buttons, and visitor messages
- Secondary — second color of the header gradient
- Background — chat window background
- Text — message text color
Advanced Color Settings
Need more control? With the Custom preset selected, expand Advanced Color Settings to override the automatically calculated colors:
- Visitor Messages — background and text color of visitor message bubbles
- Bot Messages — background and text color of bot message bubbles
- Header Text Color — color of the title and subtitle in the widget header
Anything you leave untouched is calculated automatically for good contrast. Each override has a Reset to automatic button to return to the calculated color.
Size & Style
| Setting | Range | Default |
|---|---|---|
| Border Radius | 0–32 px | 24 px |
| Width | 300–500 px | 380 px |
| Height | 400–700 px | 600 px |
On small mobile screens the widget automatically switches to a full-width layout, regardless of these dimensions.
Logo
Enable Use company logo in widget header to show your company logo in the chat header. The logo itself is uploaded in your Company Settings — recommended: square, at least 200×200 px (JPG, PNG, GIF, WebP or SVG, max. 5 MB).
This option is available on the Professional plan and above, and on all Agency plans.
Header Title, Subtitle & Bubble Text
| Field | Description | Default |
|---|---|---|
| Header Title | Title shown in the chat window header | "Chat with us" |
| Header Subtitle | Smaller line below the title | "We typically reply within minutes" |
| Bubble Text | Text displayed next to the chat bubble when the widget is closed | None |
If you never set a title or subtitle, the widget shows the default text — automatically localized to each visitor's language.
How the header subtitle works: As long as you haven't configured a subtitle, the widget shows the localized default, and the settings form pre-fills this default so you can see and edit what visitors get. To hide the subtitle entirely, clear the field and save — an intentionally emptied subtitle stays hidden.
The bubble text appears as a small label next to the closed chat bubble (e.g. "Got questions?"). Leave it empty to show only the round bubble.
Widget Translations
If your chatbot supports multiple languages, a Widget Translations card appears below the appearance settings. There you can translate the welcome message, fallback message, header title, header subtitle, and bubble text for each enabled language.
The welcome and fallback messages themselves are configured in the Persona tab of your chatbot settings.
Live Preview
The right column of the Widget tab shows a Live Preview of your widget that updates as you change settings. It's interactive: close the chat window with the X to see the closed bubble (including your bubble text), and click the bubble to open it again.
Behavior Tab: Interaction
Behavior Settings
| Setting | Description | Default |
|---|---|---|
| Proactive Greeting | Bot greets visitors automatically after a delay (1–10 seconds) | On, 3 s |
| Auto-Open | Widget opens automatically for visitors after a delay (1–15 seconds) | Off, 5 s |
| Sound Enabled | Play sounds for notifications | On |
| Typing Indicator | Show an animation while the bot is typing | On |
| Pre-Chat Form | Capture visitor info before the chat starts | Off |
| Show on Mobile | Display the widget on mobile devices | On |
Maximum Message Length
Limit how many characters visitors can enter per message (100–10,000 characters, default 2,000). This helps prevent excessive usage from very long inputs. Clear the field or click Remove limit to allow messages of any length.
Pre-Chat Form
When the pre-chat form is enabled, visitors fill out a short form before the conversation starts. You configure the fields yourself:
- Field types: Text, Email, Phone, Textarea
- Each field has a label, an optional placeholder, and a required toggle
- Reorder fields with the move up/down buttons, or remove them
If your chatbot supports multiple languages, a translations section appears below the field editor. Enter translations for each language manually, or click Translate with AI to translate all labels and placeholders automatically.
Live Chat
The Behavior tab also contains the Live Chat Settings card. Enable live chat to let visitors talk to your human agents, and choose a mode:
| Mode | Description |
|---|---|
| Handoff Only | Live chat only when the bot can't help |
| Standalone | Visitors can chat directly with agents |
| Both | Handoff and direct live chat available |
Live Chat is available on the Professional plan and above, and on all Agency plans. See Live Chat for how to manage incoming conversations.
Branding
On plans that include white-label, a Branding card appears at the bottom of the Behavior tab. ChatReact branding is hidden by default on these plans — enable Show "Powered by ChatReact" if you'd like to display it in the widget footer anyway.
Learning Phase
While a new chatbot is in its learning phase, you can control how cautiously it answers — Cautious, Balanced (recommended), or Confident — in the Confidence tab of the same settings page. This tab appears on plans that include the Improvement Agent. See the Improvement Agent guide for details.