Chat Windows 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.

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.

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.

Google Analytics Integration with Bold360 Layered Windows

Integrate Google Analytics with Layered Chat Windows, track visitor interactions as Analytics events and gain accurate insight into visitor behavior.

As dynamic elements on a website, Layered Chat Windows require a mechanism to cache tracking information and provide accurate results. This step-by-step guide describes a Local Storage implementation that allows data to persist when a chat session is interrupted.

Note: Interruptions usually happen in the following circumstances:
  • Visitor navigates to a new page under the same domain.
  • Connection dropout occurs.
  • Visitor browses multiple pages on the website simultaneously.
  • Visitor closes and re-opens or reloads a page.

The Local Storage technology is compatible with the following browsers:

  • Google Chrome recommended (Last 20 versions)
  • Mozilla Firefox on Windows (Last 10 versions)
  • Microsoft Edge
  • Microsoft Internet Explorer 9 and newer
  • Safari on macOS (Last two versions)
  • Opera (Last 10 versions)

See the WebStorage article on Wikipedia for details.

Note: For information about data residency, see the BoldChat Help Center. Bold360 and BoldChat data residency options are identical.

Prerequisites

All pages on your site must either include or reference the following code snippets:

Tip: Streamline code snippet delivery via Google Tag Manager.

Task One: Configure the Chat Frame Javascript Include

Add a Chat Frame Javascript Include to the Chat Window Definition deployed to your site. This code intercepts chat events and passes them to the chat window via the postMessage method.

  1. Go to Channels > Chat > Chat Windows > Customization tab.
  2. Under Appearance, select Layered - Details > Includes > Chat Frame Javascript Include.
  3. Add the following method to the Content field at the bottom:
    Note: This is the method how Layered Chat internal events are already communicated between the Chat Frame (hosted on livechat[-eu].boldchat.com) and the Chat Window (the container, hosted on the same website that the visitor is browsing). Using this method we are basically extending the existing Chat communications methods by adding a new key (gacomm) for these custom messages.
    try {
      function sendtxt(txt) {
        var message = JSON.stringify({
          gacomm: txt
        });
        parent.parent.postMessage(message, "*");
      }
      sendtxt(bcConfig.chatOptions.page);
      window.console && console.log("Sent Chat Window Page: " + bcConfig.chatOptions.page);
      if (bcConfig.chatOptions.page == "chat") {
        var _tEvents = {
            "new-message": "bc_newHistoryMessageCallback"
          },
          _tFunction = function(i, type, fName) {
            if ((i == "new-message") && (bc.$("#bc-status-prompt").prev().hasClass("bc-operator-message"))) {
              sendtxt("answered");
            }
          }
      }
      for (var i in _tEvents) {
        window[_tEvents[i]] = _tFunction.bind(window, i, "function", _tEvents[i]);
      }
    } catch (err) {
      window.console && console.error(err);
    }
  4. Save your changes.

Task Two: Configure the Chat Window Javascript Include

Add a Chat Window Javascript Include to the Chat Window Definition deployed to your site.

