Chat Window Articles

How to enable video chat

Allow agents to chat with your visitors face to face. During video sessions, either both parties or only agents can stream video.

Who can use this feature?

Important: Video chat is available on request. Contact your Customer Success representative for details.
  • Agents can use video chat in the legacy web client at web.boldchat.com only.
  • Visitors and agents must use Chrome for Android on mobile, or any of the last 20 versions of Chrome on desktop. Firefox, Safari, Internet Explorer and Edge are not supported at this time.
Note: Video chats are never recorded; however, when Speech-to-Text is enabled, the transcribed text remains available in the chat history.

What are the technical requirements to use video chat?

Requirement Details
Allowlisting and open ports

From both the support agent's and the customer's network, the following web resources need to be accessible:

  • *.bold360.com
  • For networks explicitly filtering outbound destination ports and protocols, the following ports are used on Bold media sessions:15000 (UDP traffic) or 443 (TCP traffic) for Bold media sessions

    Tip: It is recommended that you allow UDP traffic through port 15000. Restricting the traffic to TCP may decrease the quality of the Bold support experience.

Fix IP
  • 52.154.166.133
  • 20.106.8.231
  • 20.221.16.142
  • 20.109.225.86
  • 20.82.12.159
  • 20.103.243.187
  • 20.126.246.165
  • 20.76.254.181
     
Bandwidth You need a working internet connection with stable 0.5 Mbps download and 0.8 Mbps upload bandwidth.
  • Minimum quality (640x480) - ~164 KBytes/sec, both for inbound and outbound video chat (depends on whether one-way or two-way video streaming is used)
  • HD quality (720p) ? ~492 KBytes/sec
  • Full HD quality (1080p) - ~984 KBytes/sec
  • Type/bandwidth: jitsi/webrtc

Configuring the chat window

This feature is part of the Custom Chat Window definition process. A chat window definition controls the look and feel and advanced behavior of the interface that is opened when a visitor clicks an associated button or link. When enabled, video options are displayed at the bottom of the chat window.

Restriction: For security reasons, recent versions of Chrome and Firefox require that any website that implements Powerful Features, such as voice or video, must be served over a secured connection (HTTPS). Bold360 communications are always encrypted, so video chat will be launched in a separate secure window if your website is unsecured (HTTP) and the visitor is on a browser that restricts powerful features.

If you are running an HTTP site with Bold360, we recommend that you make the switch to HTTPS:

  1. Using the Desktop Client, create a new custom chat window, as follows:
    1. From the main menu of the Desktop Client, go to Setup > Account Setup. The Account Setup window is displayed.
    2. On the left menu of the Account Setup window, click Chats > Custom Chat Windows > New

    Result: The New Custom Chat Window is displayed.

  2. On the New Custom Chat Window window, make sure you are on the Chat Form tab.
    Note: Video chat is only available for layered chat windows.
  3. To activate video chat for any layered window on either desktop or mobile, select Video Chat.

    Result: Additional options are displayed.

  4. Additional options:
    • Operator Video Only: Only the agent can stream video. Audio is two-way, but video is one-way. Use this to prevent visitors from accidentally showing themselves.
    • Go Directly to Video Setup: The camera setup window is displayed to the visitor after they click the video chat button and complete the pre-chat form (if applicable). The visitor can choose video settings before calling the agent.
    • Multiple Visitor Confirmations: When enabled, the visitor is shown an additional prompt before chat begins. Use this for enhanced visitor privacy.
    • Speech-to-Text: This feature transcribes the conversation between the agent and the visitor in real time using Google's Web Speech API. Language is automatically detected based on the chat window's language setting that takes into account each participant's IP address and HTTP header. The actual spoken language may not always be accurately detected. Transcribed messages are excluded from the chat transcript and are accessible only to the agent in the Message History panel, marked with STT.
      Note: The accuracy of speech recognition is influenced by the visitor's acoustic environment, microphone quality, connection bandwidth, clarity of speech and pronunciation. In adverse conditions, transcription quality may degrade and affect the agent's chat experience.

We recommend that you use different machines for testing video chat as agent and visitor.

Having problems?

Check the following.

Symptom Action
Video chat is not available. Are you using the web client at https://web.boldchat.com/ in a compatible browser? Video is only supported in the last 20 versions of Chrome.
Webcam and/or audio access is blocked in the browser.
  1. Click the camera icon in the address bar to bring up the device permissions dialog.
  2. Ensure that either the Always allow... or Continue allowing... option is selected.
  3. Click Done.

You will not be asked again once you have given permission to access your devices.

If the issue persists, check that access to devices is not being blocked globally.

  1. Go to Settings > Show advanced settings....
  2. Under Privacy, click Content settings....
  3. Ensure that Ask when a site requires access... is selected under both Microphone and Camera.
  4. Click Manage exceptions... to ensure that Digital DX hosts are not being blocked.
  5. Click Done.
Note: You may need to reload the page for the permission settings to take effect.
Video is stuttering or breaking up. Video chat is bandwidth-intensive. Check your network connectivity and quit any application that may produce high network traffic.
Video is blank or there is no audio.
  • Clear your browser's cookies.
  • Are your drivers up-to-date? Install the latest drivers for your devices.
  • Are other applications using your webcam? Multiple capture may not be supported by your system. Ensure that the webcam light is off before starting the chat and quit all potentially interfering applications.
  • Are both audio and video streams enabled? Check the media controls.
Video chat starts in a popup window. Your site is served over an unsecured (HTTP) connection. See Configuring the chat window for how to fix the problem.

How to enable video chat

Allow agents to chat with your visitors face to face. During video sessions, either both parties or only operators can stream video.

Who can use this feature?

  • Video chat is available on request for Premier or Enterprise subscribers. Contact your representative for details and pricing.
  • Operators can use video chat in the web client at web.boldchat.com only.
  • Visitors and operators must use Chrome for Android on mobile, or any of the last 20 versions of Chrome on desktop. Firefox, Safari, Internet Explorer and Edge are not supported at this time.
Note: Video chats are never recorded; however, when Speech-to-Text is enabled, the transcribed text remains available in the chat history.

What are the technical requirements to use video chat?

Requirement Details
Allowlisting and open ports

From both the support agent's and the customer's network, the following web resources need to be accessible:

  • *.bold360.com
  • For networks explicitly filtering outbound destination ports and protocols, the following ports are used on Bold media sessions:15000 (UDP traffic) or 443 (TCP traffic) for Bold media sessions
    Tip: It is recommended that you allow UDP traffic through port 15000. Restricting the traffic to TCP may decrease the quality of the Bold support experience.
Fix IP
  • 52.154.166.133
  • 20.106.8.231
  • 20.221.16.142
  • 20.109.225.86
  • 20.82.12.159
  • 20.103.243.187
  • 20.126.246.165
  • 20.76.254.181
Bandwidth You need a working internet connection with stable 0.5 Mbps download and 0.8 Mbps upload bandwidth.
  • Minimum quality (640x480) - ~164 KBytes/sec, both for inbound and outbound video chat (depends on whether one-way or two-way video streaming is used)
  • HD quality (720p) ? ~492 KBytes/sec
  • Full HD quality (1080p) - ~984 KBytes/sec
  • Type/bandwidth: jitsi/webrtc

Configuring the chat window

This feature is part of the Custom Chat Window definition process. A chat window definition controls the look and feel and advanced behavior of the interface that is opened when a visitor clicks an associated button or link. When enabled, video options are displayed at the bottom of the chat window.

Restriction: For security reasons, recent versions of Chrome and Firefox require that any website that implements Powerful Features, such as voice or video, must be served over a secured connection (HTTPS). BoldChat communications are always encrypted, so video chat will be launched in a separate secure window if your website is unsecured (HTTP) and the visitor is on a browser that restricts powerful features.

If you are running an HTTP site with BoldChat, we recommend that you make the switch to HTTPS:

  1. Using the BoldChat Operator Client, create a new custom chat window, as follows:
    1. From the main menu of the BoldChat Operator Client, go to Setup > Account Setup. The Account Setup window is displayed.
    2. On the left menu of the Account Setup window, click Chats > Custom Chat Windows > New

    Result: The New Custom Chat Window is displayed.

  2. On the New Custom Chat Window window, make sure you are on the Chat Form tab.
    Note: Video chat is only available for layered chat windows.
  3. To activate video chat for any layered window on either desktop or mobile, select Video Chat.

    Result: Additional options are displayed.

  4. Additional options:
    • Operator Video Only: Only the operator can stream video. Audio is two-way, but video is one-way. Use this to prevent visitors from accidentally showing themselves.
    • Go Directly to Video Setup: The camera setup window is displayed to the visitor after they click the video chat button and complete the pre-chat form (if applicable). The visitor can choose video settings before calling the operator.
    • Multiple Visitor Confirmations: When enabled, the visitor is shown an additional prompt before chat begins. Use this for enhanced visitor privacy.
    • Speech-to-Text: This feature transcribes the conversation between the operator and the visitor in real time using Google's Web Speech API. Language is automatically detected based on the chat window's language setting that takes into account each participant's IP address and HTTP header. The actual spoken language may not always be accurately detected. Transcribed messages are excluded from the chat transcript and are accessible only to the operator in the Message History panel, marked with STT.
      Note: The accuracy of speech recognition is influenced by the visitor's acoustic environment, microphone quality, connection bandwidth, clarity of speech and pronunciation. In adverse conditions, transcription quality may degrade and affect the operator's chat experience.

