Visitor chat themes and branding
Set the colours, images, fonts and presentation visitors see across chat, tabs, forms and notifications.
What it is
A theme gives visitor chat its appearance and presentation options. It covers the pane, chat tabs, forms, notifications and rich content. You can keep several named themes and choose one as the website default.
Who uses it and why
People with the Settings role maintain the website's chat presentation. Developers with that role add custom styling when the theme controls do not cover a design. Visitors see the selected theme while they chat or complete a form.
Where to find it
With the Settings role, open Settings › Chat › Themes. Images and fonts are available through Settings › General Settings › Image Library and Settings › Chat › Fonts. Other reusable files are in Settings › General Settings › File Library.
How it works
The default theme supplies the usual visitor experience. A visitor event can select another theme, so the default is not necessarily the theme every visitor sees.
General colours can be inherited by more specific controls. Pane, tab, offline and notification styling also have their own options. Some text and assets can vary by language, and desktop and mobile tabs have separate presentation.
You can copy a theme, edit it or use Set as Default. Unset as default removes its default selection.
Configure it
- Select New or open an existing theme and enter Theme Name.
- Set general colours under General › Styling and choose fonts under Fonts.
- Configure Chat Pane, Chat Tabs, Offline Pane and Notifications as needed. Use Icons for header controls and custom icons.
- Check Desktop Preview and Mobile Preview in Online, Active and Offline states, then save your changes.
- Use Set as Default if this should be the normal website theme.
Developers with the Settings role can use Custom CSS for one theme or Global Themes Custom CSS for all website themes. Ask Powerfront to change Show Inside Branding, Branding Label or Branding Link.
Settings
| Setting | Where | Applies to | Default | Who can change it | What it does |
|---|---|---|---|---|---|
| Set as Default | Settings › Chat › Themes | website | Not set: no default theme selected | Settings role | Select the website's default chat theme; a visitor event can select another theme. |
| Brand | Settings › Chat › Themes › General › Styling | website | Light blue (#1bb9da) in a new theme | Settings role | Supply the general brand colour that other theme colours can inherit. |
| Primary Text | Settings › Chat › Themes › General › Styling | website | Dark grey (#333333) in a new theme | Settings role | Set the general primary text colour. |
| Secondary Text | Settings › Chat › Themes › General › Styling | website | White (#ffffff) in a new theme | Settings role | Set the general secondary text colour. |
| Custom CSS | Settings › Chat › Themes › Admin Options | website | Not set: no additional styling for this theme | Settings role | Apply additional styling to this theme. |
| Global Themes Custom CSS | Settings › Chat › Themes › Admin Options | website | Not set: no additional styling across themes | Settings role | Apply additional styling to all themes for the website. |
| Show Inside Branding | Settings › Chat › Themes › Admin Options | website | On for a new theme in the editor | Settings role | Display Powerfront branding in the chat interface. |
| Branding Label | Settings › Chat › Themes › Admin Options | website | Ai Chatbot by, when no custom text is set | Settings role | Customise the text before the Powerfront name. |
| Branding Link | Settings › Chat › Themes › Admin Options | website | Powerfront website, when no custom destination is set | Settings role | Customise the branding destination. |
Fields
| Field | Where | Required | What it is for |
|---|---|---|---|
| Theme Name | Settings › Chat › Themes | Yes | Identify the theme in the theme list. |
| Theme Description | Settings › Chat › Themes | No | Describe the theme for the people maintaining it. |
Permissions
| Permission | Lets you |
|---|---|
| Settings | Create and edit themes, choose the default and manage image and font resources; Powerfront manages the branding controls. |
Limits and good to know
- Global custom styling affects every theme, including themes you are not currently editing.
- A preview does not test every website layout, browser or assistive technology.
- Existing custom styling can override colours and spacing selected in the editor.
- Legacy pane appearance is configured separately. Check which pane your website uses before making changes.
Depends on and works with
+1 more · this feature uses
- Legacy chat pane settingsRelated
Legacy panes have separate appearance settings to review before moving to a current theme.
+35 more · used by
- Service levels and response timersConfigured by
Theme settings control automatic Be Right Back messages.
- Chat tabs for visitorsConfigured by
The selected theme supplies tab images, styling and visibility options.
- Visitor chat paneConfigured by
Themes supply the pane layout and controls.
- Mobile chatConfigured by
Themes supply mobile presentation and navigation options.
- Chat accessibility and keyboard navigationConfigured by
Themes affect focus visibility, readability and proactive focus exclusions.
- Visitor messages and sending feedbackConfigured by
The active theme sets the message box's fonts, colours and input prompt.
- Visitor chat status and waitingConfigured by
Themes supply waiting messages and warning presentation.
- Pre-chat survey for visitorsConfigured by
The theme selects and presents the pre-chat survey.
- Custom fields in visitor formsConfigured by
Themes supply form colours, including validation borders.
- Offline help for visitorsConfigured by
Themes define Offline Pane settings and presentation.
- Visitor tracking consent and communication opt-insConfigured by
The active theme supplies privacy messages and button labels.
- Post-chat survey for web visitorsConfigured by
The visitor's theme selects ordinary and virtual-assistant surveys.
- Visitor chat notificationsConfigured by
Theme settings control preview appearance and device availability.
- Chat tasks and topics for visitorsConfigured by
The theme selects a Pre-Chat Task and its expiry behaviour.
- Rich content in visitor chatConfigured by
The visitor's theme supplies card and list appearance.
- Product cards in visitor chatConfigured by
The active theme selects the product-card configuration.
- Order cards in visitor chatConfigured by
The theme selects the visitor order-card configuration.
- File attachments for visitorsConfigured by
The active theme controls the attachment menu entry.
- Email and print transcripts for visitorsConfigured by
The active theme controls visitor transcript menu entries and labels.
- Appointment booking for visitorsConfigured by
The visitor experience supplies the shared colours and fonts.
- Video Feed for visitorsConfigured by
Themes select feed content and control visitor playback, discovery and action choices.
- Joining calls and approving Co-BrowseConfigured by
The theme chooses the available entry controls and their labels.
- Chat avatars and visitor reactionsConfigured by
The active theme controls avatar display, presentation and bot appearance.
- Streaming AI replies for visitorsConfigured by
The active theme controls the visitor AI activity indicator.
- Visitor chat languages and text directionConfigured by
Themes provide language variants of visitor-facing messages.
- Legacy chat pane settingsRelated
Current themes use a separate configuration path from the legacy pane.
- Previous chat history for visitorsConfigured by
Themes control timestamps, advisor names and message presentation.
- Proactive chat invitationsConfigured by
Theme Based pre-chat task selection uses the task chosen in the visitor theme.
- Visitor event updates to customer contextConfigured by
The selected chat theme defines the visitor experience applied by the event.
- Virtual Assistant task messages and identityConfigured by
Chat themes can override the assistant name and image.
- Virtual Assistant task previewRequires
A chat theme is needed to render the preview.
- Product card configuration and shopping actionsConfigured by
Themes select a reusable card configuration.
- Order card configuration and accessConfigured by
Themes select the visitor's card configuration.
- PCI Payment Form in web chatConfigured by
Chat themes can customise the visitor invitation message and button.
- Image and font librariesRelated
Apply library images and fonts through the visitor theme settings.
View all connections as a list
This feature uses
- Image and font librariesEnhances
Image and font libraries supply brand resources.
- Supported languagesConfigured by
Supported Languages determines the language choices available when editing theme text.
- Visitor event rules and actionsConfigured by
Visitor events can select an alternative theme.
- Pre-chat survey for visitorsEnhances
A pre-chat survey adds an intake form to the themed visitor experience.
- Offline help for visitorsEnhances
Offline help adds a form, task or information message when live help is unavailable.
- Visitor chat notificationsEnhances
Optional notifications add reply previews and unread counts to the themed experience.
- Rich content in visitor chatEnhances
Rich content adds cards and lists to the themed conversation.
- Visitor chat languages and text directionEnhances
Theme text and some assets can have language-specific values.
- Legacy chat pane settingsRelated
Legacy panes have separate appearance settings to review before moving to a current theme.
Used by
- Visitor names and session codesConfigured by
Theme header controls and labels determine how visitors reach their session code.
- Avatar animation and reaction settingsConfigured by
The visitor's chat theme controls whether the visitor avatar experience is shown.
- Starting, ending and expiring chatsConfigured by
Chat themes can supply visitor inactivity settings and messages.
- Typing indicators and typing previewConfigured by
Theme settings supply the visitor-facing operator typing message.
- Chat queueConfigured by
The selected theme supplies waiting messages and optional action buttons.
- Attachments in conversationsConfigured by
The visitor theme controls attachment availability.
- Transcripts by email and printConfigured by
Theme settings control visitor transcript actions, labels and mobile visibility.
- Offline messagesConfigured by
The active theme controls the offline experience and can override general offline settings.
- Service levels and response timersConfigured by
Theme settings control automatic Be Right Back messages.
- Chat tabs for visitorsConfigured by
The selected theme supplies tab images, styling and visibility options.
- Visitor chat paneConfigured by
Themes supply the pane layout and controls.
- Mobile chatConfigured by
Themes supply mobile presentation and navigation options.
- Chat accessibility and keyboard navigationConfigured by
Themes affect focus visibility, readability and proactive focus exclusions.
- Visitor messages and sending feedbackConfigured by
The active theme sets the message box's fonts, colours and input prompt.
- Visitor chat status and waitingConfigured by
Themes supply waiting messages and warning presentation.
- Pre-chat survey for visitorsConfigured by
The theme selects and presents the pre-chat survey.
- Custom fields in visitor formsConfigured by
Themes supply form colours, including validation borders.
- Offline help for visitorsConfigured by
Themes define Offline Pane settings and presentation.
- Visitor tracking consent and communication opt-insConfigured by
The active theme supplies privacy messages and button labels.
- Post-chat survey for web visitorsConfigured by
The visitor's theme selects ordinary and virtual-assistant surveys.
- Visitor chat notificationsConfigured by
Theme settings control preview appearance and device availability.
- Chat tasks and topics for visitorsConfigured by
The theme selects a Pre-Chat Task and its expiry behaviour.
- Rich content in visitor chatConfigured by
The visitor's theme supplies card and list appearance.
- Product cards in visitor chatConfigured by
The active theme selects the product-card configuration.
- Order cards in visitor chatConfigured by
The theme selects the visitor order-card configuration.
- File attachments for visitorsConfigured by
The active theme controls the attachment menu entry.
- Email and print transcripts for visitorsConfigured by
The active theme controls visitor transcript menu entries and labels.
- Appointment booking for visitorsConfigured by
The visitor experience supplies the shared colours and fonts.
- Video Feed for visitorsConfigured by
Themes select feed content and control visitor playback, discovery and action choices.
- Joining calls and approving Co-BrowseConfigured by
The theme chooses the available entry controls and their labels.
- Chat avatars and visitor reactionsConfigured by
The active theme controls avatar display, presentation and bot appearance.
- Streaming AI replies for visitorsConfigured by
The active theme controls the visitor AI activity indicator.
- Visitor chat languages and text directionConfigured by
Themes provide language variants of visitor-facing messages.
- Legacy chat pane settingsRelated
Current themes use a separate configuration path from the legacy pane.
- Previous chat history for visitorsConfigured by
Themes control timestamps, advisor names and message presentation.
- Proactive chat invitationsConfigured by
Theme Based pre-chat task selection uses the task chosen in the visitor theme.
- Visitor event updates to customer contextConfigured by
The selected chat theme defines the visitor experience applied by the event.
- Virtual Assistant task messages and identityConfigured by
Chat themes can override the assistant name and image.
- Virtual Assistant task previewRequires
A chat theme is needed to render the preview.
- Product card configuration and shopping actionsConfigured by
Themes select a reusable card configuration.
- Order card configuration and accessConfigured by
Themes select the visitor's card configuration.
- PCI Payment Form in web chatConfigured by
Chat themes can customise the visitor invitation message and button.
- Image and font librariesRelated
Apply library images and fonts through the visitor theme settings.
FAQ and troubleshooting
Why do visitors see a different theme from the default?
Check whether a visitor event selects an alternative theme and whether you are viewing the same language and device state.
Why did a colour change not affect every button?
A specific button or component can have its own colour instead of inheriting Brand. Custom styling can also override it.
Why did a styling change affect several themes?
Check Global Themes Custom CSS, which applies across the website's themes.
Can I change the Powerfront branding?
Ask Powerfront to change the branding options for you.