Note: It is recommended to encapsulate the code snippets in this section in a try/catch phrase to detect potential issues later on.
  1. Go to Channels > Chat > Chat Windows > Customization tab.
  2. Under Appearance, select Layered - Details > Includes > Chat Window Javascript Include.
  3. Open a try/catch and import inline the LS CACHE minified script.
    Note: The Chat Window Javascript Include code depends on the LS CACHE library to manage the expiration time of Local Storage entities. We strongly recommend that you include the following minified code on your website, instead of referencing the library:
    try {
    
    /**
    * lscache library
    * Copyright (c) 2011, Pamela Fox
    *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
    * You may obtain a copy of the License at
    *
    * http://www.apache.org/licenses/LICENSE-2.0
    *
    * Unless required by applicable law or agreed to in writing, software
    * distributed under the License is distributed on an "AS IS" BASIS,
    * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    * See the License for the specific language governing permissions and
    * limitations under the License.
    **/
    
    !function(a,b){"function"==typeof define&&define.amd?define([],b):"undefined"!=typeof module&&module.exports?module.exports=b():a.lscache=b()}(this,function(){function a(){var a="__lscachetest__",c=a;if(void 0!==m)return m;try{g(a,c),h(a),m=!0}catch(d){m=b(d)?!0:!1}return m}function b(a){return a&&"QUOTA_EXCEEDED_ERR"===a.name||"NS_ERROR_DOM_QUOTA_REACHED"===a.name||"QuotaExceededError"===a.name?!0:!1}function c(){return void 0===n&&(n=null!=window.JSON),n}function d(a){return a+p}function e(){return Math.floor((new Date).getTime()/r)}function f(a){return localStorage.getItem(o+t+a)}function g(a,b){localStorage.removeItem(o+t+a),localStorage.setItem(o+t+a,b)}function h(a){localStorage.removeItem(o+t+a)}function i(a){for(var b=new RegExp("^"+o+t+"(.*)"),c=localStorage.length-1;c>=0;--c){var e=localStorage.key(c);e=e&&e.match(b),e=e&&e[1],e&&e.indexOf(p)<0&&a(e,d(e))}}function j(a){var b=d(a);h(a),h(b)}function k(a){var b=d(a),c=f(b);if(c){var g=parseInt(c,q);if(e()>=g)return h(a),h(b),!0}}function l(a,b){u&&"console"in window&&"function"==typeof window.console.warn&&(window.console.warn("lscache - "+a),b&&window.console.warn("lscache - The error was: "+b.message))}var m,n,o="lscache-",p="-cacheexpiration",q=10,r=6e4,s=Math.floor(864e13/r),t="",u=!1,v={set:function(k,m,n){if(a()){if("string"!=typeof m){if(!c())return;try{m=JSON.stringify(m)}catch(o){return}}try{g(k,m)}catch(o){if(!b(o))return void l("Could not add item with key '"+k+"'",o);var p,r=[];i(function(a,b){var c=f(b);c=c?parseInt(c,q):s,r.push({key:a,size:(f(a)||"").length,expiration:c})}),r.sort(function(a,b){return b.expiration-a.expiration});for(var t=(m||"").length;r.length&&t>0;)p=r.pop(),l("Cache is full, removing item with key '"+k+"'"),j(p.key),t-=p.size;try{g(k,m)}catch(o){return void l("Could not add item with key '"+k+"', perhaps it's too big?",o)}}n?g(d(k),(e()+n).toString(q)):h(d(k))}},get:function(b){if(!a())return null;if(k(b))return null;var d=f(b);if(!d||!c())return d;try{return JSON.parse(d)}catch(e){return d}},remove:function(b){a()&&j(b)},supported:function(){return a()},flush:function(){a()&&i(function(a){j(a)})},flushExpired:function(){a()&&i(function(a){k(a)})},setBucket:function(a){t=a},resetBucket:function(){t=""},enableWarnings:function(a){u=a}};return v});
  4. Define the events to be reported in Google Analytics.
    var ga_events = {
      	"prechat": 'PreChat Form Displayed',
      	"chat": "Chat Opened",
      	"answered": "Chat Answered",
      	"postchat": "Survey Displayed",
      	"email": "Email Form (Unavailable)",
      	"no-operators": "Unavailable Chat",
      	"chat-sent": "Survey Completed or Transcript",
      	"message-sent": "Unavailable Email Sent",
      	"final": "Chat Ended without Survey or Transcript"
    	}
  5. Validate messages for security reasons.

    The following code achieves the following:

    • Ensures messages come from the livechat[-eu].boldchat.com server
    • Parses messages
    • Checks localStorage for existing events to be de-duplicated and discarded, if necessary
    • Sends relevant events to Google Analytics

    Note how individual events are stored in the browser localStorage with a CID, a unique identifier for Chat windows that survives page re-loads, browser closing/reopening as well as navigation on different tabs under the same domain.

    The code also ensures that the user is able to start multiple simultaneous chats on different domains while events are accounted for separately and accurately.

    function listener(event) {
      if (event.origin !== "https://" + bcConfig.host) return;
      var pmessage = JSON.parse(event.data);
      if (pmessage.hasOwnProperty('gacomm')) {
        window.console && console.log("Received: " + event.data);
        var received = pmessage.gacomm + "---" + bcConfig.cid;
        var found = false;
        lscache.flushExpired();
        CIDs = lscache.get('CIDs');
        if (CIDs !== null) {
          var arrayLength = CIDs.length;
          for (var i = 0; i < arrayLength; i++) {
            if (CIDs[i] == received) {
              found = true;
              break;
            };
          };
        } else {
          CIDs = [];
        }
        if (!found) {
          CIDs.push(received);
          lscache.set('CIDs', CIDs, 60);
          window.console && console.log("Sending new event to GA: " + received);
          try {
            ga('send', 'event', {
              eventCategory: 'Live Chat',
              eventAction: ga_events[pmessage.gacomm],
              eventLabel: 'Chat Window'
            });
          } catch (err) {
            window.console && console.error("Google Analytics UA code not found on page");
          }
        }
      }
    }
    if (window.addEventListener) {
      addEventListener("message", listener, false)
    } else {
      attachEvent("onmessage", listener)
    }
  6. Close the try/catch:
    } catch (err) {
      window.console && console.error(err);
    }