We recommend that you use different machines for testing video chat as operator and visitor.

Having problems?

Check the following.

Symptom Action
Video chat is not available. Are you using the web client in a compatible browser? Video is only supported in Chrome version 31 or newer. If you are using the BoldChat Operator Client, go to https://web.boldchat.com/.
Webcam and/or audio access is blocked in the browser.
  1. Click the camera icon in the address bar to bring up the device permissions dialog.
  2. Ensure that either the Always allow... or Continue allowing... option is selected.
  3. Click Done.

You will not be asked again once you have given permission to access your devices.

If the issue persists, check that access to devices is not being blocked globally.

  1. Go to Settings > Show advanced settings....
  2. Under Privacy, click Content settings....
  3. Ensure that Ask when a site requires access... is selected under both Microphone and Camera.
  4. Click Manage exceptions... to ensure that BoldChat hosts are not being blocked.
  5. Click Done.
Note: You may need to reload the page for the permission settings to take effect.
Video is stuttering or breaking up. Video chat is bandwidth-intensive. Check your network connectivity and quit any application that may produce high network traffic.
Video is blank or there is no audio.
  • Clear your browser's cookies.
  • Are your drivers up-to-date? Install the latest drivers for your devices.
  • Are other applications using your webcam? Multiple capture may not be supported by your system. Ensure that the webcam light is off before starting the chat and quit all potentially interfering applications.
  • Are both audio and video streams enabled? Check the media controls.
Video chat starts in a popup window. Your site is served over an unsecured (HTTP) connection. See Configuring the chat window for how to fix the problem.

How to show an email form when no operators are available

You can set the Unavailable Email Form to appear when a no operators are available to answer a chat request.

This feature is part of the Custom Chat Window definition process. A chat window definition controls the look and feel and advanced behavior of the interface that is opened when a visitor clicks an associated button or link.
  1. Using the BoldChat Operator Client, create a new custom chat window, as follows:
    1. From the main menu of the BoldChat Operator Client, go to Setup > Account Setup. The Account Setup window is displayed.
    2. On the left menu of the Account Setup window, click Chats > Custom Chat Windows > New

    Result: The New Custom Chat Window is displayed.

  2. On the Unavailable Email Form tab, select Enable.
    Tip: To customize or localize the Unavailable Email Form, go to Brandings tab > Custom > Common and select the Unavailable email group.
  3. Enter the email address to which submitted forms should be sent.

    Multiple emails must be separated by a comma, semi-colon, or space.

  4. Save your changes.

How to email a chat transcript

You may share the transcript of a chat with others that do not have access within BoldChat.

  1. Select the chat you would like to send.
  2. Click the Email icon in the toolbar above the chat list.
  3. In the dialog window that appears, enter the email address of the recipient and click OK.

    Result:

    Tip: The visitor also has the ability to send the chat transcript by clicking the Email icon in the lower-right corner of the chat window.

How to associate canned messages with a chat window

You can correlate specific canned message folders with a chat window. This can be helpful in an environment with multiple web sites to ensure that relevant messages are presented to operators.

This feature is part of the Custom Chat Window definition process. A chat window definition controls the look and feel and advanced behavior of the interface that is opened when a visitor clicks an associated button or link.
  1. Using the BoldChat Operator Client, create a new custom chat window, as follows:
    1. From the main menu of the BoldChat Operator Client, go to Setup > Account Setup. The Account Setup window is displayed.
    2. On the left menu of the Account Setup window, click Chats > Custom Chat Windows > New

    Result: The New Custom Chat Window is displayed.

  2. On the Other tab, select the canned message folders you want to associate with the chat window.
  3. Save your changes.

Provide a chat window in multiple languages

You can set a chat window to be displayed in any of seven pre-translated languages or 35 custom languages. There is no need to create multiple chat windows for multiple languages.

This feature is part of the chat window setup. A chat window controls the look and feel and advanced behavior of the interface that is opened when a customer clicks an associated button or link. Multi-language set-up for chat windows is part of the customization procedure.
  1. Create or edit a chat window, as follows:
    1. In the Web Admin Center, go to Channels > Chat > Chat Windows.
    2. Select an existing chat window or click Create New.
  2. On the Customization tab under Languages, choose the languages in which you want the chat window to be made available.
  3. Set a Primary Language.

    The primary language is shown to customers when no translation is available in their own language.

    Example: For example, if English is your default language, a customer from Poland sees the chat window in English unless you specifically select Polish as a provided language and add a Polish translation.

  4. Customize the window and translations, as follows:
    1. Select an item under Main group > Key group > Key.
    2. Under Edit Content, choose the language you want to edit.
    3. Change the text or settings.
    4. Continue making other changes.
    5. Save your changes.
    Remember: Digital DX provides translations in the following languages: English (en-US), Dutch (nl-NL), French (fr-FR), German (de-DE), Italian (it-IT), Spanish (es-ES), Portuguese (pt-BR). For all other languages, you must provide your own translations.
  5. Save your changes.
Can I allow customers to choose a language on the pre-chat form?
Yes. Go to Channels > Chats > [New Chat Window] > Pre-chat form > Standard Fields > Language Selector.
How does Digital DX know which language to show to a customer?
Customer language is determined as follows:
  • Selection made by the customer on the pre-chat form (stronger than all other parameters)
  • Language parameter passed by the HTML snippet
  • Customer's browser language setting
  • Customer's IP

Digital DX looks for a customized (localized, translated) chat window for the chosen or detected language. If no customized window exists, the default language is shown.

Tip: The customer's language is saved as a property of the chat. This property can be used for routing chat, and can be displayed to the agent. A language property can also be set for departments, allowing automatic filtering.

How to prompt visitors for information before chat (pre-chat form)

You can set up a pre-chat form that is displayed to visitors after they click a chat button but before actually chatting with an operator. The pre-chat form is a component of the Custom Chat Window definition associated with a chat button or chat invitation. The form can be customized. Visitor input is added to the incoming chat.

This feature is part of the Custom Chat Window definition process. A chat window definition controls the look and feel and advanced behavior of the interface that is opened when a visitor clicks an associated button or link. Once enabled and associated with a custom chat button definition, the form is displayed for all chat sessions initiated from the associated button.
  1. Using the BoldChat Operator Client, create a new custom chat window, as follows:
    1. From the main menu of the BoldChat Operator Client, go to Setup > Account Setup. The Account Setup window is displayed.
    2. On the left menu of the Account Setup window, click Chats > Custom Chat Windows > New

    Result: The New Custom Chat Window is displayed.

  2. On the New Custom Chat Window, click the Pre-Chat Form tab.
  3. Click Enable the activate the form.
  4. To allow visitors to choose the chat window language (as set up under Brandings), allow the Language Selector to be shown.

    See also How to provide a chat window in multiple languages.

  5. To prompt visitors for basic information or for a response to an initial question, set any of the following as required or optional:
    • Name
    • Last Name
    • Email
    • Phone
    • Initial Question
    Tip: To customize these fields, go to the Brandings tab under Custom > Pre-Chat Survey > Chat Survey Initial Question
  6. To allow visitors to associate the chat with a department in your organization, select an option for Choose Department.

    To provide the visitor with choices, you must add Available Departments.

  7. If the custom chat window definition is associated with a custom chat invitation definition, you can enable the pre-chat form for chats that are initiated through the custom chat invitation by selecting Enable Pre-chat Survey on Invited 'Pro-Active' Chats.
  8. Save your changes.

How to present a post-chat survey to visitors

You can prompt visitors for feedback after a chat has been closed.

This feature is part of the Custom Chat Window definition process. A chat window definition controls the look and feel and advanced behavior of the interface that is opened when a visitor clicks an associated button or link.
  1. Using the BoldChat Operator Client, create a new custom chat window, as follows:
    1. From the main menu of the BoldChat Operator Client, go to Setup > Account Setup. The Account Setup window is displayed.
    2. On the left menu of the Account Setup window, click Chats > Custom Chat Windows > New

    Result: The New Custom Chat Window is displayed.

  2. On the Post-Chat Form tab, select Show survey to visitors after they end the chat.
  3. To add field for standard survey questions, select any of the following options:
    • Prompt to rate Responsiveness
    • Prompt to rate Knowledge
    • Prompt for Comments
    • Prompt to rate Professionalism
    • Prompt to rate Overall
    Tip: To customize or localize the text associated with these options, go to Brandings tab > Custom > Common and select the Post Chat Survey group.
  4. To prevent the survey from being shown to visitors when the chat session involved a limited amount of communication, select Hide survey if visitor sends less than X messages.
  5. Save your changes.

    Result:

How to gather information from operators (Operator Wrap-Up)

Use the Operator Wrap-Up feature to gather information from operators about ended sessions.

