Customize a layered chat window

Adapt the look and feel of your chat windows to your design and locale.

Fastpath: In the Web Admin Center, go to Channels > Chat > Chat Windows > [New or existing window] > Customization.

You can customize the following interface elements:

Window texts, messages and labels
Colors
Logo and images
Layout and custom events

You can use key chaining to reuse values for related elements.

Layout overview

A layered window has the following variables of individual elements:

General Text Color
Header Font Color
Header Background Color
Operator Message - Message - Font Color
Operator Message - Name - Font Color
Operator Message - Time - Font Color
Operator Message Background Color
Customer Message - Message - Font Color
Customer Message - Name - Font Color
Customer Message - Time - Font Color
Customer Message Background Color
Button Font Color
Link Font Color
Required Font Color
Message Input Font Color
Message Input Background Color
Button Background Color
Message Input Container Background Color
Content Background Color (R,G,B)

Overview of customization setting groups

The following table describes the key areas that you can customize for layered chat windows in Digital DX:

Main group - Key group	Description
Layered - Basic > AutoAnswers	Defines Auto Answers messages for your customer self-service. For more information, see Auto Answers: Customer self-service.
Layered - Basic > Colors	Defines the color scheme of your layered chat window. For more information, see Colors (Layered - Basic).
Layered - Basic > Other	Defines the default customer name, submit button caption and welcome message. The default customer name is displayed when a pre-chat form is not available or the customer does not provide a name.
Layered - Basic > Window	Defines the size and title of the chat window.
Layered - Chat page > Buttons	Defines the button caption for ending the chat session.
Layered - Details > ACD	Defines messages that the Automatic Distribution system displays to customers while they are waiting for an agent in queue.
Layered - Details > ActiveAssist	Defines messages for the customer before and during co-browse sessions.
Layered - Details > Buttons	Defines the button captions for closing the chat window, sending a message, submitting a form, as well as button captions related to video sessions.
Layered - Details > Chat Frame	Defines captions, labels, and icons of the chat window.
Layered - Details > Chat Transcript	Defines labels of the chat transcript dialog.
Layered - Details > Chat Window	Defines system messages in the chat window.
Layered - Details > Colors	Defines additional color schemes for your layered chat window. For more information, see Colors (Layered - Details).
Layered - Details > Includes	Defines CSS styles for the chat window and for the page where the chat window is displayed.
Layered - Details > Miscellaneous	Various labels and messages related to unavailable agents, video chats, auto-translated messages, and basic action buttons, such as Yes, No, OK, and Cancel.
Layered - Details > Post Chat Survey	Defines button captions and labels on the post-chat form.
Layered - Details > Pre Chat Survey	Defines button captions and labels on the pre-chat form.
Layered - Details > Remote Control	Defines button captions, labels and messages when the customer is in a remote control session.
Layered - Details > Unavailable Email	Defines system messages and labels for the email that customers can send when chat is not available.
Layered - Post chat > Buttons	Defines the button caption for sending the post-chat form.
Layered - Pre-chat > Buttons	Defines the button caption for starting the chat session from the pre-chat form.
Layered - Unavailable email > Buttons	Defines the button caption for closing the chat window after the customer sends an email when chat is not available.

Window texts, messages, and labels

Window texts, messages and labels can be customized per language. See also Provide a chat window in multiple languages.

Colors (Layered - Basic)

Define the basic color scheme of layered windows.

Tip: As a general rule, variable names reflect the name of the corresponding key. For example, you can refer to the Header Font Color key with the header_font_color variable.

Key	Variable and default value	Description
Button Background Color	`button_background` Default: #01A5EE	The background color of buttons in the chat window, such as the Send and Start Chat buttons.
Content Background Color (R,G,B)	`content_background_color` Default: 35, 35, 35	The background color of the inner chat window, where customers see the messages.
Content Background Transparency	`background_transparency` Default: 0.65	The transparency of the inner chat window.
Customer Message - Message - Font Color	`visitor_message_font_color` Default: #000000	The color of the customer's message.
Customer Message - Name - Font Color	`visitor_message_sender_color` Default: #FFFFFF	The color of the customer's name.
Customer Message - Time - Font Color	`visitor_message_sent_color` Default: #FFFFFF	The color of the time stamp when the customer sent the message.
Customer Message Background Color	`visitor_background` Default: #3DC8F3	The background color of the customer message container.
General Text Color	`text_color` Default: white	The color of system messages and labels.
General Text Font	`text_font` Default: sans-serif	The font family of system messages and labels.
General Text Size	`text_size` Default: 1em	The font size of system messages and labels.
Header Background Color	`header_background_color` Default: #01A5EE	The background color of the chat window's header.
Header Font Color	`header_font_color` Default: #FFFFFF	The color of the label in the chat window's header. To change the label of the chat window, go to Layered - Basic > Window > Window Title.
Message Input Background Color	`message_input_background` Default: #FFFFFF	The background color of the input field, where customers type their messages.
Message Input Container Background Color	`message_input_container_background_color` Default: #232323	The border color of the message input field and the Send button at the bottom of the chat window.
Message Input Font Color	`message_input_font_color` Default: #000000	The color of customer messages as they type.
Operator Message - Message - Font Color	`operator_message_font_color` Default: #E7E7E7	The color of agent messages.
Operator Message - Name - Font Color	`operator_message_sender_color` Default: #B2B2B2	The color of the agent's name.
Operator Message - Time - Font Color	`operator_message_sent_color` Default: #3DC8F3	The color of the time stamp when the agent sent the message.
Operator Message Background Color	`operator_background` Default: #232323	The background color of the agent message container.

Colors (Layered - Details)

Key	Variable and default value	Description
ActiveAssist Activity Background Color	`aa_background` Default: ${form_background}	The background color of the message that describes the co-browse activity.
ActiveAssist Activity Font Color	`aa_color` Default: ${text_color}	The color of the message that describes the co-browse activity.
ActiveAssist Message - Message - Font Color	`aa_message_font_color` Default: ${operator_message_font_color}	The color of co-browse system messages.
ActiveAssist Message - Name - Font Color	`aa_message_sender_color` Default: ${operator_message_sender_color}	The color of the agent's name who started the co-browse session.
ActiveAssist Message - Time - Font Color	`aa_message_sent_color` Default: ${operator_message_sent_color}	The color of the time stamp when the agent started the co-browse activity.
ActiveAssist Message Background Color	`aa_message_background` Default: ${operator_background}	The background color of the co-browse message container.
Button Font Color	`button_font_color` Default: ${text_color}	The color of button labels.
Dialog Background Color	`dialog_background` Default: ${text_color}	The background color of dialogs, such as when the agent asks the customer for remote control permission.
Dialog Button Font Color	`dialog_button_font_color` Default: ${text_color}	The color of the button labels in chat window dialogs.
Dialog Cancel Button Background Color	`dialog_cancel_background` Default: ${form_background}	The background color of the Cancel button in dialogs.
Dialog Font Color	`dialog_font_color` Default: ${form_background}	The color of dialog texts.
Dialog OK Button Background Color