Layered chat window branding

As the name suggests, a layered chat window appears as a new element on your page instead of as a new window. Layered windows are optimized for display on mobile devices, but many users prefer them for desktop browsers, as well.

Branding options are grouped by complexity into Simple and Custom types, allowing you to customize the following interface elements:

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

Fastpath: To modify settings, go to Setup > Account Settings > Chats > Custom Chat Windows > New/Edit > Brandings.

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

Layout overview

Hover your mouse over the image to see the corresponding variable of individual elements.

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)

Window texts, messages and labels

Window texts, messages and labels can be customized per language. See How to provide a chat window in multiple languages.

Colors (Simple branding)

Fastpath: On the Brandings page, select Simple branding, Common - Layered page, and the Colors group.

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	Description
Content Background Color (R,G,B)	`content_background_color` Default: 35, 35, 35	The background color of the inner chat window, where visitors see the messages.
Content Background Transparency	`background_transparency` Default: 0.65	The transparency of the inner chat window.
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.
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.
Operator Message - Message - Font Color	`operator_message_font_color` Default: #E7E7E7	The color of operator messages.
Operator Message - Name - Font Color	`operator_message_sender_color` Default: #B2B2B2	The color of the operator's name.
Operator Message - Time - Font Color	`operator_message_sent_color` Default:#3DC8F3	The color of the time stamp when the operator sent the message.
Operator Message Background Color	`operator_background` Default: #232323	The background color of the operator message container.
Visitor Message - Message - Font Color	`visitor_message_font_color` Default: #FFFFFF	The color of the visitor's message.
Visitor Message - Name - Font Color	`visitor_message_sender_color` Default: #FFFFFF	The color of the visitor's name.
Visitor Message - Time - Font Color	`visitor_message_sent_color` Default: #FFFFFF	The color of the time stamp when the visitor sent the message.
Visitor Message Background Color	`visitor_background` Default: #3DC8F3	The background color of the visitor message container.

Colors (Custom branding)

Fastpath: On the Brandings page, select Custom branding, Common - Layered page, and the Colors group.

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	Description
ActiveAssist Activity Background Color	`aa_background` Default: ${form_background}	The background color of the message that describes the ActiveAssist 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	`dialog_ok_background` Default: ${button_background}	The background color of the OK button in dialogs.
Form Background Color	`form_background` Default: ${message_input_container_background_color}	The background color of the pre-chat and post-chat forms.
Form Input Background Color	`form_input_background` Default: ${form_background}	The background color of the input fields in pre-chat and post-chat forms.
Form Input Border Color	`form_input_border_color` Default: #6F6F6F	The border color of the pre-chat and post-chat forms.
Form Input Error Border Color	`form_input_error_border_color` Default: #FF0000	The border color of error messages in pre-chat and post-chat forms. For example, when the customer enters an invalid email address.
Form Input Font Color	`form_input_font_color` Default: ${text_color}	The font color of the input field content in pre-chat and post-chat forms that the customer types.
Form Input Placeholder Color	`form_input_placeholder_color` Default: #666666	The font color of placeholders in the input fields of forms.
Link Font Color	`link_color` Default: #9F9F9F	The color of links.
Link Font Hover Color	`link_hover_color` Default: #CFCFCF	The color of links when the customer hovers over a link.
Message Input Background Color	`message_input_background` Default: #FFFFFF	The background color of the input field, where customers type their messages.
Message Input Font Color	`message_input_font_color` Default: #000000	The color of customer messages as they type.
Operator Activity Font Color	`activity_color` Default: ${text_color}	The color of the message about agent activity.
Required Text Font Color	`required_font_color` Default: #C9C9C9	The color of the "Required" label in forms.
Status Message Background Color	`status_background` Default: #FFFFFF	The background color of status messages.
Status Message Font Color	`status_font_color` Default: #000000	The color of status messages.

Logo and images

Fastpath: On the Brandings page, select Custom branding, Common - Layered page, and the Chat Frame group.

Note: The default aspect ratio of the logo image is 1:1 (square). This setting can be overridden in a style sheet.

Key	Variable	Description
Icons - Header - Menu	`icon_header_menu` Default: https://genesyscustomercare.nanorep.co/storage/nr1/kb/8AF2B933/8AF2BA4B/8C810D27/531/lightbulb_bg.png
Icons - Header - Minimize	`icon_header_minimize` Default: https://genesyscustomercare.nanorep.co/storage/nr1/kb/8AF2B933/8AF2BA4B/8C810D27/531/lightbulb_bg.pngs.boldchat.com/images/floating/minimize-arrow.png
Icons - Menu - Minimize	`icon_menu_minimize` Default: https://genesyscustomercare.nanorep.co/storage/nr1/kb/8AF2B933/8AF2BA4B/8C810D27/531/lightbulb_bg.pngs.boldchat.com/images/floating/minimize.png
Icons - Menu - Close	`icon_menu_close` Default: https://genesyscustomercare.nanorep.co/storage/nr1/kb/8AF2B933/8AF2BA4B/8C810D27/531/lightbulb_bg.pngs.boldchat.com/images/floating/close.png