This feature is part of the Custom Chat Window definition process. A chat window definition controls the look and feel and advanced behavior of the interface that is opened when a visitor clicks an associated button or link.
  1. Using the BoldChat Operator Client, create a new custom chat window, as follows:
    1. From the main menu of the BoldChat Operator Client, go to Setup > Account Setup. The Account Setup window is displayed.
    2. On the left menu of the Account Setup window, click Chats > Custom Chat Windows > New

    Result: The New Custom Chat Window is displayed.

  2. On the Operator Wrap-Up tab, set the following options:
    Option Description
    Auto-Close Set how long an ended session remains in the active chats view (shown in italics) before closing automatically. Required fields must be completed before the session can close.
    Standard Wrap-Up Set fields that operators must complete before a session can be closed.
    Tip: To create values for these fields, see Organizing Chats.
    Custom Wrap-Up Enterprise subscribers can set additional fields that operators can complete before a session can be closed. Unlike standard wrap-up, multiple response types are allowed (text, drop-down, radio button). Click New to set up fields and values. Fields can be required or optional.
  3. To prevent the survey from being shown to visitors when the chat session involved a limited amount of communication, select Hide survey if visitor sends less than X messages.
  4. Save your changes.

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:

  1. General Text Color
  2. Header Font Color
  3. Header Background Color
  4. Operator Message - Message - Font Color
  5. Operator Message - Name - Font Color
  6. Operator Message - Time - Font Color
  7. Operator Message Background Color
  8. Customer Message - Message - Font Color
  9. Customer Message - Name - Font Color
  10. Customer Message - Time - Font Color
  11. Customer Message Background Color
  12. Button Font Color
  13. Link Font Color
  14. Required Font Color
  15. Message Input Font Color
  16. Message Input Background Color
  17. Button Background Color
  18. Message Input Container Background Color
  19. 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

Optional: Customize Chat Windows

Note: This article is part of a Quick Start Guide to help you implement your Digital DX environment from scratch.

Every business has its own unique voice and brand identity, and Digital DX gives you the control and flexibility to customize your implementation to your unique business needs.

  1. Go to Channels > Chat > Chat Windows.
  2. Click on the name of your chat window to edit the chat window settings. Select from the following options:
    • General
    • Pre-chat form
    • Post-chat form
    • Message content
    • Agent wrap-up
    • Auto Answers
    • Customization

What is the relationship between Digital DX AI touchpoints and Digital DX chat windows?

Tip: For information about the differences between Digital DX Agent and Digital DX AI, see What is Digital DX AI?.

One Digital DX Agent account can only be integrated with one Digital DX AI account. A Digital DX AI account can escalate to more than one Digital DX Agent accounts, but it is not recommended to do so.

A Digital DX Agent account can have several chat windows, but one chat window can only be associated with one Digital DX AI Knowledge Base. A Digital DX chat window is similar to a Digital DX AI touchpoint configuration, which defines the behavior and appearance of a chat widget.

So while you can only associate one Digital DX Agent account with one Digital DX AI account, you can display the content of all your Digital DX AI Knowledge Bases by setting up multiple Digital DX chat windows.

Set the chat window seen by customers

To choose the actual interface seen by customers upon clicking a chat button, you must associate your chat button with a chat window.

This feature is part of the chat button setup process for both floating and static buttons.

  1. Create or edit a fixed-position (static) or floating chat button, as follows:
    1. In the Web Admin Center, go to Channels > Chat > Chat Buttons (Static) / Chat Buttons (Floating).
    2. Select an existing chat button or click Create New.
  2. On the Settings tab, choose the Chat Window to associate with the chat button.
  3. Save your changes.

    Result: The settings are applied to the chat button.

Your chat button is ready to be set as a chat entry point by being associated with an HTML snippet and inserted to a site.

To activate a newly created chat button as a chat entry point on your website, you must paste the HTML code to your site. When editing an existing button, you do not need to paste the code since these settings are not in the HTML code itself, but rather on Digital DX servers.

Customizing pop-up chat windows

Pop-up chat windows open in a new browser window.

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

  • Window texts, messages and labels
  • Colors
  • Logo and images
  • Layout and custom scripting
Fastpath: To modify settings, go to Setup > Account Settings > Chats > Custom Chat Windows > Brandings.
Tip: You can use key chaining to reuse values for related elements.

Layout overview

A pop-up window has the following variables of individual elements:

  1. Logo URL
  2. Text Color
  3. Content Background Color (R,B,G)
  4. Header Background Color
  5. Chat message field
  6. Send Button
  7. End Button

Window texts, messages and labels

Window texts, messages and labels are language-dependent, and not listed here. For more information, see The Website Definition (managing multiple sites).

Colors

Fastpath: On the Brandings page, select Common - Layered and go to Colors.
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.
Setting group Key Variable Default value
Simple Content Background Color (R,G,B) content_background_color #F0F0F0
Header Background Color header_background_color url('https://genesyscustomercare.nanorep.co/storage/nr1/kb/8AF2B933/8AF2BA4B/8C810D27/531/lightbulb_bg.png')
Text Color text_color #000000
Text Font text_font verdana, arial, helvetica, sans-serif
Text Size text_size 12px

Logo and images

Fastpath: On the Brandings page, select Common - Layered and go to Chat Frame.
Note: The default aspect ratio of the logo image is 1:1 (square). This setting can be overridden in the style sheet.
Setting group Key Default value
Simple Logo - Favicon URL https://genesyscustomercare.nanorep.co/storage/nr1/kb/8AF2B933/8AF2BA4B/8C810D27/531/lightbulb_bg.pnghat.com/favicon.ico
Logo Link URL http://www.boldchat.com
Logo URL https://genesyscustomercare.nanorep.co/storage/nr1/kb/8AF2B933/8AF2BA4B/8C810D27/531/lightbulb_bg.pnghat.com/ext/images/BoldChat_logo.png

Layout and custom scripting

Fastpath: On the Brandings page, select Common - Pop-up.

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

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. For more information, see Advanced features for chat window customization.

Group Key Type Description
ActiveAssist Cobrowse Stylesheet CSS  
Header/Footer Footer Include CSS Defines the appearance of the footer bar
Header/Footer Head Include CSS Defines global styles
Header/Footer Header Include CSS Defines the appearance of the header bar
Header/Footer Navigation Include HTML Defines the structure of the navigation bar
Header/Footer Side Bar Left Include HTML  
Header/Footer Side Bar Right Include HTML  

How to customize chat windows

You can adapt the appearance, layout, content, and behavior of chat windows to match your branding.

This feature is part of the Custom Chat Window definition process. A chat window definition controls the look and feel and advanced behavior of the interface that is opened when a visitor clicks an associated button or link.

Note: You may need certain level of HTML, CSS and JavaScript understanding to apply advanced customizations.
  1. Create a new custom chat window, as follows:
    1. From the main menu of the operator client, go to Setup > Account Setup. The Account Setup window is displayed.
    2. On the left menu, click Chats > Custom Chat Windows > New. The New Custom Chat Window window is displayed.
  2. On the New Custom Chat Window window, open the Brandings tab.
  3. Branding options are grouped by complexity into Simple and Custom types. Choose a branding type.
    Option Description
    Simple Simple settings control the basic appearance of the chat window, including your logo, window size and primary colors.
    Tip: Select Simple if you are satisfied with the default texts, functionality and layout, but need to adjust the look of the chat window quickly and easily.
    Custom Custom settings provide access to every detail of the chat window and allows you to use advanced features, such as variables and key chaining. Simple settings are retained.
    Tip: Select Custom if you need to customize an element of your window not available in simple mode. Options include window texts and messages, style sheets, color refinements and scripting.

    Result: You are ready to set up your Layered Chat Window or Pop-up Chat Window.

  4. Click Save to associate branding settings with the custom window definition.

Layered chat window scripting

Take advantage of events and extend chat window features using JavaScript.

A layered chat window can trigger events during its life-cycle and allows you to work with JavaScript without restrictions.

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

Adding custom scripts

Includes allow you to inject JavaScript code and attach event listeners to chat windows with different scopes:

  • Chat Frame Javascript Include: Listeners and handlers run inside the iFrame object
  • Chat Window Javascript Include
Fastpath: On the Brandings page, select Common - Layered and go to Includes.

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

Every layered chat window comprise a window and a frame object.

  • A chat window object is a container element that controls the window object of the host page, in which the chat window is embedded. As a consequence, listeners and handlers run outside the context of the iFrame object.
    Note: If the ancestor of a chat window is a separate window or tab, outside events, listeners and functions are not used.
  • A chat frame object is the window object of the innermost iFrame object, in which the chat runs.
    Note: If the ancestor of a chat window is a separate window object, the scope is the window object of the standalone window or tab.
Tip: Use the calledmobileChat variable to retrieve the object handle in use.

Using events and listeners

There are two ways to attach event listeners:

  • Use the mobileChat.addListener(eventName, eventHandler) method to register the handler.
    Important: eventName must be a valid event and eventHandler must be a callable function object, otherwise the listener throws an error.
  • Create a global function.
Tip: You can create more than one listener for an event in the following ways:
  • Mix the methods above
  • Call the addListener method more than once using the same event name
Note: A listener registered via the addListener method takes precedence, otherwise event handlers are executed in the order of registration.

Can I remove a registered listener? Calling the addListener method prevents the listener to be cleared. Global functions can be removed.

List of event functions

Table 1. iFrame events
Event Global function name Description Arguments
new-message bc_newHistoryMessageCallback New message added to chat history
  • integer personType
  • String messageText
  • DOMObject messageObject
chat-ended bc_chatEndedEventCallback Chat ended  
push-page bc_pushPageEventCallback A PushPage request sent by the operator and the visitor accepts to be redirected to the target URL
  • String url
page-loaded bc_chatWindowLoadedEventCallback Page loaded  
resize bc_resizeEventCallback Elements resized  
Note: Events inside the iFrame object are forwarded to the context of the window object, but arguments may not be retained.
Table 2. window events
Event Global function name Description Arguments
new-message bc_newHistoryMessageCallback New message added to chat history
  • integer personType
  • String messageText
