Bold360Chat Articles

What cookies and local storage entities are used by Digital DX AI widgets?

The following table lists all customer-side cookies used in widgets to provide reporting and analytics capabilities. Customers stay anonymous and their unique visitor IDs are only used to group customer queries in reports.

Cookie name Example value Description
bc.visitor_token 5d1ab47f-f7de-14c9-0045-b8d7c8a7c18b Identifies the visitor in Business Insights, used also when navigating across subdomains and by the customer information hub.
u v2,EU1,38DA82AC634C0F31 The cookie is used by visitors' engagement tracking in Bold360Ai's reporting system and leveraged by internal analytics tools. If the 'u' cookie is blocked, then the Engagement and Interaction data in legacy AI reporting is distorted.
35EBBB48 cv_4#t_ED43D8F69#v_1#lv_ ED43D8F57#e_00000000 Legacy visitor journey tracking cookie. There is one cookie per visitor journey.

Digital DX AI also uses customer-side localStorage entities in Conversational widgets to provide widget state persistence. You can change it to sessionStorage with the public widget API, but the content of the storage remains the same:

Storage key Storage value Description
bc.visitor_token 5d1ab47f-f7de-14c9-0045-b8d7c8a7c18b To provide better persistence and reporting, the unique visitor token is also currently stored in the localStorage of the customer's website.
nanorep.float.conversational. product_demo.kb904641352 {"convId":"7835951554271442645", "convLog":[...]} Stores widget state, including current conversation ID, chat history, active live-chat channel information and so on.


List of cookies used by Digital DX

Genesys DX/Bold360 cookies track the actions associated with a website customer's activity on this website to allow the website owner to provide accurate, helpful and feature-rich web chat features.

This data is handled as follows:

  • Suppressible by the customer who limits browser cookies
  • Used to identify behavior of a user on the website for purposes of Digital DX chat features (e.g. aggregated performance/analytics reporting, chat, visit, conversion history individual reporting)
  • Only useful during the visit or upon a subsequent visit
  • Not available between customers
  • Protected by the Digital DX secure infrastructure

The first five (5) are targeting types for uniquely identifying the website user within the Digital DX service and are used for things like targeted chat invitation, allowing a chat agent to better assist the website customer during a chat session, and for aggregate reporting. The latter four (4) are strictly necessary and only used for chat-related functionality.

Personalization

This cookie is used for providing the proper content based on context settings (query parameter).

Cookie nrContext2
Host 1st Party Website
Type 1st Party
Category Performance/Functionality
Expiration End of session
Purpose Bold360Ai is providing context-based, tailored content to customers in order to find the most relevant answers to their problem. The 'nrContext2' cookie is stored for collecting the right context from the user's machine.  
Creation When the website user loads a page containing a chat button/customer monitoring script or when a chat session launches.

Harmony

These cookies are used for seamless integration of AI interactions (search, botchat) and live agent chats.

Cookie _bc-chat-ended
Host 1st Party Website
Type 1st Party
Category Performance/Functionality
Expiration End of session
Purpose Stores a unique, anonymous identifier (VisitID) to allow Digital DX to recognize a particular browsing session or visit to the website.
Creation When the website user loads a page containing a chat button/customer monitoring script or when a chat session launches.
Cookie _bcContinueChat
Host 1st Party Website
Type 1st Party
Category Performance/Functionality
Expiration End of session
Purpose Stores a unique, anonymous identifier (VisitID) to allow Digital DX to recognize a particular browsing session or visit to the website.
Creation When the website user loads a page containing a chat button/customer monitoring script or when a chat session launches.
Cookie _bcvm_vid_{visitorParam}
Host 1st Party Website
Type 1st Party
Category Essential
Expiration End of session
Purpose Stores a unique, anonymous identifier (VisitID) to allow Digital DX to recognize a particular browsing session or visit to the website.
Creation When the website user loads a page containing a chat button/customer monitoring script or when a chat session launches.
Cookie _bcvm_vrid_{visitorParam}
Host 1st Party Website
Type 1st Party
Category Essential
Expiration Persistent
Purpose Stores a unique, anonymous identifier (VisitorID) to allow Digital DX  to recognize the website user during current and subsequent visits to the website.
Creation When the website user loads a page containing a chat button/customer monitoring script or when a chat session launches.
Cookie bc_pv_end
Host 1st Party Website
Type 1st Party
Category Performance/Functionality
Expiration End of session / 30 seconds
Purpose Improves accuracy of pageview tracking when a website user (customer) moves between pages.
Creation When the website user changes pages.
Cookie bc-visit-id
Host bold360.com
Type 3rd Party
Category Performance/Functionality
Expiration End of session
Purpose Same as _bcvm_vid_{visitorParam}. Stores a unique, anonymous identifier (VisitID) to allow Digital DX to recognize a particular browsing session or visit to the website.
Creation When the website user loads a page containing a chat button / customer monitoring script or when a chat session launches.
Cookie bc-visitor-id
Host bold360.com
Type 3rd Party
Category Essential
Expiration Persistent
Purpose Same as _bcvm_vrid_{visitorParam}. Stores a unique, anonymous identifier (VisitorID) to allow Digital DX to recognize the website user during current and subsequent visits to the website.
Creation When the website user loads a page containing a chat button / customer monitoring script or when a chat session launches.
Cookie _bc-curl
Host 1st Party Website
Type 1st Party
Category Performance/Functionality
Expiration End of session
Purpose Identifies the state of the layered chat window when the website user changes pages on the website so the chat window can be maintained.
Creation When the layered chat window is opened.
Cookie _url-cid
Host livechat.boldchat.com
Type 3rd Party
Category Performance/Functionality
Expiration End of session
Purpose Used to identify the cached URL of the open chat window for the website user.
Creation When the layered chat window is opened.
Cookie _bc_aa*

(_bc_aas, _bc_aaq, _bc_aasi-XXX-XXX-viewed, _bc_aasc)

Host livechat.boldchat.com
Type 3rd Party
Category Performance/Functionality
Expiration End of session
Purpose Used to identify the current state of auto-answers being shown to the customer within the chat window.
Creation When auto-answers is shown and used within the chat window, and only if Local Storage is not supported by the browser.
Cookie _reboot-cid
Host livechat.boldchat.com
Type 3rd Party
Category Essential
Expiration End of session
Purpose Used to track the chat URL to be reloaded after a Rescue-initiated reboot (in order to reconstitute the chat session).
Creation When a Rescue-initiated reboot is triggered.
Cookie _bcck
Host livechat.boldchat.com
Type 1st party
Category Performance/Functionality
Expiration 2 hours
Purpose Used for chat validation, chat start.
Creation When the website user loads a page containing a chat button / customer monitoring script or when a chat session launches.
Cookie _bc-escalation
Host livechat.boldchat.com
Type 1st party
Category Performance/Functionality
Expiration End of session
Purpose Stores the escalation state.
Creation When the website user loads a page containing a chat button / customer monitoring script or when a chat session launches.
Cookie _bc-escalation-time
Host livechat.boldchat.com
Type 1st party
Category Performance/Functionality
Expiration 2 hours
Purpose Keeps chat in sync when refreshed or new tabs are opened.
Creation When the website user loads a page containing a chat button / customer monitoring script or when a chat session launches.
Cookie _bc-prechat-submitted_{chat_id}
Host livechat.boldchat.com
Type 1st party
Category Performance/Functionality
Expiration 24 hours
Purpose Keeps prechat form in sync when refreshed or new tabs are opened. Only placed when prechat feature is used.
Creation When the website user loads a page containing a chat button / customer monitoring script or when a chat session launches.
Cookie csrf-token
Host livechat.boldchat.com
Type 1st party
Category Performance/Functionality
Expiration End of session
Purpose Stores security token for safe form submission.
Creation When the website user loads a page containing a chat button / customer monitoring script or when a chat session launches.

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.

Canned messages for agents

Canned messages are predefined strings of text that an agent can insert into a conversation. With canned messages, the agent can reuse commonly used responses without having to type them.

  1. Choose the channel for which you want to create or edit a canned message:
    • Chat: Channels > Chat > Canned Messages
    • Email: Channels > Email > Canned Messages
    • Messaging: Channels > Messaging > Canned Messages
  2. Create, edit, or copy a canned message on the Canned Messages page, as follows:
    • To create a new message, click Create New
    • To edit, click an existing message
    • To copy, click the Copy icon next to an existing message
  3. Name and identify the message so agents can find it:
    Option Description
    Name This is never seen by customers; used to identify and reference the message.
    Subject For messages that are auto answers, the subject is shown to customers as a label in search results.
    Keywords Enter words and phrases that help identify this message as relevant to a conversation.
    Shortcut To use this message, agents can type this shortcut as a /slash command (for example, /shortcutname)
  4. Set the message's Language.

    This value acts as a filter to ensure that agents see only messages that match the customer's language or with no value specified. For example, when an Italian speaking customer starts a chat, the agent sees Italian canned messages plus those with no language value.

    Result:

    Tip: Subject, Keywords, and Body should use the same language.
  5. Type and format the message.
    Channel Options
    Chat HTML* or plain text
    Email HTML* or plain text
    Messaging Plain text
    *HTML Variables For HTML, you can insert variables in ${variable_name} format. For example, use the variable ${login.ChatName} to insert the agent's chat name into the canned message.

    Available variables:

    • ${chat.ChatUrl} - The URL of the chat from where the customer started the chat session
    • ${chat.ChatName} - The name of the customer as provided on the pre-chat form. If the First name field is available on the pre-chat form then this variable displays only the first name of the customer.
    • ${chat.CountryCode} - The two-digit code of the country where the customer started the conversation
    • ${chat.RegionCode} - The region or ZIP code of the country where the customer started the conversation
    • ${chat.City} - The city where the customer started the conversation
    • ${chat.VisitEmailAddress} - Email address of the customer as provided on the pre-chat form
    • ${chat.VisitPhone} Phone number of the customer as provided on the pre-chat form
    • ${login.UserName} - The User Name of the agent as set on the Organization > Agents > Agent Information tab
    • ${login.Name} - The Agent Name of the agent as set on the Organization > Agents > Agent Information tab
    • ${login.EmailName} - The Email Name of the agent as set on the Organization > Agents > Email Settings tab
    • ${login.BestChatName} - The Chat Name of the agent. If this is unavailable, then the Agent Name of the agent.
  6. Save your changes.

    Result: The canned message is made available for responses to incoming conversations for the chosen channel (Chat, Email, or Messaging).

