Customize a layered chat window
Adapt the look and feel of your chat windows to your design and locale.
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 |
---|---|
Defines Auto Answers messages for your customer self-service. For more information, see Auto Answers: Customer self-service. | |
Defines the color scheme of your layered chat window. For more information, see Colors (Layered - Basic). | |
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. |
|
Defines the size and title of the chat window. | |
Defines the button caption for ending the chat session. | |
Defines messages that the Automatic Distribution system displays to customers while they are waiting for an agent in queue. | |
Defines messages for the customer before and during co-browse sessions. | |
Defines the button captions for closing the chat window, sending a message, submitting a form, as well as button captions related to video sessions. | |
Defines captions, labels, and icons of the chat window. | |
Defines labels of the chat transcript dialog. | |
Defines system messages in the chat window. | |
Defines additional color schemes for your layered chat window. For more information, see Colors (Layered - Details). | |
Defines CSS styles for the chat window and for the page where the chat window is displayed. | |
Various labels and messages related to unavailable agents, video chats, auto-translated messages, and basic action buttons, such as Yes, No, OK, and Cancel. | |
Defines button captions and labels on the post-chat form. | |
Defines button captions and labels on the pre-chat form. | |
Defines button captions, labels and messages when the customer is in a remote control session. | |
Defines system messages and labels for the email that customers can send when chat is not available. | |
Defines the button caption for sending the post-chat form. | |
Defines the button caption for starting the chat session from the pre-chat form. | |
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.
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 | .
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 |