page-loaded bc_chatWindowLoadedEventCallback Page loaded  
chat-ended bc_chatEndedEventCallback Chat ended  
chat-closed bc_chatClosedEventCallback Chat closed  
push-page bc_pushPageEventCallback A PushPage request sent by the operator and the visitor accepts to be redirected to the target URL
  • String url
resize bc_resizeEventCallback Elements resized  
maximized bc_chatWindowMaximizedEventCallback Frame maximized  
minimized bc_chatWindowMinimizeEventCallback Frame minimized  
Example: Examples
 

The following snippets provide two different implementations of the same functionality.

  1. Create two listeners for every available event
  2. Log the following to the console when an event is captured:
    • event name
    • event context
    • listener type
    • function name if the listener is a global function

iFrame object snippet (addListener method)

var _tEvents = {
        "new-message": "bc_newHistoryMessageCallback",
        "chat-closed": "bc_chatClosedEventCallback",
        "chat-ended": "bc_chatEndedEventCallback",
        "push-page": "bc_pushPageEventCallback",
        "page-loaded": "bc_chatWindowLoadedEventCallback",
        "resize": "bc_resizeEventCallback"
    },
    _tFunction = function(i, type, fName) {
        console.warn("event \"" + i + "\" captured inside the frame with " + type + (fName ? " (function name is '" + fName + "')" : ""));
    };
for (var i in _tEvents) {
    mobileChat.addListener(i, _tFunction.bind(window, i, "listener"));
    window[_tEvents[i]] = _tFunction.bind(window, i, "function", _tEvents[i]);
}

window object snippet (global function)

var _tEvents =  {
        "new-message": "bc_newHistoryMessageCallback",
        "resize": "bc_resizeEventCallback",
        "chat-closed": "bc_chatClosedEventCallback",
        "chat-ended": "bc_chatEndedEventCallback",
        "minimized": "bc_chatWindowMinimizeEventCallback",
        "maximized": "bc_chatWindowMaximizedEventCallback",
        "page-loaded": "bc_chatWindowLoadedEventCallback",
        "push-page": "bc_pushPageEventCallback"
    },
    _tFunction = function(i, type, fName) {
        console.warn("event \"" + i + "\" captured outside the frame with " + type + (fName ? " (function name is '" + fName + "')" : ""));
    };
for (var i in _tEvents) {
    mobileChat.addListener(i, _tFunction.bind(window, i, "listener"));
    window[_tEvents[i]] = _tFunction.bind(window, i, "function", _tEvents[i]);
}

How to set up a Chat Window definition

A Chat Window or Custom Chat Window definition controls the look and feel and advanced behavior of the interface that is opened when a visitor clicks an associated button, link, or invitation. Chat windows can be layered or pop-up, and can be customized in a number of ways.

Where do I create chat windows?

We recommend creating and managing chat windows from the following location: Setup > Account Setup > Chats > Custom Chat Windows.

How do chat windows relate to other BoldChat entities?

Any chart window can be associated with any chat entry point or invitation:

  • Custom Chat Button
  • Chat Link
  • Custom Chat Invitation

The direction of the relationship is from button/invitation to window.

A button can only launch one specific chat window, while a chat window can be launched from multiple buttons or invitations.

Why do we call it a "definition"?

It is important to understand that "chat window" does not refer to a simple window (as in the actual graphical user interface element a visitor sees), but rather a complex group of settings associated with that interface element. Together these settings make up a definition.

What is controlled by the Chat Window definition?

The chat window definition controls the following aspects of your visitors experience:

  • Pre-chat form
  • Post-chat form
  • Translations and localization (under Branding)
  • Operator wrap-up settings
  • Unavailable email form
  • Customization of the strings of text seen in the chat window
  • Automated messages to show visitors waiting for an operator
  • Branding settings such as colors, header and footer formatting, sounds, typing indicators, and more
  • Chat transcript settings
  • How long a visitor waits for an operator before timing out
  • Availability of video chat
  • Ability to send and receive files

What is a layered chat window?

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.

Advanced features for chat window customization

Advanced customization options provide further flexibility to design and script your chat windows.

Variables
Branding variables conform to the ${variable_name} scheme.
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 chaining
Variables can be chained if a key needs to inherit the value of another key. Working with key chains is helpful to avoid inconsistent color or text usage and simplify the customization process.
Note: Key inheritance is limited to a certain number of levels due to performance considerations, usually around four.
CSS, Javascript and HTML includes
Includes allow you to inject custom JavaScript code, redesign the layout and fine-tune CSS settings in one place. Any valid CSS, Javascript or HTML snippet is allowed in the appropriate fields without restrictions.

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

Tip: To format window labels, messages and texts, you can also use HTML tags.
Window and frame objects

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.
Image format

When linking to external images, you can use the following HTTP protocol formats:

  • http:// for standard pages without HTTPS security
  • https:// for secure pages
  • http(s):// to automatically detect the appropriate protocol
Color format
All standard CSS and HTML color representations are supported:
  • Hex color codes, such as #FFFFFF (preferred)
  • Color strings, such as red or black
  • RGB color scheme: rgb(r, g, b)
  • RGBA color scheme: rgba(r, g, b, a) (discouraged)

How to provide a chat window in multiple languages

You can set a chat window to be displayed in any of seven pre-translated languages or 35 custom languages. There is no need to create multiple chat windows for multiple languages.

This feature is part of the Custom Chat Window definition process. A chat window definition controls the look and feel and advanced behavior of the interface that is opened when a visitor clicks an associated button or link. Multi-language set-up for chat windows is part of the branding procedure.
  1. Using the BoldChat Operator Client, create a new custom chat window, as follows:
    1. From the main menu of the BoldChat Operator Client, go to Setup > Account Setup. The Account Setup window is displayed.
    2. On the left menu of the Account Setup window, click Chats > Custom Chat Windows > New

    Result: The New Custom Chat Window is displayed.

  2. On the New Custom Chat Window window, open the Brandings tab.
  3. On the Brandings tab, next to Languages, click ... (three dots button).

    Result: The Available Languages window is displayed with only pre-translated languages listed.

  4. Choose the languages in which you want the chat window to be made available.

    Don't see the language you want to add? Click List all languages to display languages for that have not been pre-translated.

  5. Set a language as default.

    The default language is shown to visitors when no translation is available in their own language.

    Example: For example, if English is your default language, then a visitor from Poland will see the chat window in English unless you specifically selected Polish as a provided language and added a Polish translation.

  6. Customize the window and translations, as follows:
    1. Select an item under Groups > Keys
    2. Under Text, choose the language you want to edit.
    3. Change the text or settings.
    4. Continue making other changes.
    5. Save your changes.
    Remember: BoldChat provides translations in the following languages: English (en-US), Dutch (nl-NL), French (fr-FR), German (de-DE), Italian (it-IT), Spanish (es-ES), Portuguese (pt-BR). For all other languages, you must provide your own translations.

Can I allow visitors to choose a language? Yes. Go to New Custom Chat Window > Pre-Chat Form > Enable > Language Selector.

How does BoldChat know which language to show to a visitor?

Visitor language is determined as follows:

  • Selection made by the visitor on the pre-chat form (stronger than all other parameters)
  • Language parameter passed by the HTML snippet
  • Visitors browser language setting
  • Visitors IP

BoldChat looks for a branded (localized, translated) chat window for the chosen or detected language. If no branding exists, the default language is shown.

Tip: The visitors language is saved as a property of the chat. This property can be used for routing chat, and can be displayed to the operator. A language property can also be set for departments, allowing automatic filtering.

Schedule and Verify Chat Window Customization Upgrade

Each new BoldChat version comes with improvements or new features to chat windows. To avoid any adverse effects to your existing definitions, you can control when the upgrade process occurs and verify any changes.

To check if an upgrade is available, follow these steps:

  1. Go to Setup > Account Setup > Chats > Custom Chat Windows.
  2. Navigate to the Brandings tab.
  3. When an upgrade is available, the Upgrade button is displayed at the top of the window.
  4. Click Upgrade to proceed.

  5. Select your preferred upgrade option.
    Note: It is recommended to upgrade a copy of your definition.

Why would you upgrade your chat window definition?

The purpose of the Upgrade feature is to prevent a new release from breaking previously made customizations. You can copy your existing chat window definition to create a backup version. Then you can upgrade the backup to preview changes and see if you need to adjust your code customizations.

Even without seeing the Upgrade button, sometimes you may want to update the chat window or create a new one to apply newer features. This does not involve redeploying code, only creating new chat windows and linking those to chat buttons.

How to set the chat window seen by visitors when a chat button is clicked

To choose the actual interface seen by visitors upon clicking a chat button, you must associate your Chat Button definition with a Chat Window definition.

This feature is part of the Custom Chat Button definition process for both floating and fixed-position buttons.

  1. Using the BoldChat Operator Client, create a custom chat button definition, as follows:
    1. From the main menu of the BoldChat Operator Client, go to Setup > Account Setup. The Account Setup window is displayed.
    2. Choose the type of button to create. On the left menu, click Chats > Custom Chat Buttons > New or Chats > Custom Floating Chat Buttons > New.

    Result: The New Custom Button window is displayed.

  2. Under Window, choose the Chat Window to associate with the chat button definition.
  3. Save your changes.

    Result: The settings are applied to the custom chat button definition.

Your Custom Chat Button definition is ready to set as a chat entry point by being associated with an HTML snippet and inserted to a site.

To activate a newly created button definition as a chat entry point on your website, you must paste the HTML code to your site. When editing an existing button, you do not need to paste the code since these settings are not in the HTML code itself, but rather on the BoldChat server.

How to allow visitors to send themselves a transcript