Remember: Messages that will be used as Auto Answers must be organized in folders as part of Chat Window setup.

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.

Optional: Customize Chat Buttons

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. Click Channels > Chat > Chat Buttons (Floating).
  2. Click on the name of your chat button.
  3. Go to the Settings > Display.
  4. You can select among predefined images in our Button Template library or provide URL links to your own custom button images.
  5. Scroll down to the Positioning section to select where your chat button is displayed on your web page and how it will animate when shown to the visitor.
  6. Save your changes.

Generate chat button HTML

The primary connection between Digital DX and your chat customers is a snippet of HTML code that you generate together with a chat button and insert to your site.

When choosing an HTML snippet for your site, you are asking yourself the following questions:

  • Which button or link are you showing to customers?
  • Are you collecting information about customers so you can analyze and react to visits even before they chat?
  • Are you tracking conversion events so you can relate specific chats to actual sales or other milestones?
  • Are you inviting customers to chat based on characteristics of their visit such as page visited, length of visit, and more.

Here's how to set up a Digital DX chat button HTML snippet to create a "gate" between customers and Digital DX. For this first test we'll create a Floating Chat button.

  1. In the Web Admin Center, choose the type of HTML code to generate:
    Option Description
    Floating Chat Button Select Channels > Chat > Chat Buttons (Floating) when you want to implement a floating chat button and/or monitor customers before chat and/or invite users to chat based on characteristics of their visit.
    Static Chat Button Select Channels > Chat > Chat Buttons (Static) when you want to implement a fixed-position chat button or link on your site.
    Conversion Tracking HTML Select Customers > Conversion Codes when you want to track conversion events so you can relate specific chats to actual sales or other milestones.

    What is the difference between static and floating chat buttons?

    A static chat button is a standard HTML button that is always displayed on your website as a static element. Whether it's a button or just a clickable string of text depends on how you configure your chat button definition.

    Floating buttons are animated by default and they slide into view when the customer moves the mouse over these buttons. When the button slides in, it covers part of your website, essentially creating an extra layer on top of your website content. You can define where the initial shrunk version of the button should appear on your website and how much it should shrunk before a customer moves the mouse over it.

  2. Apply settings to your HTML and associated entities.
    Tip: This article focuses on the "big picture" of how to implement an HTML snippet rather than the potentially long chain of settings that you can make to the various Digital DX entities that can be associated with an HTML snippet, such as Chat Button definitions, Chat Window definitions, Website definitions, Department definitions, Invitation Rulesets, Conversion Codes, and more.
  3. Click Generate HTML and then Copy to Clipboard.

    Result:

  4. Paste the code to your site.
    Important: Modifications to the generated HTML code may cause unexpected behavior and is not supported. For assistance or questions regarding the HTML snippet, contact Support.

    When pasting the HTML code to your site, consider the following in light of your actual site architecture:

    • To activate the code on all pages, paste the code into the footer include of your website before the closing <body> tag.
    • To activate the code per page (on a single page or multiple pages individually), paste the code into any page before the closing <body> tag.
    • If the chat button associated with your HTML uses a layered chat window, make sure your pages start with a <!DOCTYPE html> tag. Without this tag, some versions of Internet Explorer will use quirks mode and open the layered chat window in a pop-up.
    Tip: If you are sending the code snippet to a web developer via email, do not paste the code directly into an email message. Save the HTML code in a text file (Notepad, for example) and attach it to an email.

You must re-copy and re-insert your HTML code after making any of the following changes:

  • When you associate a new chat button (static or floating) with your HTML (rather than modifying an existing chat button)
  • When you associate a new website with your HTML (rather than modifying an existing website)
  • When you toggle Pass custom information about customer on/off
  • When you change the Conversion Code associated with your HTML
  • When you change the invitation rule set associated with your HTML

Show a different chat button image when agents are available/unavailable

To ensure that customers are properly informed about agent availability, you can choose to show a specific chat button image when at least one agent is available and another (or none) when no agents are available.

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 in the Display section under When Unavailable, choose the expected behavior when no agents are available:
    • Show Unavailable Button: When no agents are available, the Unavailable chat button is displayed to customers as displayed on the Preview pane.
    • Show No Button: When no agents are available, no button is displayed to customers.
    • Show Available Button: When no agents are available, the Available chat button is displayed to customers as displayed on the Preview pane.
  3. You can also select a custom image for your available and unavailable agents that customers can see. To do so, select the Custom image source and enter the available and unavailable chat image URLs into the corresponding fields.
  4. 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.

Customize chat button appearance, position, animation

Change the look and behavior of your chat button.

  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. To change your chat button's appearance, go to the Settings tab under Display.
  3. For floating chat buttons you have these additional options:
    • To control where your floating chat button displays on the customer's browser page, go to the Settings tab under Positioning
    • To control how your floating chat button is animated when shown to the customer, go to the Settings tab under Animation
  4. 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.

Set a chat button to be shown in specific countries

You can set chat buttons to be shown to customers in specific countries.

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. At the bottom of the Settings tab, under Locale, clear the checkbox for Show to all countries.
  3. Select countries to include or exclude.
  4. 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.

Associate chats (a chat button) with a department

Associate a chat button with a department to allow chats originating from the button to be tagged with department metadata, which can then be used to assign and organize chats.

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 Department 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.

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.

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 Floating Chat Button

Chat buttons are entry points that visitors use to engage with you. They can be customized to meet the needs of each area of your site.

Now you?ll create your first chat button and generate a very important snippet of HTML code. You?ll use the HTML code on your site to deploy chat; don?t worry if you aren?t ready for that step yet ? you can also preview test chats from within the Bold360 Admin Center.

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 Buttons (Floating).
  2. Click My Chat Button to edit.
  3. From the Chat Window drop-down, select My Chat Window that you have previously set up.

  4. If you have one department, select it under Department. This will route any chats that come in through this button to agents within that department.
    Note: If you have multiple departments, you can find more information on your routing options in Route chats to your agents.
  5. We recommend using your own custom image for the button itself. To do so, select Custom for Image Source. This custom image should be hosted on a URL, so that you can point to the button in Available Chat URL.
  6. We also recommend using another custom image for an unavailable button. To move forward with this recommended approach, select Show Unavailable button under When Unavailable. This custom image should also be hosted on a URL, so that you can point to the Unavailable button within Unavailable Chat URL.
  7. Once you have completed all the steps outlined, you are ready to generate the HTML to place on your website. To do so, on the left side of the page, go to the HTML tab.
    1. Under Website, select My Website.
    2. Under Auto-Invite Ruleset, select My Invite Ruleset .
    3. Click Generate HTML.

      You may be prompted to save your changes.

    4. Once HTML is generated, click Copy to clipboard.
    5. Paste this code into your favorite text editor such as Notepad. We do not recommend pasting code into Microsoft Word as it can break the code with styling or line breaks. Our best practice recommendation is to deploy this code to a staging site first. From there, review the widget and make any changes you want. Upon doing so, regenerate the code and then send it to your web developer to be added to all pages on your live website! Note that any test data will appear in reporting.
      Note: If you don?t have a custom button image, you can use our default image by keeping Image Source set to Predefined options.

Need more info? There?s a section about chat buttons in our Support Center.

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.

Set up your PIN entry page for remote control or co-browse

You can customize the Bold360 PIN invitation experience to match your company's branding and standards. An integrated PIN entry form behaves identical to pin.bold360.com, meaning your customers use it to contact an agent and enter the PIN that launches a remote access session.

Important: An agent can create a PIN based session even when they have reached their chat limits or have set their status to unavailable. PIN sessions go directly to remote control once the customer has granted permission and downloaded the applet.
Note: PIN-based remote access and co-browse do not work with AI-enabled chat windows. You must use a layered or pop-up window to control your customer's computer.
  1. In the Web Admin Center, go to Customers > PIN Invitation.

    Result: The PIN Invitation page is displayed.

  2. Select Enable PIN invitation.
  3. The following options allow you to customize your implementation of this feature.
    Option Description
    Website Associate the PIN invitation with a website.
    Chat Window Select the Chat Window you want customers to see upon connection.
    Timeout Set the length of validity for the PIN code.


    Figure 1. PIN timeout, as seen by agent
  4. Copy the generated HTML and send it to your web developer for implementation on your site.
  5. Save your changes.

Collecting customer data with custom information and variables

