HELP FILE

Layered chat window branding

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

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.

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: [nonexistent]
The background color of the message that describes the ActiveAssist activity.
ActiveAssist Activity Font Color aa_color Default: [nonexistent]
The color of the message that describes the co-browse activity.
ActiveAssist Message - Message - Font Color aa_message_font_color Default: [nonexistent]
The color of co-browse system messages.
ActiveAssist Message - Name - Font Color aa_message_sender_color Default: [nonexistent]
The color of the agent's name who started the co-browse session.
ActiveAssist Message - Time - Font Color aa_message_sent_color Default: [nonexistent]
The color of the time stamp when the agent started the co-browse activity.
ActiveAssist Message Background Color aa_message_background Default: [nonexistent]
The background color of the co-browse message container.
Button Font Color button_font_color Default: [nonexistent]
The color of button labels.
Dialog Background Color dialog_background Default: [nonexistent]
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: [nonexistent]
The color of the button labels in chat window dialogs.
Dialog Cancel Button Background Color dialog_cancel_background Default: [nonexistent]
The background color of the Cancel button in dialogs.
Dialog Font Color dialog_font_color Default: [nonexistent]
The color of dialog texts.
Dialog OK Button Background Color dialog_ok_background Default: [nonexistent]
The background color of the OK button in dialogs.
Form Background Color form_background Default: [nonexistent]
The background color of the pre-chat and post-chat forms.
Form Input Background Color form_input_background Default: [nonexistent]
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: [nonexistent]
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: [nonexistent]
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://images.boldchat.com/images/floating/menu.png
Icons - Header - Minimize icon_header_minimize Default: https://images.boldchat.com/images/floating/minimize-arrow.png
Icons - Menu - Minimize icon_menu_minimize Default: https://images.boldchat.com/images/floating/minimize.png
Icons - Menu - Close icon_menu_close Default: https://images.boldchat.com/images/floating/close.png
Icons - Minimized - Idle icon_minimized_idle Default: https://images.boldchat.com/images/floating/minimized.png
Icons - Minimized - Message pending icon_minimized_message Default: https://images.boldchat.com/images/floating/minimized-message.png
Icons - Header - Menu icon_header_menu Default: https://images.boldchat.com/images/floating/menu.png
Icons - Header - Minimize icon_header_minimize Default: https://images.boldchat.com/images/floating/minimize-arrow.png
Icons - Menu - Minimize icon_menu_minimize Default: https://images.boldchat.com/images/floating/minimize.png
Icons - Menu - Close icon_menu_close Default: https://images.boldchat.com/images/floating/close.png
Icons - Minimized - Idle icon_minimized_idle Default: https://images.boldchat.com/images/floating/minimized.png
Icons - Minimized - Message pending icon_minimized_message Default: https://images.boldchat.com/images/floating/minimized-message.png

Window states

The classes below allow for further customization of the chat window during different states of its lifecycle.

  • Applies to the div#bc-chat-container element and the body element of the nested frame
  • Corresponds with the ChatPageTypes enum page name property
ChatPageTypes Enum Class Description/State
PRECHAT bc-chat-state-prechat Pre-chat
AUTO_ANSWERS bc-chat-state-auto-answers Auto answers
CHAT bc-chat-state-chat Active chat
POSTCHAT bc-chat-state-postchat Post-chat
FINAL_PAGE bc-chat-state-final Final chat page
Alternative to bc-chat-state-chat-sent
CHAT_SENT bc-chat-state-chat-sent Transcript sent confirmation
Alternative to bc-chat-state-final, if transcript is sent
NO_OPERATORS bc-chat-state-no-operators No operators are available
Alternative to bc-chat-state-email
EMAIL_MESSAGE bc-chat-state-email Optional Unavailable Email Form
Alternative to bc-chat-state-no-operators, if the feature is enabled
MESSAGE_SENT bc-chat-state-message-sent Unavailable Email Form sent confirmation
UNSECURE bc-chat-state-unsecure Chat is not allowed because it is not associated with a Wwebsite definition
UNSUPPORTED_BROWSER bc-chat-state-unsupported-browser Browser is unsupported

Layout

Includes allow you to inject custom JavaScript code, redesign the layout and fine-tune CSS settings in one place.

Fastpath: On the Brandings page, select Common - Layered and go to Includes. You can modify the layout and presentation of your chat windows under the Chat Frame Stylesheet and Chat Window Stylesheet options.

What is the difference between a chat window and a chat frame?

Every layered chat window comprise a window and a frame object with different scopes.
  • A chat window object is a container element that controls the window object of the host page, in which the chat window is embedded.
  • A chat frame object is the window object of the innermost iFrame, in which the chat runs.

How can I determine the scope of CSS classes and their effect?

To customize your CSS code, you can inspect chat window elements to determine their scope using Chrome, Firefox, or a professional development tool. .