This feature is part of the Custom Chat Window definition process. A chat window definition controls the look and feel and advanced behavior of the interface that is opened when a visitor clicks an associated button or link.
  1. Using the BoldChat Operator Client, create a new custom chat window, as follows:
    1. From the main menu of the BoldChat Operator Client, go to Setup > Account Setup. The Account Setup window is displayed.
    2. On the left menu of the Account Setup window, click Chats > Custom Chat Windows > New

    Result: The New Custom Chat Window is displayed.

  2. On the Post-Chat Form tab, select Allow visitors to email themselves a copy of the chat transcript.
  3. Option. If you want the transcript to be sent from a specific email address, enter the address under Send transcripts from this email address.
  4. Choose the email format:
    • HTML
    • Plain Text
  5. Option. To include or remove fields from the transcript, click Advanced and use the selector on the Transcript Fields window.

    What are the default fields? They are shown in the left panel of the Transcript Fields window.

  6. Save your changes.

How to use auto-translation during chats

Chat with visitors even when you don't share the same language. Messages are auto-translated in real time, if the language pair is available.

Important: To chat with visitors in their native language, your administrator needs to ensure the following:

The image below shows auto-translation in action. Hover your mouse over the elements to see their function.

The left panel shows messages in your language. Translated messages are marked with a red asterisk.

The right panel shows messages in the visitor's language. Translated messages are marked with a red asterisk.


Are visitors aware that messages are being auto-translated?

Visitors are notified in a system chat message when you are not chatting in the same language.

What language should I use?

The language you are expected to use for outgoing messages is indicated at the bottom left of the Chat tab (?You are expected to type in X?). To chat in a different language, you must disable auto-translation before typing. Otherwise BoldChat will attempt to translate your conversation.

The language you are expected to use for outgoing messages is indicated in the status bar. If you want to chat with a visitor in a different language than indicated, remember to disable auto-translation before typing. Otherwise BoldChat will attempt to translate your conversation.

How can I change the visitor language?

Click Translate > Set Language... and adjust the preferred language.

Note: The expected visitor language is determined by the chat window's language setting or the language the visitor selected on the pre-chat form.

How can I preview or edit my auto-translated message?

Click Preview in [language] to preview the message. To edit and format the translated message before sending, click Edit Preview.

How can I switch auto-translation on or off?

Click Translate > Enable Auto-translation to switch real time translation on or off.

I speak the visitor's language, but messages are being auto-translated anyway.

Contact your administrator to update the list of languages you speak.

Important: If you want to chat with a visitor in their native language, remember to switch auto-translation off first. Otherwise BoldChat will attempt to translate your conversation even though you are using the same language.

How can I prevent certain phrases or words from being translated?

Click to mark the selected text of your message as not translatable.

Tip: You can also use do not translate formatting in canned messages.

Can I assign an auto-translated chat to another operator?

Yes. Once the chat is reassigned, the operator language is adjusted by the new operator's settings.

What happens if a language pair is unavailable?

If you neither share a common language with the visitor nor any of your language pairs are supported by auto-translate, you and the visitor may not be able to understand each other. Contact your administrator to address the issue.

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:

  1. General Text Color
  2. Header Font Color
  3. Header Background Color
  4. Operator Message - Message - Font Color
  5. Operator Message - Name - Font Color
  6. Operator Message - Time - Font Color
  7. Operator Message Background Color
  8. Customer Message - Message - Font Color
  9. Customer Message - Name - Font Color
  10. Customer Message - Time - Font Color
  11. Customer Message Background Color
  12. Button Font Color
  13. Link Font Color
  14. Required Font Color
  15. Message Input Font Color
  16. Message Input Background Color
  17. Button Background Color
  18. Message Input Container Background Color
  19. 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

Create a Chat Window

The chat window is where you configure the customer?s chat experience. It controls the look and feel and advanced behavior of the interface that is opened when a customer clicks an associated button. Chat windows can be customized in a number of ways.

Note: This article is part of a Quick Start Guide to help you implement your Bold360 environment from scratch.

To see the below steps in action, view our tutorial:

  1. In the Web Admin Center, go to Channels > Chat > Chat Windows.
  2. Click My Chat Window.
  3. On the General tab, do the following:
    1. Ensure Layered is selected for both Desktop and Mobile. We recommend using a layered window as opposed to a pop-up window to provide a modern, optimal user experience.
    2. For Messaging when agent not reached, select Condition-specific. This provides customers with more specific messaging (such as out of business hours or full queue) when agents are unavailable.
    3. If you want agents or customers to be able to send files, check Enable under File transfer. You can choose whether this is enabled from agent to customer, customer to agent, or both.

  4. If wanted, you can enable a pre-chat form, which will prompt customer for information before they are connected with an agent. To do so, navigate to the Pre-chat form tab.
    1. Enable pre-chat form. You can select For customer-initiated chats only.
    2. Choose the fields you want to include under Standard fields. We recommend using Name, Email, and Initial Question. To start, we recommend not making them Required as they may deter customers from chatting.

  5. On the Post-chat tab, do the following:
    1. You can choose to allow customers to send themselves a transcript. If so, enter the email address you want it to send from and choose whether it should be sent in Plain Text or HTML format.
    2. You can enable a Post-Chat form, which prompts a customer for feedback after their chat conversation ends. To do so, under Customer survey, choose option to Show when chat ends.
    • We recommend choosing If customer sends more than 2-3 messages
    • We recommend choosing Overall and Comments to start to keep it simple and encourage customers to fill out the survey. (Adding too many fields may deter customer from providing feedback). Using these two fields allows customers to provide a numeric score and open-ended feedback.
  6. You can customize the user interface of the chat window on the Customization tab. You can find a full list of customizable attributes here. Below, you?ll find the most important configuration items to change and where to do so:
    1. Layered - Basic > Colors > Header Background Color
    2. Layered - Basic > Window > Window Title
    3. Layered - Basic > Colors > Content Background Color (R, G, B)
    4. Layered - Basic > Colors > Button Background Color

  7. Save your changes.

Enable file transfer in the chat window

You can enable file transfer in the chat window for both agents and customers.

  1. Create or edit a chat window, as follows:
    1. In the Web Admin Center, go to Channels > Chat > Chat Windows.
    2. Select an existing chat window or click Create New.
  2. On the General tab, enable File transfer.
  3. Select who can send files during a chat:
    • Agent to customer
    • Customer to agent
  4. Save your changes.
Remember: To implement a chat window, you must associate it with a chat button.

What are best practices for file transfer?

It is possible to enable agents and customers to send files to each other. In the chat window settings, you can set this in one or both directions depending on your use case. We typically recommend turning this option on in both directions.

More efficient resolution through file transfer leads to increased customer satisfaction.

How to use Geofluent for auto-translation

Important: Please contact your Customer Success Manager to enable this feature if you want to use it.
Tip: Check out this video to learn how auto-translation work.

Digital DX AI offers automatic language translation in conversational and search modes. It enables your bot to answer your international visitors in any language while end user requests are served from one knowledge base in one language. This feature helps the multilingual support of knowledge bases that frequently change without the need of having to provide the translations as well. The translation engine supports more than 46 languages. The quality of Digital DX's automatic translation is almost as high as if you used a dedicated knowledge base per language.

Customers can switch between viewing the original bot or agent message, and the translated version of the message provided by GeoFluent. By using the toggle displayed above the input filed at the bottom of the widget, customers can check the original message in case of unclear translations. Currently, this toggle is always switched on.

Important: This feature requires a GeoFluent subscription that you can acquire by contacting Lionbridge. Lionbridge will provide you with the account key and secret you need to start using auto-translation.

Features and Benefits

  • Language selector in the beginning of the conversation.
  • Answer content, FAQs, and widget interface are automatically translated.
  • Language selection is saved if the bot conversation is transferred to a live agent.
  • Customers can easily switch between original and translated message.

What languages does GeoFluent support?

GeoFluent supports the following languages in the chat window:

Afrikaans* Arabic* Bengali* Bulgarian* Chinese (Simplified)* Chinese (Traditional)*
Croatian* Czech* Danish* Dutch English (UK)* Finnish*
French French (Canadian)* German Greek* Hebrew* Hindi*
Hungarian* Icelandic* Indonesian* Irish* Italian Japanese
Kazakh Korean Lithuanian Malay* Norwegian (Bokmal)* Norwegian (Nyorsk)*
Polish* Portuguese* Portuguese (Brazilian)* Punjabi* Romanian* Russian*
Serbian Slovak* Spanish Swedish* Tagalog Thai*
Turkish* Ukrainian* Vietnamese*      

* You need to translate the branding of the chat windows.

How to set up auto-translation with GeoFluent?

To set up auto-translation, contact your Customer Success Manager with the following information at hand:

  • GeoFluent Host
  • GeoFluent Account Key
  • GeoFluent Account Secret

How to enable auto-translation?

Once your GeoFluent account is set up for your Digital DX AI account, all your conversational widgets can provide live translations. To enable it, you must set up a language selector as follows:

  1. In the AI Console, go to Knowledge > Add Article.
  2. Create a welcome message as an article, which includes the language selector.
  3. Add a < language_selector / > tag to the article. This tag will be replaced by the languages drop-down list.
  4. Optionally, add a "languages" attribute to the < language_selector > to define the supported customer languages: By default, all languages are listed in the language drop-down list that are supported by your GeoFluent account. The list of languages must be a comma separated list of two-character language codes.
  5. Once you create this message, go to Touchpoints > Widgets and select the widget where you want to use the language selector.
  6. In the Auto Question field, select the newly created message.
  7. Save your changes and you are good to go.

