Brand Editor
How the dashboard editor works - the draft-and-Save model, the four groups of settings and the toolbars
The Widget settings (/{org}/web/brand) is where you set the widget's look, content and behaviour. A settings list sits on the left and a live preview of the widget fills the rest of the page. The preview updates as you edit.
How Editing Works
Every field works the same way:
- Edits go into one draft. Changing a colour, uploading a logo or editing a message adds to a single set of pending changes. Nothing is sent yet.
- The preview shows the draft. Visitors never see it.
- Click Save changes in the toolbar to publish the whole draft at once. The button is active only when there are unsaved changes.
- Click Discard to drop the draft. A dialog asks Discard your changes? and the choices are Discard and Keep editing.
- The widget reads the saved settings when it loads. After a Save, new page loads get the update.
If you leave the page with unsaved changes, the editor warns you first.
Only an Owner, Admin or Editor can edit. Anyone else sees View only instead of the Save and Discard buttons.
The Four Groups
The settings list has four groups. Click a section to open it.
| Group | Sections | Page |
|---|---|---|
| Look & feel | Layout, Colors, Typography, Branding, Sounds | Layout, Appearance, Branding |
| Content | Home, Messenger, News & help, Languages | Home, Messenger, News & Help, Localization |
| Visitor | Sign-in, Pre-chat form, Profile fields | Visitor Sign-In, Pre-Chat Form, Profile Fields |
| Integration | General, Security, Bot protection, Analytics, AI agent | Integration Settings, Bot Protection, Analytics, AI Agent |
The Import style dialog is not a section. Open it from the toolbar: see Import Your Style.
Integration settings belong to this one widget, so a settings file never carries them.
The Toolbars
Two floating toolbars sit above the preview.
| Toolbar | Controls |
|---|---|
| Left | Search settings, AI agent, Import style, Install |
| Right | Editing language (only with more than one language), Preview as, Launcher bubble, Device, Preview theme, a More actions menu (Export, Import, Reset), then Discard and Save changes |
- Search settings. Press
Ctrl+KorCmd+K, or/, to find any section or setting by name and jump to it. - Install. Opens the code for your widget. See Install.
- Device. Switch the preview between Desktop and Phone (390 px wide). On a phone, the window is the device and this control is hidden.
- Preview theme. Auto, Light or Dark. It changes only the preview, not what visitors get. To set the theme for visitors, use Theme under Colors.
- Preview as and Launcher bubble. See Testing.
On a narrow screen the settings list opens as a sheet and the toolbars merge into one.
Editing in Multiple Languages
Text fields are per language. With more than one supported language, choose the Editing language in the toolbar:
- In the default language, you edit the base text.
- In another language, you write that language's text. An empty field shows the default text.
Which items exist, their order and their rules are always edited in the default language.
Theming as a developer
If you'd rather drive theming from code (passing a theme object in the embed config, or overriding --wx-* CSS variables), see Theming & CSS variables.
Related
- Layout - launcher position, corners and tabs.
- Appearance - colours, fonts and sounds.
- Settings Files - export, import and reset.
- Testing - try the widget as a visitor before you Save.