Chat Themes

Overview

The Chat Themes module allows you to create an enterprise-wide or campaign-specific chat design.

Where to find the Chat Themes module

Open the Workspace.
Select Chat Themes under the Resources menu

What is a Chat Theme?

A chat theme sets the look and feel for a chat session.

The sections of a chat window that can be viewed/hidden and their components individually designed are:

1. Display Chat Themes

This feature allows Workspace Administrators to navigate the list of chat themes.

From this list you can add, edit, delete or simply view chat themes.

Open the Workspace.
Select Chat Themes from the Resources menu.

For each file, the list displays the following details:

Column	Contents
	Select/Deselect the theme. If the theme is currently being used by a chat campaign, that theme cannot be selected for deletion.
Theme	The Theme Name is displayed. The Organisational Default Theme will be displayed in bold
Updated By	The name (first name and last name) of the user who most recently edited the theme.
Updated On	The date and time at which the theme was most recently edited.
More Options (…)	Click to see options: Edit name Edit theme View usage Delete (only available if theme is not being used in a campaign)

2. Add or Edit a Chat Theme

This feature allows Workspace Administrators to create new or update existing chat themes.

Open the Workspace.
Select Chat Themes from the Resources menu.
1. To create a new theme, click the Create new chat theme button in the header.
2. To update an existing theme or preview a theme, locate the theme name from the list and click the Options icon to select the appropriate Edit option:

Edit a Theme Name

To edit the Theme Name:

Select the Edit Name from the options menu on the Theme in the list
Update the name in the field
Click Save

Edit a Theme

To edit the design of a Theme:

Click on the record or select the Edit Theme from the options menu on the Theme in the list
The user will be presented the Edit page where the appearance and messaging of the chat widget can be updated and tested

2.1. Appearance

Shape

Options are available to choose the shape and style of the widget:

Style:

Minimised:

Colours

Options are available to customise the colours of the chat widget to match your website and/or organisation branding. The user has the option to select a Pre-set colour theme, or can created a Customised colour theme:

Pre-set:

A user can select from an already configured colour or choose to add an additional colour of their choice:

The Pre-set colours are applied to the theme like shown below:

To customise the colours of different elements of the widget, see the next section for information on the Customised options.

Customised

Section	Field	What you should do
Header	Background	Use the Colour Selection Tool to set the Background Colour.
Header	Font and icons	Use the Colour Selection Tool to set the Font Colour.
Infobar	Background	Use the Colour Selection Tool to set the Background Colour.
Infobar	Font	Use the Colour Selection Tool to set the Font Colour.
Conversation area	Background	Use the Colour Selection Tool to set the Background Colour.
	Captions	Use the Colour Selection Tool to set the Caption text Colour.
	Agent's bubble	Use the Colour Selection Tool to set the Agent Balloon Colour
	Agent's text	Use the Colour Selection Tool to set the Agent Message Colour.
	Agent's name	Use the Colour Selection Tool to set the Agent Name Colour.
	Customer's bubble	Use the Colour Selection Tool to set the Customer Bubble Colour.
	Customer's text	Use the Colour Selection Tool to set the Customer Message Colour.
	Customer's name	Use the Colour Selection Tool to set the Customer Name Colour.
Type area	Background	Use the Colour Selection Tool to set the Background Colour.
	Placeholder text	Use the Colour Selection Tool to set the Placeholder Text Colour.
	Font	Use the Colour Selection Tool to set the Font Colour.
	Icons	Use the Colour Selection Tool to set the Icon Colour.
	Lines	Use the Colour Selection Tool to set the Lines Colour.
Buttons Pre/Post-Chat Surveys, for example, “Start Chat”:	Background	Use the Colour Selection Tool to set the Background Colour.

Content

Here the user can define any other details to configure the widget:

Section	Field	What you should do
Minimised	Title	Enter the Title to be displayed in the Header when the widget is minimised on the Customer browser
Maximised	Title	Enter the Title to be displayed in the Header when the widget is open/maximised on the Customer browser
	Typing area placeholder	Enter the text that will be displayed to the contact in the typing area, e.g. "Type your message here and then press Enter".
	Sound alert	Choose from Default Disabled, Default Enabled, or Disabled. When Muted as default, a sound icon appears in the window header, and a sound announces the arrival of a new message. When Unmuted as default, a blocked sound icon appears in the window header. The contact can enable or disable the sound alert by clicking on the icon.
	Alert tone	Choose from Small Bell, Airplane Ding, or Bubble Pop
	Agent avatar	Click the toggle to enable or disable.
	Agent description	Click the toggle to enable or disable.
	Logo	If a logo is required, click the toggle to enable to show the Select file icon. Click to open the File selector displaying image files loaded into the Workspace or the option to upload a file from the user device. To preview a image in the list, hover over the name of the file. To search for a file, click the icon in the top-right to open the search bar to search a file name.

Position

The final section is defining how the widget

Field	What you should do
Alignment	Sets the position of the widget to be displayed on the website page. Options are: Right or Left
Bottom spacing	Set the space between the bottom of the widget and the bottom edge of the browser window frame. Limited to 100px
Side spacing	Set the space between the sideof the widget and the side edge of the browser window frame. Limited to 100px

2.2. Chat messages

Field name	What you should do
Waiting Message	The message that appears in the info bar when the agent is not yet connected, e.g. "Please wait while we connect you to an agent."
Agent Welcome message	Enter a welcome message that a contact sees when they are connected to an agent, e.g. "Hi <system variable>, how can I help you", where the system variable used is typically the contact's name. Type “/” to add system variables
After Hours	Enter the text that a contact will see when they first request a chat session at a time that is outside of campaign operating hours, e.g. "There are no agents available to chat at this time. Please request a chat between 8:00 am and 6:00 pm."
Close chat dialog	Enter the text that a contact will see when they terminate a chat session, e.g. "Are you sure you want to end this chat conversation, <system variable>?" Where the system variable used is typically the contact's name.