How to use auto-translation with a Digital DX Agent integration?

At the beginning of a chat session, customers can select their language in the widget. When the chat is channeled to a human agent, Digital DX Agent receives the selected language value from Digital DX AI and automatically offers the relevant GeoFluent translations.

Auto-translation in Digital DX Agent takes the following parameters into account:

  • Customer language: Determined by the customer's chat window's language setting or the language the customer selected on the pre-chat form. You can define chat window language defaults in the chat window configuration.
  • Agent languages: The languages the agent speaks, prioritized by fluency level. Configured in the agent settings.
  • Language pairs: The translation pair is supported by your GeoFluent subscription.

If the agent and the customer share a common language, then there is no need for translation and it is switched off by default. Otherwise, if none of the agent languages match the customer language and the language pair is available, messages are translated automatically.

Reports for auto-translations provided by GeoFluent

When auto translations for conversational mode is enabled for an account, you can run reports on three new fields in the Automatic translation section of the Admin Center > Reports page:

  • Auto-translated - true if the query sent to the bot was auto-translated by GeoFluen
  • Query language - the language code of the original end-user query before auto translation. It is "empty" if live translation did not happen for the query
  • Original message - The original end user query before auto translation. The number of unread agent messages can be displayed on the conversational widget in Normal with minimized option mode.

You can group reports by the Auto-translated and Query language options.

Translation Analytics

You can generate reports on GeoFluent-based auto-translation on the Analytics > Reports page of the AI Console. You can select the following report fields from the Automatic translation category:

  • Auto-translated: Displays whether the customer voice was auto-translated
  • Query Language: Language of the original customer voice
  • Original Message: Content of the original customer voice

Notification of auto-translation failure

If GeoFluent translation service is used and it fails to translate the response, a message is displayed that the translation service is not available. The user can then resend the request.

Customize a layered chat window using JavaScript

Take advantage of events and extend chat window features using JavaScript.

A layered chat window can trigger events during its life-cycle and allows you to work with JavaScript without restrictions.

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

Adding custom scripts

On the Customization tab, select Layered - Detailed and select the Includes key group. Includes allow you to inject JavaScript code and attach event listeners to chat windows with different scopes:

  • Chat Frame Javascript Include: Listeners and handlers run inside the iFrame object
  • Chat Window Javascript Include

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.

  • A chat window object is a container element that controls the window object of the host page, in which the chat window is embedded. As a consequence, listeners and handlers run outside the context of the iFrame object.
    Note: If the ancestor of a chat window is a separate window or tab, outside events, listeners and functions are not used.
  • A chat frame object is the window object of the innermost iFrame object, in which the chat runs.
    Note: If the ancestor of a chat window is a separate window object, the scope is the window object of the standalone window or tab.
Tip: Use the calledmobileChat variable to retrieve the object handle in use.

Using events and listeners

There are two ways to attach event listeners:

  • Use the mobileChat.addListener(eventName, eventHandler) method to register the handler.
    Important: eventName must be a valid event and eventHandler must be a callable function object, otherwise the listener throws an error.
  • Create a global function.
Tip: You can create more than one listener for an event in the following ways:
  • Mix the methods above
  • Call the addListener method more than once using the same event name
Note: A listener registered via the addListener method takes precedence, otherwise event handlers are executed in the order of registration.

Can I remove a registered listener? Calling the addListener method prevents the listener to be cleared. Global functions can be removed.

List of event functions

Table 1. iFrame events
Event Global function name Description Arguments
new-message bc_newHistoryMessageCallback New message added to chat history
  • integer personType
  • String messageText
  • DOMObject messageObject
chat-ended bc_chatEndedEventCallback Chat ended  
push-page bc_pushPageEventCallback A PushPage request sent by the agent and the customer accepts to be redirected to the target URL
  • String url
page-loaded bc_chatWindowLoadedEventCallback Page loaded  
resize bc_resizeEventCallback Elements resized  
Note: Events inside the iFrame object are forwarded to the context of the window object, but arguments may not be retained.
Table 2. window events
Event Global function name Description Arguments
new-message bc_newHistoryMessageCallback New message added to chat history
  • integer personType
  • String messageText
page-loaded bc_chatWindowLoadedEventCallback Page loaded  
chat-ended bc_chatEndedEventCallback Chat ended  
chat-closed bc_chatClosedEventCallback Chat closed  
push-page bc_pushPageEventCallback A PushPage request sent by the agent and the customer accepts to be redirected to the target URL
  • String url
resize bc_resizeEventCallback Elements resized  
maximized bc_chatWindowMaximizedEventCallback Frame maximized  
minimized bc_chatWindowMinimizeEventCallback Frame minimized  
Example:
 

The following snippets provide two different implementations of the same functionality.

  1. Create two listeners for every available event.
  2. Log the following to the console when an event is captured:
    • event name
    • event context
    • listener type
    • function name if the listener is a global function

iFrame object snippet (addListener method)

var _tEvents = {
        "new-message": "bc_newHistoryMessageCallback",
        "chat-closed": "bc_chatClosedEventCallback",
        "chat-ended": "bc_chatEndedEventCallback",
        "push-page": "bc_pushPageEventCallback",
        "page-loaded": "bc_chatWindowLoadedEventCallback",
        "resize": "bc_resizeEventCallback"
    },
    _tFunction = function(i, type, fName) {
        console.warn("event \"" + i + "\" captured inside the frame with " + type + (fName ? " (function name is '" + fName + "')" : ""));
    };
for (var i in _tEvents) {
    mobileChat.addListener(i, _tFunction.bind(window, i, "listener"));
    window[_tEvents[i]] = _tFunction.bind(window, i, "function", _tEvents[i]);
}

window object snippet (global function)

var _tEvents =  {
        "new-message": "bc_newHistoryMessageCallback",
        "resize": "bc_resizeEventCallback",
        "chat-closed": "bc_chatClosedEventCallback",
        "chat-ended": "bc_chatEndedEventCallback",
        "minimized": "bc_chatWindowMinimizeEventCallback",
        "maximized": "bc_chatWindowMaximizedEventCallback",
        "page-loaded": "bc_chatWindowLoadedEventCallback",
        "push-page": "bc_pushPageEventCallback"
    },
    _tFunction = function(i, type, fName) {
        console.warn("event \"" + i + "\" captured outside the frame with " + type + (fName ? " (function name is '" + fName + "')" : ""));
    };
for (var i in _tEvents) {
    mobileChat.addListener(i, _tFunction.bind(window, i, "listener"));
    window[_tEvents[i]] = _tFunction.bind(window, i, "function", _tEvents[i]);
}

Auto Answers: Customer self-service

Auto Answers is a self-service support feature that provides customers a way to browse questions and answers before chatting live, deflecting common or repetitive engagement from agents.

When enabled, Auto Answers provides customers a way to browse questions and answers before chatting live, deflecting common or repetitive engagement from agents. The feature is configured per chat window definition, which allows you to differentiate and customize customers' chat experience on your site.

Requirements

  • Only available for layered windows
  • Not available for pop-up windows

How do customers experience Auto Answers?

The typical engagement sequence for customers is as follows.

  1. The customer asks an initial question.
  2. The customer browses and rates the available answers.
  3. The customer initiates live chat if the issue persists
Note: You can run reports on Auto Answers at https://reports.boldchat.com/.

Task One: Populate the answer pool

Auto Answers utilizes canned messages to present the most relevant answers to customers based on various factors, such as frequency of use, popularity, customer rating and key terms.

You can populate the pool of questions and answers using either the admin.Bold360.com or via API calls.

  1. Add Canned Messages in the Web Admin Center
  2. Manage Canned Messages via API

    This method is the preferred way to import large amounts of data, such as an entire knowledge base or FAQ to be used with Auto Answers.

    1. Use Canned Folders CRUD Methods to organize and set up Chat Message folders.
    2. Prepare your content.
      • HTML markup and simple CSS formatting are supported.
      • Images must reside on a location accessible to Bold360 and should be referenced using fully resolved URLs.
      • Individual messages are limited to 65,535 bytes (HTML source). We recommend that you split complex and/or lengthy content into smaller chunks to improve user experience.
    3. Import the corpus using Chat Canned Folders CRUD Methods.

Task Two: Configure the Chat Window