Gather information about customers and pass it to Bold360 to help agents achieve business goals.

You can pass custom information and custom variables from the HTML code for a Chat Button, Customer Monitoring, or Conversion Tracking. This article covers the variables that are available per HTML code type.

Chat Button Variables

Select the Pass custom information about customer option when generating Chat Button HTML.

vr: customer reference
Passes any desired information about a specific customer.
vn: customer name
Passes the customer's name. This variable passes the value of the Name field from the pre-chat form.
vi: customer information
Passes any desired information about a specific customer.
ve: customer email
When using a pre-chat form as part of your Chat Window definition, this variable passes the value of the Email field from the pre-chat form.
vp: customer phone
When using a pre-chat form as part of your Chat Window definition, this variable passes the value of the Phone field from the pre-chat form.
lc: language code
When using a pre-chat form as part of your Chat Window definition, this variable passes the value of the Language field from the pre-chat form.
iq: initial question
When using a pre-chat form as part of your Chat Window definition or Auto-Invite, this variable passes the initial question from the pre-chat form or pre-chat auto-invite form.
Note: The iq variable must be inserted manually into the WindowParameters section of the Chat Button HTML code.

Values are passed when the customer initiates a chat. Values are shown on the agent workspace together with the incoming chat.

Customer Monitoring Variables

Select the Pass custom information about customer option when generating Customer monitoring HTML.

