HELP FILE

Customize a layered chat window

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

Fastpath: At admin.bold360.com, 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

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

Overview of customization setting groups

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

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: [nonexistent]

The background color of the message that describes the co-browse 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.
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.
Video Accept Button Background Color video_accept_button_color

Default: #32C357

The background color of the button to accept a video chat invitation. *
Video Decline Button Background Color video_decline_button_color

Default: #EC3333

The background color of the button to decline a video chat invitation. *
Video Setup Background Color video_setup_background

Default: [nonexistent]

The background color of the video chat setup window. *
Video Setup Button Border Radius video_setup_border_radius

Default: 0.2em

The border radius of the video setup button, which makes the corners of button rounded. *
Video Setup Button Shadow Color (R, G, B, A) video_setup_shadow_color

Default: 204, 204, 204, 1

The color and opacity of the video setup button's shadow. *
Video Setup Device Button Color video_setup_device_button_color

Default: #989898

The color of the button to set up your camera. *

* Accessible through the legacy web client (web.boldchat.com).

Images and captions (Layered - Details > Chat Frame)

Note: The default aspect ratio of the logo image is 1:1 (square). This setting can be overridden in style sheet.
Important: To have a custom logo, you must define a pop-up chat window.
Key Variable Description
Icons - Header - Menu icon_header_menu The Menu icon in the header of the chat window.
Icons - Header - Minimize icon_header_minimize The Minimize icon in the header of the chat window.
Icons - Menu - Close icon_menu_close The Close icon in the chat window menu.
Icons - Menu - Email icon_menu_email The Email icon in the chat window menu.
Icons - Menu - Minimize icon_menu_minimize The Minimize icon in the chat window menu.
Icons - Menu - Send-file icon_menu_close The Send file icon in the chat window menu.
Icons - Minimized - Idle icon_minimized_idle When the chat window is minimized, this icon represents that there are no new messages from the agent.
Icons - Minimized - Message pending icon_minimized_message When the chat window is minimized, this icon represents that there are new messages from the agent.
Close Text close_frame_text Tooltip for the Close button.
Email Transcript Text email_frame_text Tooltip for the Transcript button.
End Chat Text end_frame_text Tooltip for the End Chat button.
Minimize Text minimize_frame_text Tooltip for the Minimize button.
Send File Text send_file_frame_text Tooltip for the Send File button.

Button captions of the chat window, pre-chat, and post-chat forms

You can show custom buttons to customers to close the chat window, start chat from the pre-chat from, or close the post-chat form.

  1. Depending on which button's caption you want to customize, do the following:
    • To change the button caption for ending the chat session, go to Layered - Chat page > Buttons > Submit Button
    • To change the button caption for starting the chat from the pre-chat form, go to Layered - Pre-chat > Buttons > Submit Button
    • To change the button caption for closing the post-chat form, go to Layered - Post chat > Buttons > Submit Button
  2. Change the caption of the button in the editor at the bottom of the page.
  3. Save your changes.

Chat window size

The default size of a layered chat window is 530px (height) x 350px (width). To resize the chat window, go to Layered - Basic > Window and set the new Window Height and Window Width.

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 agents 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 website definition
UNSUPPORTED_BROWSER bc-chat-state-unsupported-browser Browser is unsupported

Layout customization

On the Customization tab, select Layered - Details and select the Includes key group. 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 is comprised of 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.