Brand and header
Accent color, theme, widget language, logo and header, the launcher button, “Powered by” and the reaction emoji.
Where to configure it
SettingsWidget BuilderBrand. All changes go into cfg.brand; the preview on the right updates right away, and visitors see them after you press Publish.
Color and theme
#RRGGBB format.auto follows the visitor’s system setting via prefers-color-scheme and switches as soon as the visitor changes their system theme.| Field | Type | Default | Description |
|---|---|---|---|
| accent_color | string | #6366f1 | Accent color: the launcher, the send button, the visitor’s messages and other accents. The backend only accepts the #RRGGBB format. |
| accent_gradient | { from_color, to_color, angle } | null | Gradient accent: a two-color gradient on the launcher and accent backgrounds. Text and borders keep the solid accent color. Empty means no gradient. |
| theme | "light" | "dark" | "auto" | "auto" | The panel’s Theme: Auto (system), Light, Dark. auto follows the visitor’s system setting via prefers-color-scheme and switches as soon as the visitor changes their system theme. |
Widget language
| Field | Type | Default | Description |
|---|---|---|---|
| language | "auto" | "ru" | "en" | "auto" | Widget language, right below Theme: Auto, Always Russian or Always English. |
Always Russian and Always English show every visitor one language. Everything follows it: the widget’s buttons and labels, dates, your builder texts (the widget takes that language’s variant of each RU/EN text) and the language the widget reports to the server, so system messages to the visitor come in it too. The builder preview switches to it as well. A language your site sets with data-locale or SupportHub.init({ locale }) has no effect then.
Auto (the default) picks the language in this order:
- The language your site sets:
SupportHub.init({ locale })or thedata-localeattribute on the script tag (see Installation). It always applies. - The page language (
<html lang="…">), then the browser language, but only if the project’s texts exist in that language. - Otherwise, the project’s main language.
The project’s texts exist in a language when every text you changed in the builder is available in it: the greeting and subtitle, the header title and subtitle, the project name, button texts, quick replies, topics and their fields, the pinned banner (when it’s on), the system messages that are on, the email bridge texts (when it’s on), the rating prompt (when rating is on) and so on. A text with RU/EN variants counts for the languages it’s filled in for. A text typed without language variants counts in the language of its script: Cyrillic means Russian, two or more Latin words mean English, and brand names, emoji and numbers fit any language. Texts you haven’t changed exist in both languages.
The project’s main language is the project’s default_locale setting if it’s set; otherwise English if the project’s texts are in English only, and Russian in every other case. You can see the result in the public config, under computed.locales (see the field reference).
Logo and header
POST /api/workspaces/{ws}/widget-config/logo and is embedded in the config as a data: URL. Instead of uploading, you can open Use external URL and paste a link to an image. With no logo, the header shows the first letter of the name.object-fit: contain) instead of being cropped at the edges (cover), which suits logos with their own background and padding. For the letter shown instead of a logo, it removes the accent tile.| Field | Type | Default | Description |
|---|---|---|---|
| logo_url | string | — | The Logo in the header, 32 px. The Upload button accepts PNG / JPEG / WebP / SVG up to 256 KB; you can crop a raster image before uploading it. The file goes to POST /api/workspaces/{ws}/widget-config/logo and is embedded in the config as a data: URL. Instead of uploading, you can open Use external URL and paste a link to an image. With no logo, the header shows the first letter of the name. |
| logo_shape | "circle" | "rounded" | "square" | "rounded" | The Shape of the logo (or of the letter shown instead): Circle, Rounded (8 px corners), Square (sharp corners). |
| logo_transparent_bg | boolean | false | Transparent background. The image fits inside the container whole (object-fit: contain) instead of being cropped at the edges (cover), which suits logos with their own background and padding. For the letter shown instead of a logo, it removes the accent tile. |
| project_name | string | — | Project name: the first line of the header. If it’s set and differs from the header title, the title moves to the second line. |
| header_title | string | "Support" | Header title: the first line of the header when no project name is set. |
| header_subtitle | string | — | Header subtitle (optional): the second line, such as a tagline, contacts or what the team does. It isn’t shown if the header title already takes the second line. |
Launcher button
The button sits in the bottom right corner of the page. As long as WelcomeCTA button text has text (“Send a message” by default), the button is a pill with an icon and that text; if you clear the text, a round icon button remains.
| Field | Type | Default | Description |
|---|---|---|---|
| launcher_icon_url | string | — | Upload icon: your own icon instead of the default chat icon (PNG / JPEG / WebP / SVG up to 256 KB). Reset brings back the default. |
| launcher_icon_only | boolean | false | Show icon only: hides the text on the button without deleting it. |
| launcher_icon_transparent_bg | boolean | false | Transparent background (full size): your icon fills the whole button with no accent backing. For icons with their own background or shape. |
«Powered by SupportHub»
While the panel is open, on a computer, a “Powered by SupportHub” link is shown next to the widget button. The Hide “Powered by SupportHub” toggle in the Brand section removes it; it’s available on the Business and Enterprise plans and locked on the others.
The link points at our site and carries campaign tags: utm_source is the domain of the page the widget sits on, plus utm_medium=widget and utm_campaign=branding. They tell us how many people came to us from your site; they say nothing about the visitors themselves.
Reaction emoji
SettingsWidget BuilderEmoji Pack, the Custom emoji field (brand.emoji_pack_id): the four emoji the visitor sees when they hold a finger or the cursor on an operator’s message. The default is ❤️ 👍 👎 🎉. Enter your own, separated by commas or spaces:
❤️,🔥,👍,🎉
The first four are used. If you enter fewer, the empty slots get the default emoji from the same positions. Composite emoji (✋🏿, 🏳️🌈) stay intact, but emoji written together without a separator count as one. An empty field means the default set.
The reaction panel opens with a 350 ms long-press or a 600 ms hover, and only on an operator’s messages.