vr: customer reference
Passes any desired information about a specific customer. An initial value is not passed to this variable via the agent workspace.
vn: customer name
Passes the customer's name. This variable passes the value of the Name field from the pre-chat form.
vi: customer information
Passes any desired information about a specific customer. An initial value is not passed to this variable via the agent workspace.
ve: customer email
When using a pre-chat form as part of your Chat Window definition, this variable passes the value of the Email field from the pre-chat form.
vp: customer phone
When using a pre-chat form as part of your Chat Window definition, this variable passes the value of the Phone field from the pre-chat form.
url: URL
Pass the customer?s current URL (the URL of the customer's current page).
Tip: When using Customer monitoring HTML on a site that requires registration, values can be passed once a customer signs in to their account. Use the Data Validation feature when passing sensitive data.

All variables are passed from one page to the next and remain set until a new value is passed. This allows for the Customer Monitoring to maintain the associated value throughout the visit, as well as passing those values to the Conversion Code (see below).

Conversion Tracking Variables

Select the Pass custom conversion information and Pass custom information about customer options when generating Conversion Code HTML.

Important: When implementing Conversion Tracking, you must ensure that your Customer monitoring HTML, Conversion Tracking HTML, and Chat Button HTML are all associated with the same website.
ca: conversion amount
Passes the conversion amount. Requires a number (with a decimal point for decimal values).
cr: conversion reference
Passes the conversion reference (such as an invoice or order number). This is a uniquely valued parameter. Duplicate conversion references are not allowed and will not trigger new conversions unless you change either the conversion reference or use a different conversion code (or leave it blank).
ci: conversion information
Passes any desired information about a specific customer. An initial value is not passed to this variable via the agent workspace.
vr: customer reference
Passes any desired information about a specific customer. An initial value is not passed to this variable via the agent workspace.
vn: customer name
Passes the customer's name. This variable passes the value of the Name field from the pre-chat form.
vi: customer information
Passes any desired information about a specific customer. An initial value is not passed to this variable via the agent workspace.
ve: customer email
When using a pre-chat form as part of your Chat Window definition, this variable passes the value of the Email field from the pre-chat form.
vp: customer phone
When using a pre-chat form as part of your Chat Window definition, this variable passes the value of the Phone field from the pre-chat form.

How to Set up Custom Variables

This section helps you implement custom variables and put them to use to solve business needs.

Variable values remain the same from page to page unless changed. With this in mind, we do not recommend using both Chat Button custom variables and Customer Monitoring custom variables on the same page. A good example of why this is not necessary would be when a customer comes to your site and signs into their account. The Customer Monitoring code sets the custom variables appropriate to the information from the customer's account. The customer then decides to launch a chat, these variables are then passed into the Pre-Chat form and pre-populate the form for the customer. By having the variables also available in the Chat button code, it opens the possibility of having the values from the Customer Monitoring code overwritten by the Chat Button variable assignment.

Passing Custom Variables on Pre-Chat Forms

You can pass custom information to Bold360 using custom variables via Chat Button or VMS code with the WindowParameters directive. The number of custom variables is not limited.

Note: Custom variable values cannot be updated once the chat is started, as opposed to the Conversion Tracking variables mentioned above.

To add a custom parameter to your Chat Window definition:

  1. In the Web Admin Center, go to Channels > Chat > Chat Windows > [select or create an item] > Pre-Chat Form > Custom fields > New Custom Field.
  2. Set the field Type to Hidden.
  3. Add the parameter to the VMS or Chat Button code on your page via WindowParameters.
    Important: The variable name must start with customField_.

    Let's say that you need to pass the following additional variables:

    • CampaignID
    • VisitorFromID
    • CreativeID

    In this case, construct the WindowParameters directive as follows, where value1, value2 and value3 are the respective values:

    var WindowParameters="customField_CampaignID=value1&customField_VisitorFromID=value2&customField_CreativeID=value3";
    _bcvma.push(["setParameter", "WindowParameters", WindowParameters]);
Note: Special and unsafe characters must be escaped. With JavaScript, use the encodeURIComponent() method to convert such characters instead of escape().

Result: The custom variable and the new values now appear in the Chat Details window.

Tip: Add your custom field to the grid by selecting Grid Preferences > Column Chooser and dragging the field over the grid header. This is a per-agent setting.

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.

Wrap-up Fields: Organize items by Category, Custom Field, Status

Create labels (wrap-up fields) that can be used to organize items in a channel automatically according to rules or manually by an agent during wrap-up.

  1. In the Web Admin Center, choose the channel for which you want to create labels:
    • Channels > Chat > Wrap-up Fields
    • Channels > Email > Wrap-up Fields
    • Channels > Messaging > Wrap-up Fields
  2. Along the left side of the page, choose the type of label to edit or create:
    • Categories
    • Custom Field 1
    • Custom Field 2
    • Statuses
  3. Select an existing item or click Create New.
  4. Name the label.
  5. Save your changes.

The labels are ready for use:

  • An agent can use the wrap-up form to manually assign a label to a chat, email, or message
  • An administrator can create rules to automatically assign a label to a chat, email, or message

What are best practices for creating wrap-up fields?

Wrap-Up Fields allow you to capture information from agents based on engagement; ask agents to provide a category, status, or custom fields after a conversation. You can make these mandatory. We recommend using these as they can be reported on and used to understand trends and volume. Wrap-up fields are also very helpful for CRM integrations and enable easier and more organized follow up as needed.

Data validation code samples

Sample generated HTML is given below. When HTML is generated with an associated Website definition that has Data validation enabled, the generated HTML includes the comment /* Requires Authentication */. This provides sample data that has not been validated. You can add or remove what is needed from the data on your server, then validate the data and replace the value (either with the hash appended in the case of HMAC-SHA512, or just the raw encrypted PGP data).

For chat launches, it is best to use the function callback method to make an asynchronous call to your server to validate the chat and return the validated data.

Note: This is a self-launching anonymous function that is initially invoked indirectly by another function.

Sample Code ? Static Chat Button

<!-- BoldChat Live Chat Button HTML v5.00 (Type=Web,ChatButton=7.1 T,Website=Tilapia  -->
<div style="text-align: center; white-space: nowrap;">
<script type="text/javascript">
  var bccbId = Math.random(); document.write(unescape('%3Cdiv id=' + bccbId + '%3E%3C/div%3E'));
  var _bcvma = _bcvma || [];
  _bcvma.push(["setAccountID", "2307475884"]);
  _bcvma.push(["setParameter", "WebsiteID", "665123557559499"]);
  _bcvma.push(["setParameter", "SecureParameters", function(callback, type){ callback("61D2774599ABE6B36086DB65A32571F8D43F0D57170CFDE5A9CCF49AB38DD235FC151FD15F2F557163C73155E031C0B401D9124A5297746381791D589F7E6273Type=chat&ChatButtonDefID=58444531713309044&CustomURL=http://boldchat.com&VisitRef=a ref&VisitInfo=info&VisitEmail=email@gmail.com&VisitPhone=3166704000&URL=http://boldchat.com&ChatKey=Something unique to chat 1400085276518&VisitorKey=something unique to visitor&Expiration=1400085306518"); }]);
  _bcvma.push(["addStatic", {type: "chat", bdid: "58444531713309044", id: bccbId}]);
  var bcLoad = function(){
    if(window.bcLoaded) return; window.bcLoaded = true;
    var vms = document.createElement("script"); vms.type = "text/javascript"; vms.async = true;
    vms.src = ('https:'==document.location.protocol?'https://':'http://') + "vmss.boldchat.com/aid/2307475884/bc.vms4/vms.js";
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(vms, s);
  };
  if(window.pageViewer && pageViewer.load) pageViewer.load();
  else if(window.addEventListener) window.addEventListener('load', bcLoad, false);
  else window.attachEvent('onload', bcLoad);
</script>
 <span style="font-family: Arial; font-size: 8pt; color: black;"><a href="http://www.boldchat.com" style="text-decoration: none; color: black;">Live chat</a> by BoldChat</span>
</div>
<!-- /BoldChat Live Chat Button HTML v5.00 -->
Important: When you define the SecureParameters callback, you can use the type argument to specify three different types of events: chat, visit, and conversion. These event types are especially useful when you want to implement PGP encryption for only a selected event type. For example, you may want to encrypt chat events (when the customer clicks the chat button), but not every visit event (when the page with the chat window code loads). To define event types, you can do the following:
_bcvma.push(["setParameter", "SecureParameters", function(callback, type) {
            if (type == "chat") {
                callback(getChatPGPEncryption());
            } else if (type == "visit") {
                callback(getVisitPGPEncryption());
            }
            else if (type == "conversion") {
                callback(getConversionPGPEncyprtion());
            }
        }]);

Sample Code ? Text Chat Button

<!-- BoldChat Live Chat Button HTML v5.00 (Type=HTML,ChatWindow=7.1 T,Department=Billing,Website=Tilapia 2 -->
<div style="text-align: center; white-space: nowrap;">
<script type="text/javascript">
  var bccbId = Math.random(); document.write(unescape('%3Cdiv id=' + bccbId + '%3E%3C/div%3E'));
  window._bcvma = window._bcvma || [];
  _bcvma.push(["setAccountID", "2307475884"]);
  _bcvma.push(["setParameter", "WebsiteDefID", "665123557559499"]);
  _bcvma.push(["setParameter", "SecureParameters", function(callback, type){ callback("61D2774599ABE6B36086DB65A32571F8D43F0D57170CFDE5A9CCF49AB38DD235FC151FD15F2F557163C73155E031C0B401D9124A5297746381791D589F7E6273Type=chat&DepartmentID=2401021351553992858&ChatWindowID=8972751348093551233&CustomURL=http://boldchat.com&VisitRef=a ref&VisitInfo=info&VisitEmail=email@gmail.com&VisitPhone=3166704000&URL=http://boldchat.com&ChatKey=Something unique to chat 1400085276518&VisitorKey=something unique to visitor&Expiration=1400085306518"); }]);
  _bcvma.push(["addText", {type: "chat", department: "2401021351553992858", window: "8972751348093551233", available: "Chat is Available", unavailable: "Chat is Unavailable", id: bccbId}]);
  var bcLoad = function(){
    if(window.bcLoaded) return; window.bcLoaded = true;
    var vms = document.createElement("script"); vms.type = "text/javascript"; vms.async = true;
    vms.src = ('https:'==document.location.protocol?'https://':'http://') + "vmss.boldchat.com/aid/2307475884/bc.vms4/vms.js";
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(vms, s);
  };
  if(window.pageViewer && pageViewer.load) pageViewer.load();
  else if(window.addEventListener) window.addEventListener('load', bcLoad, false);
  else window.attachEvent('onload', bcLoad);
</script>
 <span style="font-family: Arial; font-size: 8pt; color: black;"><a href="http://www.boldchat.com" style="text-decoration: none; color: black;">Live chat</a> by BoldChat</span>
</div>
<!-- /BoldChat Live Chat Button HTML v5.00 -->

Sample Code - Customer Monitoring and Floating Chat Button

<!-- BoldChat Customer Monitor HTML v5.00 (Website=Tilapia ,Ruleset=7.1 My Custom Chat Invitation (Ryan),Floating Chat=7.1 (Ryan) floating,Floating Call=- None - -->
<script type="text/javascript">
  var _bcvma = _bcvma || [];
  _bcvma.push(["setAccountID", "2307475884"]);
  _bcvma.push(["setParameter", "WebsiteID", "665123557559499"]);
  _bcvma.push(["setParameter", "SecureParameters", function(callback, type){ callback("7F305427D701DB665E5A273F259C9B1E6EFED73B512CCB779E7D31FCA789FE8488AA179278ED2F0DF5845F209FD1CC6A0FF6E27BD2151F218F73F4BFF8BF375FType=chat&FloatingChatButtonDefID=660128588754890&VisitName=floating&CustomURL=http://boldchat.com&VisitRef=a ref&VisitInfo=info&VisitEmail=email@gmail.com&VisitPhone=3166704000&URL=http://boldchat.com&ChatKey=Something unique to chat 1400085276518&VisitorKey=something unique to visitor&Expiration=1400085306518"); }]);
  _bcvma.push(["addFloat", {type: "chat", id: "660128588754890"}]);
  _bcvma.push(["setParameter", "SecureParameters", "1AC03C6EF0B1C46A96DE1CD9250D40EB4DF5C105837162AA063FC2B2424DA4870B34F1FB17BC35EB60A6576B32E092F6153BD1F9219BBAB388571FFAA183EB64Type=visit&InvitationID=2076721744768832302&VisitName=invite&VisitRef=a ref&VisitInfo=info&VisitEmail=email@gmail.com&VisitPhone=3166704000&URL=http://boldchat.com&ReferrerURL=https://google.com&VisitorKey=something unique to visitor&Expiration=1400085306518"]);
  _bcvma.push(["pageViewed"]);
  var bcLoad = function(){
    if(window.bcLoaded) return; window.bcLoaded = true;
    var vms = document.createElement("script"); vms.type = "text/javascript"; vms.async = true;
    vms.src = ('https:'==document.location.protocol?'https://':'http://') + "vmss.boldchat.com/aid/2307475884/bc.vms4/vms.js";
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(vms, s);
  };
  if(window.pageViewer && pageViewer.load) pageViewer.load();
  else if(window.addEventListener) window.addEventListener('load', bcLoad, false);
  else window.attachEvent('onload', bcLoad);
</script>
<noscript>
<a href="http://www.boldchat.com" title="Live Chat Software" target="_blank"><img alt="Live Chat Software" src="https://vms.boldchat.com/aid/2307475884/bc.vmi?&amp;wdid=665123557559499&amp;secured=1AC03C6EF0B1C46A96DE1CD9250D40EB4DF5C105837162AA063FC2B2424DA4870B34F1FB17BC35EB60A6576B32E092F6153BD1F9219BBAB388571FFAA183EB64Type%3Dvisit%26InvitationID%3D2076721744768832302%26VisitName%3Dinvite%26VisitRef%3Da%20ref%26VisitInfo%3Dinfo%26VisitEmail%3Demail%40gmail.com%26VisitPhone%3D3166704000%26URL%3Dhttp%3A%2F%2Fboldchat.com%26ReferrerURL%3Dhttps%3A%2F%2Fgoogle.com%26VisitorKey%3Dsomething%20unique%20to%20visitor%26Expiration%3D1400085306518" border="0" width="1" height="1" /></a>
</noscript>
<!-- /BoldChat Customer Monitor HTML v5.00 -->

Sample Code ? Conversion Code

<!-- BoldChat Conversion Tracking HTML v5.00 (Website=Tilapia ,ConversionCode=account) -->
<script type="text/javascript">
  var _bcvma = _bcvma || [];
  _bcvma.push(["setAccountID", "2307475884"]);
  _bcvma.push(["addConversion", {
    SecureParameters: "53D52AC941C774AB8A0D0F575D12FE873A2CB861D57172A4E54BE897583E294E3B6B665129AF19DEAD041C6975E84D160B2B4FD0EC825A69FE606729F1F81776Type=conversion&ConversionCodeID=33221100&ConversionAmount=100.0&ConversionInfo=conversion info&ConversionRef=123456&Expiration=1400085306518",
    WebsiteDefID: "665123557559499"
  }]);
  if(window.pageViewer && pageViewer.conversion) pageViewer.conversion(_bcct[_bcct.length-1]);
  var bcLoad = function(){
    if(window.bcLoaded) return; window.bcLoaded = true;
    var vms = document.createElement("script"); vms.type = "text/javascript"; vms.async = true;
    vms.src = ('https:'==document.location.protocol?'https://':'http://') + "vmss.boldchat.com/aid/2307475884/bc.vms4/vms.js";
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(vms, s);
  };
  if(window.pageViewer && pageViewer.load) pageViewer.load();
  else if(window.addEventListener) window.addEventListener('load', bcLoad, false);
  else window.attachEvent('onload', bcLoad);
</script>
<noscript>
<a href="http://www.boldchat.com" title="Live Chat Software" target="_blank"><img alt="Live Chat Software" src="https://vms.boldchat.com/aid/2307475884/bc.vci?wdid=665123557559499&amp;secured=53D52AC941C774AB8A0D0F575D12FE873A2CB861D57172A4E54BE897583E294E3B6B665129AF19DEAD041C6975E84D160B2B4FD0EC825A69FE606729F1F81776Type%3Dconversion%26ConversionCodeID%3D33221100%26ConversionAmount%3D100.0%26ConversionInfo%3Dconversion%20info%26ConversionRef%3D123456%26Expiration%3D1400085306518" border="0" width="1" height="1" /></a>
</noscript>
<!-- /BoldChat Conversion Tracking HTML v5.00 -->

Sample Encryption and Hashing Applications

Here we use the Bouncy Castle APIs for performing PGP encryption: https://www.bouncycastle.org/

The methods illustrated in the samples below validate the parameter data by either encrypting it with the given PGP key or hashing it with the given hash key. The samples can be either embedded inline in jsp/asp.net or pulled out into utility classes/packages.

Java PGP

import java.util.Date;
import java.util.Iterator;
import java.net.URLEncoder;
import java.security.KeyPairGenerator;
import java.security.SecureRandom;
import java.security.Security;
import java.security.MessageDigest;
import org.bouncycastle.openpgp.*;
import org.bouncycastle.openpgp.operator.*;
import org.bouncycastle.openpgp.operator.bc.*;
import org.bouncycastle.bcpg.*;
import java.io.*;
public class PGPUtil {
	public static void main(String[] args) throws Exception {
		Long accountID = 2307475884L;
		Long websiteID = 665123557559499L;
		Long chatButtonID = 58444531713309044L;
		Long floatingChatButtonID = 660128588754890L;
		
		String url = "http://boldchat.com";
		String referrer = "http://google.com";
		String chatKey = "Something unique to chat " + String.valueOf(System.currentTimeMillis());;
		String visitorKey = "something unique to customer";
		String appendData =  "&ChatKey=" + chatKey + "&VisitorKey=" + visitorKey + "&Expiration=" + String.valueOf(System.currentTimeMillis()+30000);
		String customData = "&CustomURL=http://boldchat.com&VisitRef=a ref&VisitInfo=info&VisitEmail=email@gmail.com&VisitPhone=3166704000&URL="
			+ URLEncoder.encode(url, "UTF-8") + "&ReferrerURL=" + URLEncoder.encode(referrer, "UTF-8");
			
		String chat = "ChatButtonDefID=" + chatButtonID + customData + appendData;
		String invite = "FloatingChatButtonDefID=" + floatingChatButtonID + "&InvitationDefID=2076721744768832302&VisitName=floating" + customData + appendData;
		String conversion = "ConversionCodeID=33221100&ConversionAmount=100.0&ConversionInfo=conversion info" + appendData;
		
		
		byte[] encryptionKey = "-----BEGIN PGP PUBLIC KEY BLOCK-----\r\nVersion: BCPG v1.50\r\n\r\nmQENBFNnvrgDCACe2sn+PAHxG/fhfHgFNu4ClODlvrduchKS49AsILEsgB+ie1Yf\r\n3gz1j2JrIcwsEg1AAVPOHJvoXBjLJMoA0TfJbtVXP9S/9Q6XGuQgtOb/HVP5mDTZ\r\nwEGDQH5l6Oxob/xWBD8SAjlQoHzPwEsJMigZiFdQMDCUMIlpcSje3Om2ZGhZ7Qc0\r\ncw0PgR9Wk3NWzX38RqMkxlL+l2UPHvRU3e3nPEDvJSbFORzsd7H/D6iAOG//fd0j\r\nU+dM+vZ7AI4XncFI/OcHxUPISEZK6whg0DjaOMGONZD3bO2RtaeOL+5DD+DMRscW\r\nlYwrGjA4PTQQ+Ba2fyaG73FEUlRdcdwmhmXbABEBAAG0CGJvbGRjaGF0iQE3BBAD\r\nCgAhBQJTZ765AhsDBAsJCAcGFQoIAgkLBAsJCAcGFQoIAgkLAAoJECe+KX41fF/C\r\nO/kIAIEfLLyT9v9vyzgqpuaBh6l+6db0nKmaXB9wlYMWVtCPJ4XtG3paJXuuNbjw\r\nq5R0P+zwa2j5jDhkOHYasAxRvevxuIHjnkU/UIUshJRsFANGQ8d+vZdF9yRLneKB\r\n933svbm9XT/dQtzGVFpP0IgdI8TVmxmzc+2n69AM4u8ScmyBvX9m1cRYEuS9v4tS\r\n13AAp/xgOg4qujno1tc158jOsGE27IxZXyCco2EwJVkz2ms4e0I/4LNOOaqWRvOF\r\n7Nxnj06zfT0Reg4ILk2ERNfG/qVpOwUuYvYc7mCvhJ8UBtHw50v9K01k9/RC61Mf\r\nrjFvV5ynRX259HTeqJl9h+hNeHy5AQ0EU2e+uQEIALVukl/lfWWgyi0ThGoiWwGy\r\nVnunONHiby7CAz6gDtlGdgv1za6IB5RqVbgrGNfDYHyH8gHovXw69tMUA/1ux0YS\r\nC9wE3sXY9iDkdpQMPPobtoQhkPtDm4kEYVb/MYKapdgWxfXA/HOra4br21xiY5zS\r\nCJ1dDMu71uL2xLFtZvDMZjAxVLrbuY/QODfNro6hKiwJZ5X7PnHzJ7VVowlhYq0v\r\n7f61stNC2EGKsjOSUlr22Iw0k6H055xfwLWMrOBcE8Bqqd3GsAD7QypINSSrgSdV\r\n4ebYDRzD41O2elrfElGAB4yhqwLEVYOZ4JuZxJ1q2kpPxZjmjyxfPv7tox7dgxUA\r\nEQEAAYkBHwQYAwoACQUCU2e+uQIbDAAKCRAnvil+NXxfwtUbB/4pmdAV7COUoXdC\r\nNlTj3cpxSxtV0iBdxjneJaNBiR7JIuL/3uoD7bMMMxpXDs5L9s1CLRLUMNarK8pj\r\nkwi3pVhET19r/6I8rEt+V4ddxODjggO6zuc5vMki8tlufna4cyhAyvbGPIZ0C/b0\r\nqGYNnDqactBpzuqT9QjMfUQSMt7acAZIBqK0UvCCwPsuNFz4HFPGoqW3BWmCN7CC\r\nVOCKwecCNCj0Y9SJdOZP8mvXubSeb3inWGuONLpuBF2ciIQCkRO2DtGwEMbdbyoY\r\nZUkdI7Rk793tfLd4mqT/BfikQo0Uyc8yYYbBkr6lPTT8J0mYyFL7SOkf10XoJ+ap\r\n7cLZwjou\r\n=pD7x\r\n-----END PGP PUBLIC KEY BLOCK-----\r\n".getBytes("UTF-8");
		byte[] signingKey = "-----BEGIN PGP PRIVATE KEY BLOCK-----\r\nVersion: BCPG v1.50\r\n\r\nlQPGBFNnvvYDCACOeYaG9ugbRPHpe9P8GWdPFH/kpQlfFM1JVQNnCSC4OWkZhDbu\r\nUuAxWj7XaFWOsctnnjx1DYZ8EE54q1eI2j62KErqM58ZCZpChQ2Xh1L8lvmWPdbU\r\nTdWzjekfVaLGObyydl+LYRepjbrsWT/r2/nDcmJSvjesbwWZkfWH5AxXc0ngHbG0\r\nsnOVMtZBSGSj9AnRTJhcr6GIMh8DevG93NVLHu45nfXHOVkTx6oTlrq7LfYzoRAh\r\nBPu1ydbclbeNXsOJbPlxaEAjPwXsoRMa6xaNb4UHCaJX/7kyU2QeuJGJwk7sU09M\r\n/FADAo31A4dS58unr3RrxNaL4tVJ5jEJECojABEBAAH+CQMCW7scittNNYVgpaZ1\r\ngOyt59uRf4YcTUxq0j8NLqFNRo7kC8j/W/upd3i9OJM+95Bsf+Glr5tgKcnuP8SG\r\nCP8eTNyIUckhTJmUpDY0MRUS1yvOBqp+MpfIxrGZ2pP/fgcW1SUjx5f7kQ2pTJOQ\r\nbbQLeQHIPOJbCa0YbAWYmSES5XQCmZSZLvg9JZ1mptzCaPswyzUAViNQt6tTF8kO\r\nceX1rdAoMSzLoETfmPA6Jb4GdQUO/bJARIH0NqhGiZqanYpn6e8GNeqF/9P2fceH\r\n+VvRVlGa8kq0QSFD/fONmW2O67lxfI7A8tEIqj6I+IimsDNhf7c56eIo779ebHmX\r\nhbWlOTDdbPqskuTZTH58r+2gI+ayzxGQecQWk2KzxO4akhMCUyLZw3cAm2qeIXmo\r\nI8sAUwaPrjXtS9QSoqXzruoIcNIwUFk/G/mGMlkrOoAdP83Pw3qM3MmmcnBQoHRA\r\nDmDEZZtzlEyQUO8CR56HevyzibHRXuBJ6gLNDgWmu8ZbP1bUloC3GoXdkf43fQ4I\r\n+ZBEsjNr2QwLclcavZaKX0O6OUsxnCpt8QbkGEJyLUwT0lTomqpQRyHi96UnvpNb\r\n3j9iRtW82lT6nzP1PLpG47OoYoKr8ZjhmLJ2rMwHBkZoMFOeRqnQDdXScGNIb4IK\r\n3L8AWmtxa0obMpJC5CCaIZeQ9QW8mMVvGL7SShvDoVM0ZBKpAX6OBhPkr55Id5vT\r\nTuM1n0jl8AcreEy3aanvZn2AnWpKcVVbbU0XQxT9ceiX/Do4nVwTLEK4zso1BGQ1\r\nzKRH9EaoXlW/3Lo/qWzGdZ8+2ZoUYlDPEx92bmdL2pYOwCo3ymivWClx0rkGRLON\r\nUeOjrcf1t/gcJPvkcFvG8Ql7ENp2jnZ0e/kNzPLWoLKm+3+AthXKai8MzrTpJbeg\r\nN3LEEHzieRtBtAhib2xkY2hhdIkBNwQQAwoAIQUCU2e+9wIbAwQLCQgHBhUKCAIJ\r\nCwQLCQgHBhUKCAIJCwAKCRCko4tpkJqxpAaqB/9KvEr2uaBPU4rFMF1x72ApFCn2\r\na2Z85bDNVUEy5cba55tlekNLvgcy6X5hsaFM3dFOibkfadPwKd0taneX2AiFsFHn\r\n1XHCoyr2GGnabk4RlEVq/F9mMjwJuRGIrRupx93dldLw4gyK36nWV9VNO6+OEsD2\r\nccYMG7wcQqTnU39YT1d62p45vZLrMrh2H/unGdWMSsT/iPaXKJI9A4AFBc+3EaTx\r\nv0/UxOKmo1Fn1r3mbRG7m3P30Hb/T9czQub1ZMbTnnvBLE0JElWEWDlc7ljNYbed\r\nO0QjRDEXC01bU0CkGYE7Fru6ihqlIxoIagVVO5xNYVF2cHElv/+frbnJV0usnQPG\r\nBFNnvvcBCACui7N911WAh/ObAFiCauw1RBO1rLpLP7Hkb+FppCIDTiWuaYeEF5OX\r\nfZhtaVpzZnTz7zQgbFVPAe4OyktsijBMiR2rPMvRqU2ErJSzcx+YZJVpxqdi0Aso\r\npvzwZP0B4h6qA0FVtXl/pyYNQhXwErdyT42DchWOYcQsmAHJzjuLUpgsSCCvyKha\r\ntlf0NStZTkpMhyhHg/D2kMki94IPW127KbXcuJFFPHOdTRgiuCn4IW62gA1RRJaj\r\ng4s3J2Pesvx48ONoj3NXMTXnSq0WEKNLBS8sHE8B+25/Z4OU/Cg9bh99a3lPmkdg\r\nuEKueCu/Xj2ZE/QcrvtIa/E8dFc+FpG1ABEBAAH+CQMCW7scittNNYVgAtjr+rd9\r\nt/1sln9YmzVjgR4wPC4KJ27/G2BdKq0oxggPdnl50Vn78334j6S8+m7B8yZuZtV+\r\nwJnd6GRkMQe4+GQm5ujuayUmOrODY6M2tw/wIxSxUREpvzyPpg95tyx5bHei0AEM\r\nQC2A0sJZ6zsK1BivP7FZzFPwcdeKbbCaQcYjEH+YrPVWaCwfEmSveKwVjH70nrnS\r\nhCFOp1cjZnroNSaMKqq6pkzfDLD1xeOfKHJmuHd6XYfQ2WaZx0E9STcIQBnAzY0a\r\nyaEs2ckoMZpdrsKRxGBg51mRZLqCl1ZebebISpjn9czYudNgm/5blD7twPo3SOzy\r\nm7oTG1DiMPNwPxQu6X/yc2y6AQSVlZzbv+rnP8Mlv0x6VHkEbbVnA0J8NdGj2oxO\r\ngGUbPOG2ei7c0gBQs6ILQBNEf5L5EBdkx3iRkoD962daPT46BZym7aiuRWdclksB\r\noqjQ3NeePwVtI8sz9tXrCiVoB5FcmqdeqFhwxhZkUFfeSTAAIaxmjSEzMhYCiWjm\r\nKfc3fjDTYE5vi52ahphIFwgj3Vu6CmA7hb1WAuNR3C/oc+C0tXlqtX4joEpdkjwf\r\noNMyEOttiy3Nd2Y2toJ0lGN2LvVbune4JthBrP9oNGoTGS+amk9s2BFLQz+QUdzL\r\nERe+X1ovTuGV0LgILWG32c55b3hJXNwgZeqnGGoPw7+XgSFUb0AzYmDmZWrvPMUJ\r\nnM/bLLEtVsipGdYuBcopLuq9stxSxfXpyugXkuwmLd9GkUIaCup1f7Um+FTy9q8c\r\nAyjFkOojM9V2Zooft2AHHesvm6HGwfyiLKd20WXtv8jBmmx7C44Q9LJksM5zzTeH\r\n97EHMM5TEZu6BjyMCwOrhnYNOae9AIrNFB+Dr6ynm0R6Fn+1xO82RG1VXK6i3di/\r\nh1r8t6jBiQEfBBgDCgAJBQJTZ773AhsMAAoJEKSji2mQmrGkg8gH/0YwswtvEQav\r\nu5GVfEGyFdTgiIkwHzhEDsWjr1KOMR6U+FcdcWvULCSsgXhWSaU4JalORsu93VB1\r\nELG5ju3dR3sPyocvOhxHjcJTSATYltVLlJGD3h46tVr5jo76zC0W3QjFoU8HMh63\r\nch9tY45/B3/UNRAY3ypapxZbnYKiYamAh4oKSjhE+aK3LS8gBIygVu93NQQ6mQiq\r\nc7SfnKxHqYfQaFe3d4ZQQ4oxb/f2NrJXxO22QZQv92o1YdOzYUYib8tFpXj9eps7\r\n3SldYNvQpSOTJLqwwruLwS45rEL+PbI9kEy08YiYE7qWC5JEwS2mhXiuAEFwst1P\r\n2sJmSsT9+mY=\r\n=tUYw\r\n-----END PGP PRIVATE KEY BLOCK-----\r\n".getBytes("UTF-8");
		char[] password = "boldchat".toCharArray();
		
		String encryptedChat = new String(PGPUtil.encrypt(chat.getBytes("UTF-8"), encryptionKey, signingKey, password), "UTF-8");
		String encryptedInvite = new String(PGPUtil.encrypt(invite.getBytes("UTF-8"), encryptionKey, signingKey, password), "UTF-8");
		String encryptedConversion = new String(PGPUtil.encrypt(conversion.getBytes("UTF-8"), encryptionKey, signingKey, password), "UTF-8");
	
		System.out.println("Encrypted Chat SecureParameters: " + encryptedChat);
		System.out.println("Encrypted Invite SecureParameters: " + encryptedInvite);
		System.out.println("Encrypted Conversion SecureParameters: " + encryptedConversion);
		
	}
	
    public static byte[] encrypt(byte[] data, byte[] publicKeyData, byte[] privateKeyData, char[] passwd) throws Exception
    {
    	ByteArrayOutputStream baos = new ByteArrayOutputStream();
        OutputStream out = new ArmoredOutputStream(baos);
 	    PGPPublicKey publicKey = null;
        InputStream inputStream = org.bouncycastle.openpgp.PGPUtil.getDecoderStream(new ByteArrayInputStream(publicKeyData));
        PGPPublicKeyRingCollection pgpPub = new PGPPublicKeyRingCollection(inputStream);
        OUTER1: for (Iterator i=pgpPub.getKeyRings(); i.hasNext();){
     	   for(Iterator j=((PGPPublicKeyRing)i.next()).getPublicKeys(); j.hasNext(); ){
         	   PGPPublicKey k = (PGPPublicKey) j.next();
         	   if(k.isEncryptionKey()) {
         		   publicKey = k;
         		   break OUTER1;
         	   }
     	   }
        }
        if(publicKey == null) throw new Exception("Can't find encryption key in key ring.");
        PGPSecretKeyRingCollection pgpSec = new PGPSecretKeyRingCollection(org.bouncycastle.openpgp.PGPUtil.getDecoderStream(new ByteArrayInputStream(privateKeyData)));
        PGPPrivateKey privateKey = null;
        PGPSecretKey secretKey = null;
        OUTER2: for(Iterator i=pgpSec.getKeyRings(); i.hasNext();){
        	PGPSecretKeyRing keyRing = (PGPSecretKeyRing) i.next();
        	for(Iterator j=keyRing.getSecretKeys(); j.hasNext();){
        		secretKey = (PGPSecretKey) j.next();
        		privateKey = secretKey.extractPrivateKey(new BcPBESecretKeyDecryptorBuilder(new BcPGPDigestCalculatorProvider()).build(passwd));
        		break OUTER2;
        	}
        }
        if(secretKey == null) throw new Exception("Can't find signature key in key ring.");
        
        ByteArrayOutputStream cb = new ByteArrayOutputStream();
        PGPCompressedDataGenerator compressedGenerator = new PGPCompressedDataGenerator(PGPCompressedData.ZIP);
        OutputStream compressedOut = compressedGenerator.open(cb);
        PGPSignatureGenerator signatureGenerator = new PGPSignatureGenerator(new BcPGPContentSignerBuilder(secretKey.getPublicKey().getAlgorithm(), HashAlgorithmTags.SHA512));
        signatureGenerator.init(PGPSignature.BINARY_DOCUMENT, privateKey);
        for(Iterator i=secretKey.getPublicKey().getUserIDs(); i.hasNext();){
            PGPSignatureSubpacketGenerator spGen = new PGPSignatureSubpacketGenerator();
            spGen.setSignerUserID(false, (String) i.next());
            signatureGenerator.setHashedSubpackets(spGen.generate());
        }
        signatureGenerator.generateOnePassVersion(true).encode(compressedOut);
        PGPLiteralDataGenerator lgen = new PGPLiteralDataGenerator();
        OutputStream finalOut = lgen.open(compressedOut, PGPLiteralData.BINARY, "", new Date(), new byte[4096]);
        finalOut.write(data);
        signatureGenerator.update(data);
        finalOut.close();
        lgen.close();
        signatureGenerator.generate().encode(compressedOut);
        compressedGenerator.close();
        compressedOut.close();
        
        byte[] compressedData = cb.toByteArray();
        PGPEncryptedDataGenerator encryptedDataGenerator = new PGPEncryptedDataGenerator(new BcPGPDataEncryptorBuilder(PGPEncryptedData.AES_256).setWithIntegrityPacket(true).setSecureRandom(new SecureRandom()));
        encryptedDataGenerator.addMethod(new BcPublicKeyKeyEncryptionMethodGenerator(publicKey));
        OutputStream encryptedOut = encryptedDataGenerator.open(out, compressedData.length);
        encryptedOut.write(compressedData);
        encryptedOut.close();
        encryptedDataGenerator.close();
        out.close();
        
    	return baos.toByteArray();
    }
	
}

Java HMAC-SHA512

import java.net.URLEncoder;

import javax.crypto.Mac;
import javax.crypto.spec.SecretKeySpec;

public class SHA512Util {

	public static void main(String[] args) throws Exception {
		Long chatButtonID = 58444531713309044L;
		Long floatingChatButtonID = 660128588754890L;
		Long expiration = System.currentTimeMillis();

		String url = "http://boldchat.com";
		String referrer = "http://google.com";
		String chatKey = "Something unique to chat " + expiration;
		String visitorKey = "something unique to customer";
		String appendData = "&ChatKey=" + chatKey + "&VisitorKey=" + visitorKey + "&Expiration=" + expiration;
		String customData = "&CustomURL=http://boldchat.com&VisitRef=a ref&VisitInfo=info&VisitEmail=email@gmail.com&VisitPhone=3166704000&URL=" + URLEncoder.encode(url, "UTF-8") + "&ReferrerURL=" + URLEncoder.encode(referrer, "UTF-8");

		String chat = "ChatButtonDefID=" + chatButtonID + customData + appendData;
		String invite = "FloatingChatButtonDefID=" + floatingChatButtonID + "&InvitationDefID=2076721744768832302&VisitName=floating" + customData + appendData;
		String conversion = "ConversionCodeID=33221100&ConversionAmount=100.0&ConversionInfo=conversion info" + appendData;

		String hashKey = "uWalJOJ8sOqcVuobDSwBIr7+KofZAq0K9/b0h/JviTYFqjpS/d0uIeewf/kgQLEM";

		String hashedChat = appendHash(chat, hashKey);
		String hashedInvite = appendHash(invite, hashKey);
		String hashedConversion = appendHash(conversion, hashKey);

		System.out.println("Hashed Chat SecureParameters: " + hashedChat);
		System.out.println("Hashed Invite SecureParameters: " + hashedInvite);
		System.out.println("Hashed Conversion SecureParameters: " + hashedConversion);
	}

	final protected static String HMAC_SHA512 = "HmacSHA512";

	public static String appendHash(String data, String hash) throws Exception {
		SecretKeySpec keySpec = new SecretKeySpec(hash.getBytes("UTF-8"), HMAC_SHA512);
		Mac hmac = Mac.getInstance(HMAC_SHA512);
		hmac.init(keySpec);
		byte[] hashBytes = hmac.doFinal(data.getBytes("UTF-8"));
		String hashText = bytesToHex(hashBytes);
		return hashText + data;
	}

	final protected static char[] hexArray = "0123456789ABCDEF".toCharArray();

	public static String bytesToHex(byte[] bytes) {
		char[] hexChars = new char[bytes.length * 2];
		for(int j = 0; j < bytes.length; j++) {
			int v = bytes[j] & 0xFF;
			hexChars[j * 2] = hexArray[v >>> 4];
			hexChars[j * 2 + 1] = hexArray[v & 0x0F];
		}
		return new String(hexChars);
	}
}

C# PGP

using System;
using System.Collections;
using System.Linq;
using System.Text;
using System.IO;
using System.Security.Cryptography;
using Org.BouncyCastle.Bcpg;
using Org.BouncyCastle.Bcpg.OpenPgp;
class PgpUtil
{
	static void Main(string[] args)
	{
		long accountID = 2307475884L;
		long websiteID = 665123557559499L;
		long chatButtonID = 58444531713309044L;
		long floatingChatButtonID = 660128588754890L;
	
		long expiration = (long)((DateTime.Now - DateTime.Parse("1/1/1970 0:0:0 GMT", System.Globalization.DateTimeFormatInfo.InvariantInfo, System.Globalization.DateTimeStyles.None).ToUniversalTime()).TotalMilliseconds + 30000);
		string url = "http://boldchat.com";
		string referrer = "http://google.com";
		string chatKey = "Something unique to chat";
		string visitorKey = "something unique to customer";
		string appendData = "&ChatKey=" + chatKey + "&VisitorKey=" + visitorKey + "&Expiration=" + expiration;
		string customData = "&CustomURL=http://boldchat.com&VisitRef=a ref&VisitInfo=info&VisitEmail=email@gmail.com&VisitPhone=3166704000&URL="
			+ Uri.EscapeUriString(url) + "&ReferrerURL=" + Uri.EscapeUriString(referrer);
		
		string chat = "ChatButtonDefID=" + chatButtonID + customData + appendData;
		string invite = "FloatingChatButtonDefID=" + floatingChatButtonID + "&InvitationDefID=2076721744768832302&VisitName=floating" + customData + appendData;
		string conversion = "ConversionCodeID=33221100&ConversionAmount=100.0&ConversionInfo=conversion info" + appendData;
		
		byte[] encryptionKey = Encoding.UTF8.GetBytes("-----BEGIN PGP PUBLIC KEY BLOCK-----\r\nVersion: BCPG v1.50\r\n\r\nmQENBFNnvrgDCACe2sn+PAHxG/fhfHgFNu4ClODlvrduchKS49AsILEsgB+ie1Yf\r\n3gz1j2JrIcwsEg1AAVPOHJvoXBjLJMoA0TfJbtVXP9S/9Q6XGuQgtOb/HVP5mDTZ\r\nwEGDQH5l6Oxob/xWBD8SAjlQoHzPwEsJMigZiFdQMDCUMIlpcSje3Om2ZGhZ7Qc0\r\ncw0PgR9Wk3NWzX38RqMkxlL+l2UPHvRU3e3nPEDvJSbFORzsd7H/D6iAOG//fd0j\r\nU+dM+vZ7AI4XncFI/OcHxUPISEZK6whg0DjaOMGONZD3bO2RtaeOL+5DD+DMRscW\r\nlYwrGjA4PTQQ+Ba2fyaG73FEUlRdcdwmhmXbABEBAAG0CGJvbGRjaGF0iQE3BBAD\r\nCgAhBQJTZ765AhsDBAsJCAcGFQoIAgkLBAsJCAcGFQoIAgkLAAoJECe+KX41fF/C\r\nO/kIAIEfLLyT9v9vyzgqpuaBh6l+6db0nKmaXB9wlYMWVtCPJ4XtG3paJXuuNbjw\r\nq5R0P+zwa2j5jDhkOHYasAxRvevxuIHjnkU/UIUshJRsFANGQ8d+vZdF9yRLneKB\r\n933svbm9XT/dQtzGVFpP0IgdI8TVmxmzc+2n69AM4u8ScmyBvX9m1cRYEuS9v4tS\r\n13AAp/xgOg4qujno1tc158jOsGE27IxZXyCco2EwJVkz2ms4e0I/4LNOOaqWRvOF\r\n7Nxnj06zfT0Reg4ILk2ERNfG/qVpOwUuYvYc7mCvhJ8UBtHw50v9K01k9/RC61Mf\r\nrjFvV5ynRX259HTeqJl9h+hNeHy5AQ0EU2e+uQEIALVukl/lfWWgyi0ThGoiWwGy\r\nVnunONHiby7CAz6gDtlGdgv1za6IB5RqVbgrGNfDYHyH8gHovXw69tMUA/1ux0YS\r\nC9wE3sXY9iDkdpQMPPobtoQhkPtDm4kEYVb/MYKapdgWxfXA/HOra4br21xiY5zS\r\nCJ1dDMu71uL2xLFtZvDMZjAxVLrbuY/QODfNro6hKiwJZ5X7PnHzJ7VVowlhYq0v\r\n7f61stNC2EGKsjOSUlr22Iw0k6H055xfwLWMrOBcE8Bqqd3GsAD7QypINSSrgSdV\r\n4ebYDRzD41O2elrfElGAB4yhqwLEVYOZ4JuZxJ1q2kpPxZjmjyxfPv7tox7dgxUA\r\nEQEAAYkBHwQYAwoACQUCU2e+uQIbDAAKCRAnvil+NXxfwtUbB/4pmdAV7COUoXdC\r\nNlTj3cpxSxtV0iBdxjneJaNBiR7JIuL/3uoD7bMMMxpXDs5L9s1CLRLUMNarK8pj\r\nkwi3pVhET19r/6I8rEt+V4ddxODjggO6zuc5vMki8tlufna4cyhAyvbGPIZ0C/b0\r\nqGYNnDqactBpzuqT9QjMfUQSMt7acAZIBqK0UvCCwPsuNFz4HFPGoqW3BWmCN7CC\r\nVOCKwecCNCj0Y9SJdOZP8mvXubSeb3inWGuONLpuBF2ciIQCkRO2DtGwEMbdbyoY\r\nZUkdI7Rk793tfLd4mqT/BfikQo0Uyc8yYYbBkr6lPTT8J0mYyFL7SOkf10XoJ+ap\r\n7cLZwjou\r\n=pD7x\r\n-----END PGP PUBLIC KEY BLOCK-----\r\n");
		byte[] signingKey = Encoding.UTF8.GetBytes("-----BEGIN PGP PRIVATE KEY BLOCK-----\r\nVersion: BCPG v1.50\r\n\r\nlQPGBFNnvvYDCACOeYaG9ugbRPHpe9P8GWdPFH/kpQlfFM1JVQNnCSC4OWkZhDbu\r\nUuAxWj7XaFWOsctnnjx1DYZ8EE54q1eI2j62KErqM58ZCZpChQ2Xh1L8lvmWPdbU\r\nTdWzjekfVaLGObyydl+LYRepjbrsWT/r2/nDcmJSvjesbwWZkfWH5AxXc0ngHbG0\r\nsnOVMtZBSGSj9AnRTJhcr6GIMh8DevG93NVLHu45nfXHOVkTx6oTlrq7LfYzoRAh\r\nBPu1ydbclbeNXsOJbPlxaEAjPwXsoRMa6xaNb4UHCaJX/7kyU2QeuJGJwk7sU09M\r\n/FADAo31A4dS58unr3RrxNaL4tVJ5jEJECojABEBAAH+CQMCW7scittNNYVgpaZ1\r\ngOyt59uRf4YcTUxq0j8NLqFNRo7kC8j/W/upd3i9OJM+95Bsf+Glr5tgKcnuP8SG\r\nCP8eTNyIUckhTJmUpDY0MRUS1yvOBqp+MpfIxrGZ2pP/fgcW1SUjx5f7kQ2pTJOQ\r\nbbQLeQHIPOJbCa0YbAWYmSES5XQCmZSZLvg9JZ1mptzCaPswyzUAViNQt6tTF8kO\r\nceX1rdAoMSzLoETfmPA6Jb4GdQUO/bJARIH0NqhGiZqanYpn6e8GNeqF/9P2fceH\r\n+VvRVlGa8kq0QSFD/fONmW2O67lxfI7A8tEIqj6I+IimsDNhf7c56eIo779ebHmX\r\nhbWlOTDdbPqskuTZTH58r+2gI+ayzxGQecQWk2KzxO4akhMCUyLZw3cAm2qeIXmo\r\nI8sAUwaPrjXtS9QSoqXzruoIcNIwUFk/G/mGMlkrOoAdP83Pw3qM3MmmcnBQoHRA\r\nDmDEZZtzlEyQUO8CR56HevyzibHRXuBJ6gLNDgWmu8ZbP1bUloC3GoXdkf43fQ4I\r\n+ZBEsjNr2QwLclcavZaKX0O6OUsxnCpt8QbkGEJyLUwT0lTomqpQRyHi96UnvpNb\r\n3j9iRtW82lT6nzP1PLpG47OoYoKr8ZjhmLJ2rMwHBkZoMFOeRqnQDdXScGNIb4IK\r\n3L8AWmtxa0obMpJC5CCaIZeQ9QW8mMVvGL7SShvDoVM

Manage incoming chats according to rules (Chat Rules Engine)

You can use Chat Rules to evaluate incoming chats and route them to departments, move them to a folder, assign them attributes such as category or status, or assign them an urgency to determine which queued chats are assigned first.

A single rule may contain multiple actions, which are applied to every incoming chat before Automatic Distribution could route a chat. When a chat is received, Digital DX runs the rules one by one - in the order that you define - and checks whether the incoming chat matches the criteria defined in the chat rule. If there is a match, the chat is routed according to the actions defined in the rule. Otherwise, Bold360 checks the chat against the next rule that you have defined. When none of the rules match the chat, then Automatic Distribution routes the customer to an agent or department.

Chat routing rules are also applied when the Apply to department transfers (all services) option is enabled on the General Transfer Rules page and chats are routed to a new department.

How does it work?
Important: You must have Account settings > Setup Rules Engines permission to manage your chat rules.
  1. Create or edit a Chat Rule as follows:
    1. In the Web Admin Center, click Channels > Chat > Routing Rules.
    2. On the Routing Rules for Chat page, select an existing rule or click Create New.

    Result: The Edit/New Routing Rule for Chat page is displayed.

  2. Name the rule.

    Rules are displayed in the rules list by Rule Name. Each rule should have a unique name for easy identification.

  3. Set criteria.

    The rules engine compares the properties of incoming chats against the criteria and performs the rule's action when there is a match.

    • Initial Question Contains: Apply the rule to chats with a pre-chat form where the customer input for the Initial Question field contains the defined expressions.
    • Chat Window: Apply the rule to chats originating from the selected custom chat window definition.
    • Website: Apply the rule to chats that originate from a source associated with the selected Website definition.
    • Departments: Apply the rule to chats that originate from a source associated with the selected Department definition.
    • Language: Apply the rule to chats associated with the selected language, as detected from the customer's language settings or as set on the Custom Chat Window (pre-chat form).
    • Mobility. To apply the rule to chats originating from all devices, select both Desktop/Laptop Visitor and Mobile Visitor.
    • Auto Answers: Apply the rule to work items according to the following sub-criteria.
      • First Question Contains: Customer's first question contains the defined expressions
      • Last Question Contains: Customer's last question contains the defined expressions
      • Any Question Contains: Any of the customer's questions contains the defined expressions
      • Shown Canned Message: Message included in the customer's query results
      • Clicked Canned Message: Customer clicked the message
      • Last Clicked Canned Message: Customer clicked the message last
      • Rated Positive Canned Message: Customer rated the message up
      • Rated Negative Canned Message: Customer rated the message down

    Can you select multiple criteria? Yes. Multiple selections within a criterion are evaluated according to OR condition logic, while selections across criteria are evaluated according to AND condition logic. For example, when you select multiple languages, then the routing rule would run on matching any of those languages (OR condition logic). However, when you define a website, a chat window, and a language, then the routing rule would only run on matching all of those criteria (AND condition logic).

  4. To route a chat when criteria are met, choose the following actions:
    • Folder: Send a chat to a specific chat folder.
    • Department: Make the chat available to members of a specific department.
    • Urgency: Route queued chats according to urgency:
      Note:
      • Incoming items with a higher urgency setting will be distributed before those with a lower setting.
      • When urgency is the same for multiple items in the queue, agents will receive the next item from the department for which they have the highest priority.
      • By default, department-level urgency prevails over chat rule urgency
      • No Change indicates the rule will not change the urgency of the item.
    • Difficulty: Affects the concurrent chat limit.
      Note:
      • Chats are assigned the default difficulty factor of 1 when difficulty-based routing is not set.
      • Department-level difficulty prevails over chat rule difficulty.
  5. To assign attributes to a chat when additional criteria are met, choose the following actions:
    • Category
    • Status
    • Custom Field 1 or 2

    Result: These attributes are shown to agents as values in columns on the chat panel. Agents can use the information to make decisions about how to handle or organize chats.

  6. Save the rule.
  7. Continue to create rules.
  8. Drag and drop rules to arrange them in the order they should be evaluated.
    Important: Rules are evaluated in the order they appear in the rules list.
Chat Rules are applied to your entire Digital DX account.

What are best practices for routing rules?

Routing rules are very flexible and are often under-utilized; however, our best practice recommendation is to enable both folders and routing rules. Customers should have a folder for each department and use routing rules to route chats, emails, and messages accordingly.

Workflows with email management rules can be set to auto-respond with canned messages and close the email thread out with the same rule to help provide a faster response to the customer and keeping the queues cleared out for more accurate SLA reporting.

Routing rules help automate actions based on certain conditions. While this is commonly used to assign a work item to a specific department, this can also help set for example category and status labels automatically, which can help reduce the agent's wrap-up handle time.

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 button setup

Configure the settings associated with the button or text that customers click to initiate chat.

Note: To understand the relationship between a website, a chat window, and a chat button, consider the following:
In Bold360, a website is a group of settings that helps you manage your Bold360 strategy across multiple sites or domains. Websites help you track the origin of visits and manage business hours. When used with the Chat Rule Engine, they help you manage incoming chat items.
The website also contains the code of a "chat button", which does not only refer to a simple button on the user interface that a customer clicks, but also a complex group of settings associated with that button. These settings include button images, position, animation, associated departments, the countries where the button is displayed and so on.
When the customer clicks the chat button, a chat window opens, which again is not only a simple window on the user interface, but also a complex group of settings that control the layout and content of that window.
To interact with customers, first you have to set up a website and then a chat window. Subsequently, create a chat button and associate that button with the chat window and the website.

It is important to understand that "chat button" does not refer to a simple button (as in the actual interface a customer clicks), but rather a complex group of settings associated with an actual button, buttons, or string of text:

  • The actual button images shown when agents are available or unavailable
  • The position of floating button images on your page
  • Animation settings for floating button images, including resize when not in focus
  • The chat window customers are shown when they click the button
  • The department associated with the button
  • The countries where the button will be displayed

The following additional settings help determine when your chat button is shown to customers:

  • Agent availability (including agent hours)
  • Website business hours
  • Department business hours
  • Automatic Distribution settings (queue limits)

What are best practices for setting up chat buttons?

  • In addition to a floating button, you should also have static chat buttons prominent in header and footer.
  • ?????Ensure all parameters are defined when generating the button HTML code (website, department when necessary, window as well as the Pass custom information about customer option enabled).
  • Easy for customers to find answers or help
  • Easy access makes for a positive customer experience
  • Allows for customizing the initial button that customers will interact with.
  • Ensuring that parameters are set up from the beginning will ensure easier, more flexible, and more sustainable management in the future. If any of these parameters need to be added or changed down the line, it will require re-deployment of the code, adding risks and delays.

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.