Fine-tune how and when Auto Answers are presented. For example, when do you want to show Auto Answers to customers? Will they be forced to read answers, or can they bypass them before engaging with an agent?

  1. In the Web Admin Center, go to Channels > Chat > Chat Windows.
  2. Select the chat window you want to use with Auto Answers.

    Result: The Edit Chat Window page is displayed.

  3. Along the left side of Edit Chat Window page, select the Auto Answers tab.
  4. On the Auto Answers tab, select Enable Auto Answers.
  5. Set Status options:
    Option Description
    When agents are unavailable: Show Auto Answers When no agents are available, customers are shown Auto Answers.
    When agents are available: Show Auto Answers before chat When agents are available, customers are always shown Auto Answers before reaching an agent.
    When agents are available: Show only if chat queue reaches % of limit While the queue size stays below the defined threshold, Auto Answers is not available and customers can initiate live chat in the usual manner. The maximum queue size must be greater than zero.
    When agents are available: Bypass Auto Answers when the initial question yields no results Customers reach an agent if no Auto Answers match their initial question.
  6. Set Customer options:
    Option Description
    Optional ? Can bypass Auto Answers and chat anytime

    Customers are free to use Auto Answers or engage in live chat with an agent anytime.

    Mandatory ? Must use Auto Answers before chat is allowed

    Customers must ask questions or click responses a certain number of times before they can initiate live chat with an agent (Chat only after required clicks or questions).

    Adaptive ? When queue limit % reached, must use Auto Answers

    Customers are free to use Auto Answers or engage in live chat with an agent while the customer queue size stays below the defined threshold. When the threshold is exceeded, customers must ask questions or click responses a certain number of times before they can initiate live chat with an agent (Chat only after required clicks or questions).

  7. Under Display options, configure how answers are displayed to customers:
    • How answers are displayed: Determines whether customers are shown the Subject only or the Subject and two lines of body (the first two lines of an answer).
    • Number of answers to show: The length of the response list length; maximum number of query results displayed.
    • Allow customers to view answers after agent response for X seconds: Once the agent responds, the amount of time a customer can browse answers before being redirected to live chat.
  8. Under Canned messages for auto answers, select the message folders to be used with your chat window.
  9. Under Answer Rating and Relevance, influence what articles are shown to customers:
    Option Description
    Irrelevant answer filter Leave out results with no Keyword matches, no positive votes, and/or that have received negative votes after the same question.
    Boost by keyword match Promote answers with terms in their Keyword field that match the customer's question. That is, a match on a Keyword carries more significance than a match on words in the body of the answer.
    Boost by positive ratings Promote answers that are rated positively by customers.
    Demote by negative ratings Demote answers that are rated negatively by customers.
    Demote by lack of reading Demote answers that are regularly ignored by customers.
  10. Select the message folders to be used with your chat window under Canned Message Folders for Auto Answers.
  11. Save your changes.
Tip: Use the Data Extraction API to gain insight into how your customers use Auto Answers via the getAutoAnswers method.

Customize a pop-up chat window

Pop-up chat windows open in a new browser window.

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 scripting

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

Layout overview

A pop-up window has the following variables of individual elements:

  1. Logo URL
  2. Text Color
  3. Content Background Color (R,B,G)
  4. Header Background Color
  5. Chat message field
  6. Send Button
  7. End Button

Overview of customization setting groups

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

Main group - Key group Description
Pop-up - Basic > AutoAnswers Defines Auto Answers messages for your customer self-service. For more information, see Auto Answers: Customer self-service.
Pop-up - Basic > Colors Defines the color scheme of your pop-up chat window. For more information, see Colors (Pop-up - Basic > Colors).
Pop-up - Basic > Logo Defines the logo and favicon displayed in the pop-up window.
Pop-up - Basic > Other Defines the default customer name and the title of the chat window.

The default customer name is displayed when a pre-chat form is not available or the customer does not provide a name.

Pop-up - Basic > Sizing Defines the default size of the chat window.
Pop-up - Chat page > Buttons Defines the button caption for ending the chat session.
Pop-up - Chat page > Chat History Defines the layout of agent-, customer-, and system messages in the chat panel.
Pop-up - Chat page > Header/Footer Defines CSS styles for the different parts of the chat window.
Pop-up - Chat page > Sizing Overrides the default size of the chat window that you can set in the Pop-up - Basic > Sizing key group.
Pop-up - Details > ACD Defines messages that the Automatic Distribution system displays to customers while they are waiting for an agent in queue.
Pop-up - Details > ActiveAssist Defines messages for the customer before and during co-browse sessions.
Pop-up - Details > Buttons Defines button captions of the chat window.
Pop-up - Details > Chat Transcript Defines labels of the chat transcript dialog.
Pop-up - Details > Chat Window Defines system messages in the chat window.
Pop-up - Details > Header/Footer Overrides default CSS styles for the different parts of the chat window that you can set in the Pop-up - Chat page > Header/Footer key group.
Pop-up - Details > Miscellaneous Various labels and messages related to unavailable agents, auto-translated messages, chat validation, and basic action buttons, such as Yes, No, OK, and Cancel.
Pop-up - Details > Post Chat Survey Defines button captions and labels on the post-chat form.
Pop-up - Details > Pre Chat Survey Defines button captions and labels on the pre-chat form.
Pop-up - Details > Remote Control Defines button captions, labels and messages when the customer is in a remote control session.
Pop-up - Details > Sizing Defines the default size of the chat window. These values are taken from the Pop-up - Basic > Sizing key group by default.
Pop-up - Details > Unavailable Email Defines system messages and labels for the email that customers can send when chat is not available.
Pop-up - Post chat > Buttons Defines the button caption for sending the post-chat form.
Pop-up - Post chat > Header/Footer Defines CSS styles for the different parts of the post-chat window.
Pop-up - Post chat > Sizing Defines the size of the post-chat window.
Pop-up - Pre-chat > Buttons Defines the button caption for sending the post-chat form.
Pop-up - Pre-chat > Header/Footer Defines CSS styles for the different parts of the pre-chat window.
Pop-up - Pre-chat > Sizing Defines the size of the pre-chat window.
Pop-up - Unavailable email > Buttons Defines the caption of the Close button when chat is not available and the sending e-mail is enabled for the customer.
Pop-up - Unavailable email > Header/Footer Defines CSS styles for the different parts of the window where the customer can send an email when agents are unavailable.
Pop-up - Unavailable email > Sizing Defines the size of the window where the customer can send an email when agents are unavailable.

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 (Pop-up - Basic > Colors)

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) (Pop-up ? Basic) content_background_color

Default: #F0F0F0

The background color of the upper panel, where the chat messages are displayed.
Header Background Color (Pop-up ? Basic) header_background_color

Default: url('https://genesyscustomercare.nanorep.co/storage/nr1/kb/8AF2B933/8AF2BA4B/8C810D27/531/lightbulb_bg.png')

The background color of the window header.
Text Color (Pop-up ? Basic) text_color

Default: #000000

The font color of messages.
Text Font (Pop-up ? Basic) text_font

Default: verdana, arial, helvetica, sans-serif

The font family of messages.
Text Size (Pop-up ? Basic) text_size

Default: 12px

The font size of messages.

Chat message fieldSend ButtonEnd Button

Logo and images (Pop-up ? Basic > Logo)

Note: The default aspect ratio of the logo image is 1:1 (square). This setting can be overridden in the style sheet.
Key Default value Description
Logo - Favicon URL https://genesyscustomercare.nanorep.co/storage/nr1/kb/8AF2B933/8AF2BA4B/8C810D27/531/lightbulb_bg.pnghat.com/favicon.ico The URL of the favicon that is displayed on your browser's tab.
Logo Link URL http://www.boldchat.com The web address where the customer navigates by clicking the logo.
Logo URL https://genesyscustomercare.nanorep.co/storage/nr1/kb/8AF2B933/8AF2BA4B/8C810D27/531/lightbulb_bg.pnghat.com/ext/images/BoldChat_logo.png The URL of your logo.

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 Pop-up - Chat page > Buttons > Submit Button
    • To change the button caption for starting the chat from the pre-chat form, go to Pop-up - Pre-chat > Buttons > Submit Button
    • To change the button caption for closing the post-chat form, go to Pop-up - 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 pop-up chat window is 480px (height) x 640px (width). To resize the chat window, go to Pop-up - Basic > Window and set the new Window Height and Window Width.

Layout and custom scripting (Pop-up ? Chat page)

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

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

Group Key Type Description
ActiveAssist (Pop-up ? Details) Co-browse Stylesheet CSS Defines the window's appearance during co-browse sessions.
Header/Footer (Pop-up ? Chat page) Footer Include CSS Defines the appearance of the footer bar.
Header/Footer (Pop-up ? Chat page) Head Include CSS Defines global styles.
Header/Footer (Pop-up ? Chat page) Header Include CSS Defines the appearance of the header bar.
Header/Footer (Pop-up ? Chat page) Navigation Include HTML Defines the structure of the navigation bar.
Header/Footer (Pop-up ? Chat page) Side Bar Left Include HTML Defines the appearance of the bar on the left side of the chat panel, which is not visible by default.
Header/Footer (Pop-up ? Chat page) Side Bar Right Include HTML Defines the appearance of the bar on the right side of the chat panel, which is not visible by default.

How to protect customer data (Data Obfuscation)

Data obfuscation, also known as data masking, is a security feature that allows you to replace potentially sensitive data with generic characters to ensure that sensitive information is safe. You can set data (for example, credit card numbers, social security or personal ID numbers, telephone numbers) to be replaced by generic characters either in real-time or once the chat has ended.

This feature is part of the Chat Window setup, meaning that you cannot use data obfuscation in channels other than chat. A chat window controls the look and feel and advanced behavior of the interface that is opened when a customer clicks an associated button or link.

  1. Create or edit a chat window, as follows:
    1. In the Web Admin Center, go to Channels > Chat > Chat Windows.
    2. Select an existing chat window or click Create New.
  2. On the Message content tab, select Conceal sensitive information and then choose the following options:
    Option Description
    What to Conceal
    • Select All numeric strings to conceal all recognized number sequences, such as credit card, social security and phone numbers.
    • Select Only credit card formats to mask user input that conforms to standard credit card number formats. When this feature is in use, a credit card number such as 12345-12345-12345 is stored as xxxxx-xxxxx-xxxxx.
    • Numbers grouped as follows are considered credit card numbers:

      • 3-4-4-2
      • 4-4-3-2
      • 4-4-4-4
      • 4-6-4
      • 4-6-5
    Note: Currently, the following numbers are concealed as they are considered to be credit card numbers:
    • 13 digits starting with 4,5, or 6
    • 14 digits starting with 3,5, or 6
    • 15 digits starting with 1,2,3,5,6, or 8
    • 16 digits starting with 2,3,4,5,6,8, or 9
    • 17 digits starting with 3,5,6, or 8
    • 18 digits starting with 3,5,6, or 8
    • 19 digits starting with 3,5,6, or 8
    When to Conceal
    • Select Only upon close to allow data to be seen during chat, but then hidden after close.
    • Select Immediately, but not from customer and agent to allow only the assigned agent to see the information.
    • Select Immediately, from everyone to hide the information from everyone.
  3. Save your changes.
