Where to change it#
Open Settings, Widget in the dashboard. Changes save automatically, and a live preview of the real widget sits beside the form. Only workspace owners can change these settings.
Appearance#
| Setting | What it changes | Default |
|---|---|---|
| Primary color | The launcher, header, buttons, and the visitor's message bubbles. Pick from the palette or paste any hex value. Text on it stays readable (WCAG AA) whatever you pick: on light colors it turns dark, and on mid colors the fill behind it is deepened just enough. | #2d85e2 |
| Position | The corner the launcher pins to: right or left. | Right |
| Launcher size | Cozy is a 56px button. Compact is 42px, for tighter pages. | Cozy |
Branding and copy#
| Setting | What it changes | Default |
|---|---|---|
| Logo | Shown in the widget's header and home view. PNG, JPG, WEBP, GIF or SVG, up to 5 MB. Square images look best. | None |
| Logo fill color | Tints an SVG logo. | None |
| Brand name | The name in the widget header. | Your workspace name |
| Welcome eyebrow | The small line above the welcome title, for visitors you do not know yet. Leave it blank to hide it. | Hi there 👋 |
| Personalized greeting | Used once the visitor is identified. Placeholders: {firstName}, {fullName}, {email}. | Hi {firstName} 👋 |
| Welcome title | The heading on the widget's home view. | How can we help? |
| Welcome message | The text under the welcome title. | Send us a message and we'll get back to you. |
| Expected response time | A line that tells visitors when to expect a reply. Blank hides it. | Blank |
FAQs, and the title above them on the widget's home view, are managed under Content in the dashboard.
Dark mode#
The widget has a full dark theme. Your page chooses it, because only your page knows its own theme: set darkMode: true in window.bettercomConfig, or switch at runtime with bettercom('update', { darkMode }). Dark mode changes the neutrals (panel background, message bubbles, input chrome) and never your primary color.
There is no automatic mode. To follow the visitor's system setting:
const dark = window.matchMedia('(prefers-color-scheme: dark)')
window.bettercom('update', { darkMode: dark.matches })
dark.addEventListener('change', (e) => {
window.bettercom('update', { darkMode: e.matches })
})When it appears#
| Setting | What it changes | Default |
|---|---|---|
| Show after | Seconds to wait after your page's load event before the launcher appears, from 0 to 60. | 1 second |
| Wait for the page to finish drawing | Waits for your page's Largest Contentful Paint to settle instead, for at most 8 seconds. Replaces Show after while it is on. | Off |
More on what loads when in Performance and CSP.
Pre-chat email#
Turn on Ask for email first to show an email field before a visitor's first message in a new conversation. With Require it on, the visitor cannot send until they give one; otherwise they can skip it. Visitors who already gave an email are not asked again.
The Powered by Bettercom footer#
The panel shows a small "Powered by Bettercom" line by default. Plans that include branding removal can hide it under Settings, Widget, Bettercom branding; see Pricing for which plans do.
Isolation from your page#
The widget renders inside a closed shadow root and resets every inherited style on its host element. Your stylesheets cannot reach into it, and its styles cannot leak into your page, so a global CSS rule on your site will not break the chat. It also means you cannot restyle the widget with your own CSS: the settings above are the supported way to change it.
The widget follows the visitor's reduced motion preference (no movement, only fades), and on phones the open panel fills the screen.