# Visitor chat themes and branding

Set the colours, images, fonts and presentation visitors see across chat, tabs, forms and notifications.

*Release 3.3 · admin, developer, visitor*

**Settings › Chat › Themes** · **Settings › Chat › Fonts** · **Settings › General Settings › Image Library** · **Settings › General Settings › File Library**

## 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

1. Select **New** or open an existing theme and enter **Theme Name**.
2. Set general colours under **General › Styling** and choose fonts under **Fonts**.
3. Configure **Chat Pane**, **Chat Tabs**, **Offline Pane** and **Notifications** as needed. Use **Icons** for header controls and custom icons.
4. Check **Desktop Preview** and **Mobile Preview** in **Online**, **Active** and **Offline** states, then save your changes.
5. 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

### This feature uses

- **Configured in** [Supported languages](ADM-022.md): Supported Languages determines the language choices available when editing theme text.
- **Configured in** [Visitor event rules and actions](ENG-001.md): Visitor events can select an alternative theme.
- **Works better with** [Image and font libraries](ADM-019.md): Image and font libraries supply brand resources.
- **Works better with** [Pre-chat survey for visitors](VX-008.md): A pre-chat survey adds an intake form to the themed visitor experience.
- **Works better with** [Offline help for visitors](VX-011.md): Offline help adds a form, task or information message when live help is unavailable.
- **Works better with** [Visitor chat notifications](VX-015.md): Optional notifications add reply previews and unread counts to the themed experience.
- **Works better with** [Rich content in visitor chat](VX-018.md): Rich content adds cards and lists to the themed conversation.
- **Works better with** [Visitor chat languages and text direction](VX-031.md): Theme text and some assets can have language-specific values.
- **Related** [Legacy chat pane settings](VX-032.md): Legacy panes have separate appearance settings to review before moving to a current theme.

### Used by

- **Required by** [Virtual Assistant task preview](ENG-018.md): A chat theme is needed to render the preview.
- **Configures** [Visitor names and session codes](VIS-017.md): Theme header controls and labels determine how visitors reach their session code.
- **Configures** [Avatar animation and reaction settings](CON-012.md): The visitor's chat theme controls whether the visitor avatar experience is shown.
- **Configures** [Starting, ending and expiring chats](CHAT-001.md): Chat themes can supply visitor inactivity settings and messages.
- **Configures** [Typing indicators and typing preview](CHAT-004.md): Theme settings supply the visitor-facing operator typing message.
- **Configures** [Chat queue](CHAT-005.md): The selected theme supplies waiting messages and optional action buttons.
- **Configures** [Attachments in conversations](CHAT-018.md): The visitor theme controls attachment availability.
- **Configures** [Transcripts by email and print](CHAT-025.md): Theme settings control visitor transcript actions, labels and mobile visibility.
- **Configures** [Offline messages](CHAT-028.md): The active theme controls the offline experience and can override general offline settings.
- **Configures** [Service levels and response timers](CHAT-029.md): Theme settings control automatic Be Right Back messages.
- **Configures** [Chat tabs for visitors](VX-001.md): The selected theme supplies tab images, styling and visibility options.
- **Configures** [Visitor chat pane](VX-002.md): Themes supply the pane layout and controls.
- **Configures** [Mobile chat](VX-004.md): Themes supply mobile presentation and navigation options.
- **Configures** [Chat accessibility and keyboard navigation](VX-005.md): Themes affect focus visibility, readability and proactive focus exclusions.
- **Configures** [Visitor messages and sending feedback](VX-006.md): The active theme sets the message box's fonts, colours and input prompt.
- **Configures** [Visitor chat status and waiting](VX-007.md): Themes supply waiting messages and warning presentation.
- **Configures** [Pre-chat survey for visitors](VX-008.md): The theme selects and presents the pre-chat survey.
- **Configures** [Custom fields in visitor forms](VX-010.md): Themes supply form colours, including validation borders.
- **Configures** [Offline help for visitors](VX-011.md): Themes define Offline Pane settings and presentation.
- **Configures** [Visitor tracking consent and communication opt-ins](VX-012.md): The active theme supplies privacy messages and button labels.
- **Configures** [Post-chat survey for web visitors](VX-014.md): The visitor's theme selects ordinary and virtual-assistant surveys.
- **Configures** [Visitor chat notifications](VX-015.md): Theme settings control preview appearance and device availability.
- **Configures** [Chat tasks and topics for visitors](VX-017.md): The theme selects a Pre-Chat Task and its expiry behaviour.
- **Configures** [Rich content in visitor chat](VX-018.md): The visitor's theme supplies card and list appearance.
- **Configures** [Product cards in visitor chat](VX-019.md): The active theme selects the product-card configuration.
- **Configures** [Order cards in visitor chat](VX-020.md): The theme selects the visitor order-card configuration.
- **Configures** [File attachments for visitors](VX-021.md): The active theme controls the attachment menu entry.
- **Configures** [Email and print transcripts for visitors](VX-022.md): The active theme controls visitor transcript menu entries and labels.
- **Configures** [Appointment booking for visitors](VX-023.md): The visitor experience supplies the shared colours and fonts.
- **Configures** [Video Feed for visitors](VX-025.md): Themes select feed content and control visitor playback, discovery and action choices.
- **Configures** [Joining calls and approving Co-Browse](VX-026.md): The theme chooses the available entry controls and their labels.
- **Configures** [Chat avatars and visitor reactions](VX-027.md): The active theme controls avatar display, presentation and bot appearance.
- **Configures** [Streaming AI replies for visitors](VX-030.md): The active theme controls the visitor AI activity indicator.
- **Configures** [Visitor chat languages and text direction](VX-031.md): Themes provide language variants of visitor-facing messages.
- **Configures** [Previous chat history for visitors](VX-033.md): Themes control timestamps, advisor names and message presentation.
- **Configures** [Proactive chat invitations](ENG-004.md): Theme Based pre-chat task selection uses the task chosen in the visitor theme.
- **Configures** [Visitor event updates to customer context](ENG-007.md): The selected chat theme defines the visitor experience applied by the event.
- **Configures** [Virtual Assistant task messages and identity](ENG-014.md): Chat themes can override the assistant name and image.
- **Configures** [Product card configuration and shopping actions](COM-014.md): Themes select a reusable card configuration.
- **Configures** [Order card configuration and access](COM-015.md): Themes select the visitor's card configuration.
- **Configures** [PCI Payment Form in web chat](COM-024.md): Chat themes can customise the visitor invitation message and button.
- **Related** [Legacy chat pane settings](VX-032.md): Current themes use a separate configuration path from the legacy pane.
- **Related** [Image and font libraries](ADM-019.md): 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.