Task Three: Video Chat Events (Optional)

Track video chat events by updating your Chat Frame and Chat Window Javascript Includes.

Note: The video chat feature works over the HTTPS exclusively. If your site does not support secure connections, Bold360 opens the chat in a popup window and switches to HTTPS. In this case, you must include the Google Analytics snippet at the top of the Chat Window Javascript Include code to be able to send tracking data to Google Analytics.

Tracking messages contain specific video chat events that are assigned to individual Event Categories. This data is appended to _tEvents objects.

  1. Use the following Chat Frame Javascript Include code on your site:
    /* Chat Frame Javascript Include */
    
    try {
      var VIDEOCHAT_CATEGORY = 'Video Chat';
    
      var trackEventByVideoSessionStatus = {
        3: { event: "videochat-started", initiatedBy: "By Visitor"},
        4: { event: "videochat-started", initiatedBy: "By Operator"},
        7: { event: "videochat-ended", initiatedBy: "By Operator"},
        8: { event: "videochat-ended",  initiatedBy: "By Visitor"}
      };
    
      function sendtxt(txt, category, parameter) {
        var message = JSON.stringify({
          gacomm: txt,
          eventCategory: category || 'Live Chat',
          eventParameter: parameter || 'Chat Window'
        });
    
        parent.parent.postMessage(message, "*");
      }
    
      sendtxt(bcConfig.chatOptions.page);
      window.console && console.log("Sent Chat Window Page: " + bcConfig.chatOptions.page);
      if (bcConfig.chatOptions.page == "chat") {
        var _tEvents = {
            "new-message": "bc_newHistoryMessageCallback",
            "video-support": "bc_chatWindowLoadedEventCallback",
            "video-statechange": "bc_videochatStatusChangedCallback"
          },
          _tFunction = function(i, type, fName, value) {
            if ((i == "new-message") && (bc.$("#bc-status-prompt").prev().hasClass("bc-operator-message"))) {
              sendtxt("answered");
            }
    
            if ((i == "video-support")) {
                if (bcConfig.videoSupport) {
                    sendtxt("videochat-available", VIDEOCHAT_CATEGORY);
                }
                else {
                    sendtxt("videochat-unavailable", VIDEOCHAT_CATEGORY);
                }
            }
    
            if ((i == "video-statechange")) {
                var trackEvent = trackEventByVideoSessionStatus[value];
                if (trackEvent) {
                  sendtxt(trackEvent.event, VIDEOCHAT_CATEGORY, trackEvent.initiatedBy);
                }
    
                if (bcConfig.videoSupport.isAudioOnly && trackEvent && trackEvent.event === "videochat-started") {
                  sendtxt("videochat-audio-only", VIDEOCHAT_CATEGORY);
                }
              }
          }
      }
      for (var i in _tEvents) {
        window[_tEvents[i]] = _tFunction.bind(window, i, "function", _tEvents[i]);
      }
    } catch (err) {
      window.console && console.error(err);
    }
    Tip: Looking for a quick solution? Download the full code by clicking the attachment of this article.
  2. In Google Analytics, ga_events objects must contain the new event definitions in the Chat Window Javascript Include.
    var ga_events = {
      "prechat": 'PreChat Form Displayed',
      "chat": "Chat Opened",
      "answered": "Chat Answered",
      "postchat": "Survey Displayed",
      "email": "Email Form (Unavailable)",
      "no-operators": "Unavailable Chat",
      "chat-sent": "Survey Completed or Transcript",
      "message-sent": "Unavailable Email Sent",
      "final": "Chat Ended without Survey or Transcript",
      "videochat-available": "Video Chat Available",
      "videochat-unavailable": "Video Chat Unavailable",
      "videochat-started": "Video Chat Started",
      "videochat-ended": "Video Chat Ended",
      "videochat-audio-only": "Chat is Audio Only"
    }
    Update the ga message to send new tracking parameters.
    function listener(event) {
      if (event.origin !== "https://livechat.boldchat.com") return;
      var pmessage = JSON.parse(event.data);
      if (pmessage.hasOwnProperty('gacomm') 
          && pmessage.hasOwnProperty('eventCategory') 
          && pmessage.hasOwnProperty('eventParameter')) {
        window.console && console.log("Received: " + event.data);
        var received = pmessage.gacomm + "-" + bcConfig.cid;
        var found = false;
        lscache.flushExpired();
        CIDs = lscache.get('CIDs');
        if (CIDs !== null) {
          var arrayLength = CIDs.length;
          for (var i = 0; i < arrayLength; i++) {
            if (CIDs[i] == received) {
              found = true;
              break;
            };
          };
        } else {
          CIDs = [];
        }
        if (!found) {
          CIDs.push(received);
          lscache.set('CIDs', CIDs, 60);
          window.console && console.log("Sending new event to GA: " + received);
          try {
            ga('send', 'event', {
              eventCategory: pmessage.eventCategory,
              eventAction: ga_events[pmessage.gacomm],
              eventLabel: pmessage.eventParameter
            });
          } catch (err) {
            window.console && console.error("Google Analytics UA code not found on page");
          }
        }
      }
    }
    if (window.addEventListener) {
      addEventListener("message", listener, false)
    } else {
      attachEvent("onmessage", listener)
    }
    } catch (err) {
      window.console && console.error(err);
    }
    Tip: Looking for a quick solution? Download the full code by clicking the attachment of this article.