Remember: To implement a chat window, you must associate it with a chat button definition.

What are best practices for data obfuscation?

We recommend enabling data obfuscation. The exact settings to configure depend on the organization; however, our recommendation is to encrypt all numeric strings, but "only upon close". This will allow agents and customers to see all numbers in the chat but will encrypt after the conversation. That being said, certain organizations may not accept credit card numbers over chat so it may make sense to encrypt credit card numbers "immediately, from everyone".

Customers who request a transcript and see encrypted numeric strings will have more confidence that their data is safe with you and your organization, leading to higher customer satisfaction. Stronger security and compliance with PCI and other standards.

Enable adaptive answers and learning

Allow an agent to use smart answers and make Digital DX learn how to display better answers over time.

When adaptive answers are enabled, Digital DX automatically searches canned messages based on the real-time conversation occurring between the agent and the website customer. The most appropriate responses appear right where the agent needs them. Depending on certain factors, such as frequency of use, the context and relevance of messages are weighted and learned over time to generate better adaptive responses to a customer's query.

  1. Create or edit an agent, as follows:
    1. In the Web Admin Center, go to Organization > Agents.
    2. On the Agent Management page, select an existing agent or click Create New.

    Result: The New/Edit Agent page is displayed.

  2. On the Advanced Settings tab, select Use Adaptive Canned Messaging.
  3. To make Digital DX offer smarter suggestions through learning, select Use Adaptive Learning.
  4. Save your changes.
  5. The agent must log off and back on before the setting takes effect.

How does it work in practice? When are "learned" canned messages presented to the agent?

  • When a customer sends a new message
  • When the agent types into either the search field or the text input field, then pauses for one second
  • When the agent highlights chat text, then pauses for one second

Chat window customization

You can adapt the appearance, layout, content, and behavior of chat windows to match your branding.

This feature is part of the chat window setup. A chat window controls the look and feel and advanced behavior of the interface that is opened when a customer clicks an associated button or link.

Note: You may need a certain level of HTML, CSS and JavaScript understanding to perform advanced customization.
  1. Create or edit a chat window, as follows:
    1. In the Web Admin Center, go to Channels > Chat > Chat Windows.
    2. Select an existing chat window or click Create New.
  2. On the New Chat Window page, go to the Customization tab.

    Result: You are ready to set up your Layered Chat Window or Pop-up Chat Window.

Remember: To implement a chat window, you must associate it with a chat button.

What are best practices for chat windows?

  • A chat window should be a layered window with company logo and styling to match website and branding.
  • Keep window focused and simple - easy to deploy and manage
  • Pre-chat and Post-chat survey windows should not have scroll bars visible
  • Pre-chat form should have no more than four questions (no more than 2 required) to reduce visitor abandonment
  • Post-chat survey form should have no more than four questions to drive higher survey completion rates
  • Post-chat survey should only be presented if visitor sends more than three messages; avg. completion rate 10-25%
  • Post-chat wrap up / disposition code by agent should have ?Category? as a requirement

You should not deter customers from engaging with agents and finding answers they are looking for. The easier and seamless the process is, the more higher your customer satisfaction will be.

Advanced features for chat window customization

Advanced customization options provide further flexibility to design and script your chat windows.

Variables
Customization variables conform to the ${variable_name} scheme.
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 chaining
Variables can be chained if a key needs to inherit the value of another key. Working with key chains is helpful to avoid inconsistent color or text usage and simplify the customization process.
Note: Key inheritance is limited to a certain number of levels due to performance considerations, usually around four.
CSS, Javascript and HTML includes

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

Any valid CSS, Javascript or HTML snippet is allowed in the appropriate fields without restrictions.

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

Tip: To format window labels, messages and texts, you can also use HTML tags.
Window and frame objects

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.
Image format

When linking to external images, you can use the following HTTP protocol formats:

  • http:// for standard pages without HTTPS security
  • https:// for secure pages
  • http(s):// to automatically detect the appropriate protocol
Color format
All standard CSS and HTML color representations are supported:
  • Hex color codes, such as #FFFFFF (preferred)
  • Color strings, such as red or black
  • RGB color scheme: rgb(r, g, b)
  • RGBA color scheme: rgba(r, g, b, a) (discouraged)

Chat window setup

Configure the customer's chat experience.

A chat window controls the look and feel and advanced behavior of the interface that is opened when a customer clicks an associated button, link, or invitation. Chat windows can be layered, pop-up, or AI-enabled and can be customized in a number of ways.

It is important to understand that "chat window" does not refer to a simple window (as in the actual graphical user interface element a customer sees), but rather a complex group of settings associated with that interface element.

How do chat windows relate to other Bold360 entities?

Any chart window can be associated with any chat entry point or invitation:

  • Chat button or link
  • Invitation

The direction of the relationship is from button/invitation to window.

A button can only launch one specific chat window, while a chat window can be launched from multiple buttons or invitations.

What is controlled by the chat window?

The chat window controls the following aspects of your customers experience:

  • Pre-chat form
  • Post-chat form
  • Translations and localization
  • Agent wrap-up settings
  • Unavailable email form
  • Customization of the strings of text seen in the chat window
  • Automated messages to show customers waiting for an agent
  • Branding settings such as colors, header and footer formatting, sounds, typing indicators, and more
  • Chat transcript settings
  • How long a customer waits for an agent before timing out

What is a layered chat window?

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.

What is a pop-up chat window?

A pop-up chat window opens in a new browser window.

What is a Bold360 ai chat window?

In a Bold360 ai chat window, customers can get chatbot-assisted self-service. If the chatbot cannot provide a relevant answer, the customer has the option to contact a live agent. When an agent joins the conversation, they see AI-provided answers to the customer's questions. For more information, see Bold360 ai setup.

What are best practices for chat windows?

  • A chat window should be a layered window with company logo and styling to match website and branding.
  • Keep window focused and simple - easy to deploy and manage
  • Pre-chat and Post-chat survey windows should not have scroll bars visible
  • Pre-chat form should have no more than four questions (no more than 2 required) to reduce visitor abandonment
  • Post-chat survey form should have no more than four questions to drive higher survey completion rates
  • Post-chat survey should only be presented if visitor sends more than three messages; avg. completion rate 10-25%
  • Post-chat wrap up / disposition code by agent should have ?Category? as a requirement

You should not deter customers from engaging with agents and finding answers they are looking for. The easier and seamless the process is, the more higher your customer satisfaction will be.

Announcements

Bold360 21.10 Release Notes

Bold360 21.10 release notes

Bold360 version 21.10 contains the following new enhancements:

Enforcing HTTPS and removing HTTP across widget scripts

Going forward, there will no longer be an option to choose (non-secure) HTTP-only connections when generating widget touchpoint scripts. HTTPS will be enforced across all touchpoints going forward and HTTP-only widget configurations will no longer be supported as of December 31, 2021. Any widget script using HTTP only will need to be changed by this date in order to continue uninterrupted

Access to the Genesys DX AI management (*.nanorep.co) will only be accessible through HTTPs

In-product announcements will be present to raise awareness of this change

Important: Any widget script using HTTP only will need to be changed by this date in order to continue uninterrupted.

In-Product Rebranding

As part of the transformation to Genesys DX, the product interfaces are now rebranded to reflect this change. Logos, product names, and company links are now updated to Genesys branding and is present within each of the product interfaces.

getEstimatedWaitTime API call

Using the "getEstimatedWaitTime" API call will provide the estimated wait time that the visitor would spend waiting before starting a live chat with an agent.

Details on using this API can be located in this article.

Bold360 21.11 Release Notes

Bold360 version 21.11 contains the following new enhancements:

New KB Launchpad Intent Library for COVID-19/Vaccinations

In order to help businesses with providing just-in-time information related to updates to COVID-19 and vaccination protocols, a new entry in the KB Launchpad is now available with intents that can be used to deploy knowledge to keep your workforce informed of new policies and information that you may need to enforce.

Not familiar with the KB Launchpad? The KB Launchpad contains pre-defined intent libraries to help you add industry and use-case specific questions/intents to your KBs with your own specific responses to help with adding commonly asked questions for newly created KBs.

We will be enabling the KB Launchpad as a default setup option on all accounts shortly but contact your Account or Success Manager to get it enabled early if necessary.

ICO Cookie Compliance

In order to support ICO cookie compliance in regions that require end-user consent for allowing cookies to be set, Genesys DX now complies with this standard by making the tracking and analytics related cookies that are set through the touchpoint and visitor monitoring HTML snippets to be optional.

By default, all cookies will continue to be set upon page load. To restrict these cookies from loading automatically and only upon end-user consent, additional steps will be required on the website that the Genesys DX code is being deployed to.

You can learn more about what this compliance is and how to update your Genesys DX deployment to be compliant by reviewing the details in this article: ICO Cookie Compliance.