Reporting

Events are reported with a few seconds' delay under the Real-Time Events section and they are processed and made available within 24 hours under the Behavior section as well as Dimensions in Custom Reports, allowing maximum flexibility to be tied to any other Google Analytics dimension and metric.


Troubleshooting

For troubleshooting purposes and to ensure that events are transmitted correctly, the code above outputs three log lines for each chat event in the browser console, if available.


Similarly, in case the Google Analytics code is not found by Bold360 on the hosting website page, the following error is thrown in the browser console, if available:


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.

Post-chat form: Prompt customers for information after chat

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

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.
  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 Post-Chat Form tab, select Show when chat ends to activate the form.
  3. To only show the survey when the chat involved a certain number of communications, select If customer sends more than X messages.
  4. To add standard survey questions, select any of the following options:
    • Net Promoter Score
    • Responsiveness
    • Professionalism
    • Knowledge
    • Overall
    • Comments
    • Custom field
    Tip: To customize or localize the text associated with these options, go to Customization tab > Layered - Details / Pop-up - Details > Post Chat Survey group.
  5. Save your changes.
Remember: To implement a chat window, you must associate it with a chat button.

What are best practices for using a post-chat form?

Our best practice recommendation is to enable the post-chat survey to collect feedback from customers on interaction, NPS, and custom surveys.

Additional best practices include:

  • Only leverage post-chat form "If customer sends more than X messages." Number of messages may differ on the organization and AMC; however, 3 is a good benchmark. To encourage participation, do not use more than 3 fields in a post-chat form.
  • Enable ability for customer to send themselves a transcript. See Allow customers to send themselves a transcript.
  • Post-chat surveys enable organizations to measure their customer satisfaction and experience. By running Operator reports, you can see scores by agent and provide coaching to those with lower scores. See Operator Reports.

Pre-chat form: Prompt customers for information before chat

You can set up a pre-chat form that is displayed to customers after they click a chat button but before actually chatting with an agent. The pre-chat form is a component of the chat window associated with a chat button or chat invitation. The form can be customized. Customer input is added to the incoming chat.

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. Once enabled and associated with a custom chat button, the form is displayed for all chat sessions initiated from the associated button.
  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 Pre-chat form tab, click Enable pre-chat form to activate the form For customer-initiated chats only or For customer-initiated and invitation-based chats.
  3. To allow customers to choose the chat window language, allow the Language Selector to be shown.
  4. To prompt customers 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

    The maximum length of initial questions is about 8000 characters, but you should take into consideration that the shorter your question is, the more likely it is that end-users read it.

    Tip: To customize these fields, go to the Customization tab and under Appearance, select the relevant key from the Layered/Pop-up - Details > Pre-Chat Survey key group.
  5. To allow customers to associate the chat with a department in your organization, select an option for Department.

    To provide the customer with choices, you must add Departments Customer Can Choose.

  6. Save your changes.
Remember: To implement a chat window, you must associate it with a chat button.

What are best practices for pre-chat forms?

Use a pre-chat survey to collect information about customers to track customer history/experiences, and provide agents with more customer details. At a minimum, we recommend collecting Name, Email, and Initial Question.

This way, you can make agents more prepared for chats which decreases ASA, increases efficiency and therefore improves customer experience.

Allow customers to send themselves a transcript

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.

  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 Post-chat form tab, select Allow customers to send themselves a transcript.
  3. If you want the transcript to be sent from a specific email address, enter the address under Send from this address.
    Note: You cannot change the title of the email that Digital DX sends to customers.
  4. Choose the email format:
    • Plain Text
    • HTML
  5. Save your changes.

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.

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

Join the DX Community!

Meet fellow DX pros, ask questions, and learn best practices.

Join the DX Community

Featured

Set up an email account

Set up an email account

Configure Digital DX to receive, track, and manage emails.

  1. Create or edit an email account, as follows:
    1. In the Web Admin Center, go to Channels > Email > Email Accounts. The Email Accounts window is displayed.
      Note: To verify that an email account is set up properly, click Test next to an account.
    2. Select an existing account or click Create New. The New/Edit Email Account page is displayed.
  2. Select Enable email to activate the email account.
  3. Enter basic account settings on the General tab:
    Option Description
    Configuration Name Name the account for internal reference.
    Sender Email Address To use when sending email.
    Friendly Sender Name Used as the From Email Name when sending emails via this account. For example: Support Team, Jane Doe.
    Email client

    Select the email client you are using: MS Office 365 / Gmail / Other.

    The MS Office 365 and Gmail options don't only support the recommended OAuth 2.0 authentication, the Other option supports any client with basic authentication.

  4. Select the email client that you use to communicate over email.
    Note: In the Digital DX Desktop Client, you cannot select email client.
  5. Depending on your email client, you have the following options:
    Option Description
    User Name User name of the email server. For example, in the email address support@acme.com, the user name is support.
    Password The password associated with the user name for the POP3 server. Only available when you select Other for email client type.
    Server/Port Enter the host name or IP address and port of your mail server. If your email address is support@acme.com, then your mail server host name is normally mail.acme.com or just acme.com. All inbound emails are retrieved from this POP3 server.
    Secure Connection (SSL) To use a secure connection to your mail server, check Secure Connection (SSL) and enter the Port to be used for the connection. Check with your service provider as required.
    Type Choose your server type: POP3 or IMAP.
    Note: POP3 is unavailable for Microsoft Office 365 users.
    Leave copy of messages on server Store copies of emails on your POP3 server to facilitate download to Outlook or any other mail client.
    Folder Click Refresh folder list and then select the folder in your email account that you want to use for email communication with your customers.
    Tenant ID You Microsoft Tenant ID that you can find in the Azure AD admin center. (in the Directory ID field on the Properties page). Only available for Microsoft Office 365 users.
    Client ID
    • Microsoft Office 365 users find it in the Overview page of the Azure AD admin center
    • Gmail users find it on the APIs & Services > Credentials page Google Cloud Platform
    Client Secret Your client secret that you can find right next to your client ID. Only available for Microsoft Office 365 and Gmail users.
    Outgoing server Select SMTP server to set up an SMTP server for outgoing email.
  6. Optional: (Optional) Enter additional settings on the Distribution - Organization tab:
    Option Description
    Department Associate a Department with the email account. The Department can be used to override account-level automatic distribution settings and to determine which agents can be assigned emails by the automatic distribution system.
    Maintain email thread ownership on new mails Preserve the Owner (agent) field of each email thread.
    Append email thread ID to subject Append the Email Thread ID to the subject of replies. This make it easier to keep track of conversations with customers.
    Append email thread ID to subject Append the Email Thread ID to the subject of replies. This make it easier to keep track of conversations with customers.
    Auto-bcc Specify an email address that is included in the BCC field of all outbound emails from the agent.
  7. Optional: (Optional) Enter additional settings on the Format and content tab:
    Option Description
    Encoding Encoding for outgoing and incoming messages.
    Format Choose to show incoming email as either plain text or HTML.
    Canned messages for emails Select canned message folders that agents can use with email.
    Email Footer Enable and design a footer that is appended to all emails sent from this email account.
  8. Save your changes.
  9. For Gmail and MS O365 integrations, go to the recently added email account on the Email Account view and select the Authorize option.

    Complete the steps in the dialog that appears. Once the authentication is complete, the status of the email channel changes to Ready.