Genesys DX
Genesys Communities

NET Chats Articles

How to show an email form when no operators are available

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

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

    Result: The New Custom Chat Window is displayed.

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

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

  4. Save your changes.

How to add a chat button to an Outlook email footer

To add a button to your email signature that users click to initiate a chat session, you simply generate the appropriate chat button code and associate it with your Outlook signature.

  1. From the main menu of the operator client, go to Setup > HTML > Generate Chat Button HTML.

    Result: The Generate Chat Button HTML window is displayed.

  2. On the Generate Chat Button HTML window under Type of Chat Button, select Email Signature Chat Button.
  3. In the email signature field, enter the signature that you want your customers to see.
  4. Under Customize Chat Button Images, select the button that users will click to initiate a chat session from your email signature.
  5. Under Email Signature, choose a signature to which the chat button will be appended.
    • Option. Type a new signature directly in the space provided.
    • Option. Click Open to select an existing email signature. The Open file... dialog is displayed with the path: C:\Users\*username*\AppData\Roaming\Microsoft\Signatures. Select a signature and click Open.
  6. On the Generate Chat Button HTML window, click Save.

    Result: The chat button is added to your email signature.

How to email a chat transcript

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

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

    Result:

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

How to associate canned messages with a chat window

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

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

    Result: The New Custom Chat Window is displayed.

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

How to set up canned messages

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

For each technology, canned messages are stored and managed in their respective area.

  • Chat: Setup > Account Setup > Chats > Chat Canned Messages.
  • Email: Setup > Account Setup > Emails > Email Canned Messages.
  • SMS and Facebook Messenger: Setup > Account Setup > Messaging > Canned Messages.
  • Twitter: Setup > Account Setup > Twitter > Tweet Canned Messages.

Operators with proper permission can create and manage canned messages at Setup > My Canned Messages Setup.

Note: Chat Canned Messages can also be managed via API. See Auto Answers: Visitor self-service for details.
Related Articles

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

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

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

    Result: The New Custom Chat Window is displayed.

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

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

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

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

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

How to present a post-chat survey to visitors

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

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

    Result: The New Custom Chat Window is displayed.

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

    Result:

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

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

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

    Result: The New Custom Chat Window is displayed.

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

How to set a chat link as a chat entry point

Set a text-based link that a visitor clicks to initiate a chat session.

When implementing chat, your visitors need something to click in order to start a chat session. The term chat entry point refers to the interface element that a visitor clicks to initiate a chat. You set a chat entry point as part of the procedure of generating and inserting an HTML snippet to your site.

  1. From the main menu of the operator client, go to Setup > HTML > Generate Chat Button HTML.

    Result: The Generate Chat Button HTML window is displayed.

  2. On the Generate Chat Button HTML window, at the top of the window under Type of Chat Button, select Web Page Chat Button Text.
  3. Under Customize Chat Window, associate the link with a Chat Window definition.

    A Chat Window definition controls the look and feel and advanced behavior of the interface that is opened when a visitor clicks your link.

  4. Option. Associate your HTML snippet with a Department definition.

    See About the BoldChat 'Department' entity.

  5. Associate your HTML with a Website definition.

    See How to use Website definitions to manage multiple sites.

  6. Option. Pass customer visitor information into the chat session.

    See Custom Visitor Info, Variables: Collecting visitor data.

  7. Copy and paste the code to your site. See Generate and insert HTML to your website.
Related Articles

How to create canned messages for operators

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

  1. Choose the technology for which you want to create or edit a canned message:
    • Chat: Setup > Account Setup > Chats > Chat Canned Messages
    • Email: Setup > Account Setup > Emails > Email Canned Messages (Premier or Enterprise subscription required)
    • SMS: Setup > Account Setup > SMS > SMS Canned Messages (Premier or Enterprise subscription required)
    • Twitter: Setup > Account Setup > Twitter > Twitter Canned Messages (Premier or Enterprise subscription required)
  2. Create, edit, or copy a canned message:
    1. Go to the top of the Account Setup ? Canned Message Folder window and click New, Copy, or Edit.
  3. Name and identify the message so operators can find it with ease:
    1. Fill in the Name field. This value is only used internally to identify and reference the canned message, and it is never exposed to visitors
    2. Option. Fill in the Subject field. This is only shown to visitors under certain circumstances, such as Auto Answers' labels.
    3. Option. Associate Keywords with the canned message. BoldChat indexes and searches these words and phrases to help identify canned messages that may be relevant to a chat session.
  4. Option. Set an Access Key, which is a keyboard shortcut that inserts the canned message into an active chat.

    Conflicts can occur when a particular key combination is registered to other applications on your local machine. Operators should check key availability by clicking Check.

  5. Set the message's Language.

    This value acts as a filter to ensure that operators see only messages matching the visitor's language. When no value is specified, no filter is applied and the message is displayed to all operators as <Not specified>.

    Result: For example, when an Italian speaking visitor starts a chat, the operator sees Italian canned messages plus those messages with no language value.

    Tip: Subject , Keywords , and the message body should all be written in the same language.
    Note: If you are using the Auto Answers feature, the Language setting also determines which messages appear to visitors in Auto Answers.
  6. Type and format the message.
    • Messages are stored in HTML format and can be edited as HTML source as well.
    • Mark certain phrases or words as not translatable to prevent them from being translated when auto-translation is enabled.
    • You can also insert variables in the ${variable_name} format. For example, use the variable ${login.ChatName} to insert the operator's chat name into the canned message. Available variables:
      • ${chat.ChatUrl} - The URL of the chat from where the visitor started the chat session
      • ${chat.ChatName} - The name of the visitor 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 visitor.
      • ${chat.IsStarted} - Displays whether the chat was started
      • ${chat.Started} - Displays the date and time when the chat started
      • ${chat.IsAnswered} - Displays whether the chat was answered
      • ${chat.Answered} - Displays the date and time when the chat was first answered
      • ${chat.IsEnded} - Displays whether the chat is started
      • ${chat.Ended} - Displays the date and time when the chat ended
      • ${chat.CountryCode} - The two-digit code of the country where the visitor started the conversation
      • ${chat.RegionCode} - The region or ZIP code of the country where the visitor started the conversation
      • ${chat.City} - The city where the visitor started the conversation
      • ${chat.VisitEmailAddress} - Email address of the visitor as provided on the pre-chat form
      • ${chat.VisitPhone} Phone number of the visitor 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.

    Result: The list of canned messages for an operator is filtered down to those canned messages that match the visitor's language. For example, when an Italian speaking visitor starts a chat, the operator sees Italian canned messages plus any canned message where the language is unknown <Not Specified>.

  7. Save your changes.

    Result: The canned message is made available to be used in response to incoming communications for the chosen technology (Chat, Email, SMS, or Twitter).

To arrange canned messages in folders, right click the root folder and click New Folder. Once you have folders, you can drag and drop messages between folders.

Remember: Messages intended to be used with Auto Answers must be organized in folders. See Auto Answers: Visitor self-service for details.
Related Articles

How to integrate Google Analytics with BoldChat

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:

See the WebStorage article on Wikipedia for details.

Note: For information about Google Analytics and data residency, see Data Residency Options.

Prerequisites

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

Tip: Streamline code snippet delivery via Google Tag Manager.

Code locations in BoldChat for Task One, Task Two and Task Three.

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.

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);
}
Tip: Looking for a quick solution? Download the full code attached to this article (chatframejs.txt).

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. 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});
    Tip: Looking for a quick solution? Download the full code attached to this article (chatwindowjs.txt).
  2. 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"
	}
  3. 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)
}
  4. 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, BoldChat 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 BoldChat on the hosting website page, the following error is thrown in the browser console, if available:


  • Unfortunately, there is no built-in way to add alt-tags to chat buttons for either BoldChat or Bold360. 
    • The feature has been requested before, but there is no ETA at this time. 
 
  • If the customer wants to include the same functionality, they can use the Web Page Chat Button Text option when generating HTML: 

User-added image

Data validation code samples

Sample Code ? Static Chat Button

<!-- BoldChat Live Chat Button HTML v5.00 (Type=Web,ChatButton=7.1 T,Website=Trenton  -->
<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){ 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 -->

Sample Code ? Text Chat Button

<!-- BoldChat Live Chat Button HTML v5.00 (Type=HTML,ChatWindow=7.1 T,Department=Billing,Website=Trenton 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){ 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 - Visitor Monitoring and Floating Chat Button

<!-- BoldChat Visitor Monitor HTML v5.00 (Website=Trenton ,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){ 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 Visitor Monitor HTML v5.00 -->

Sample Code ? Conversion Code

<!-- BoldChat Conversion Tracking HTML v5.00 (Website=Trenton ,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.

In the PGP examples that follow, the encryptionKey variable contains the public PGP key of the server, which is found in the Website setup. The signingKey variable contains your private PGP key.

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 visitor";
		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\n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\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 SHA-512

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 visitor";
		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 visitor";
		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\n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\r\nh1r8t6jBiQEfBBgDCgAJBQJT

How to protect visitor data (Data Obfuscation)

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

    Result: The New Custom Chat Window is displayed.

  2. On the Chat Messages tab, select Conceal Sensitive Information.
    Option Description
    When to Conceal
    • Select When the chat closes to allow data to be seen during chat, but then hidden after close.
    • Select Immediately, but the operator assigned... to allow only the assigned operator to see the information.
    • Select Immediately, and no one... to hide the information from everyone.
    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
  3. Save your changes.

How to set up timeout for unanswered chats

You can define the maximum period of waiting time for your customers before telling them that none of your agents is free to chat.

  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, select Timeout under Unanswered by agent.
  3. Enter the time in seconds after which customers waiting in line see the "Unavailable - Default" message. You can change this message on the Customization tab of your chat window configuration.
  4. Save your changes.
Related Articles

How to validate Chats, Visits and Conversions (Data Validation)

Enterprise subscribers can set Digital DX to validate all chats, visits, and conversions. Use this feature to ensure that incoming chats originate from the Website associated with the chat button and that chat and visit parameters provided by the visitor cannot be viewed or modified by any third party. When visitor monitoring and/or conversion tracking is enabled, this feature also ensures that the visit/conversion data originates from the website with the monitoring/conversion HTML code.

Setup

Data validation is set for a Website definition.

Fastpath: From the main menu of the Digital DX Desktop Client, go to Setup > Account Setup > General > Websites > New/Edit > Data validation tab > Enable data validation

When enabled and required, all chat, visit, or conversion data must be validated as originating from your server before reaching an operator.

By selecting the All HTML must be associated with a Website definition option in General Account > Settings > Extra Security, and ensuring that all Website definitions require validation, every chat assigned to an agent of the account is guaranteed to be validated.

Note: An Enterprise subscription is required.

Data Validation Methods:

  • PGP: The data passed to Digital DX can be PGP encrypted using our public key and signed with your private key to completely hide the parameters passed into chat
  • SHA-512: The visitor can be disallowed from tampering with the data passed to Digital DX by generating a hash of the data using a private hashing key

Both methods rely on a new parameter in the HTML: SecureParameters. This replaces custom variable parameters such as VisitRef and VisitInfo. Any visit, chat or conversion related data when validation is enabled that are not passed into the SecureParameters variable will be ignored by the server. Additionally, if security fails, the chat, visit or conversion will fail as well.

Important: You must define the SecureParameters variable for both the chat and visit types to have proper encryption.

For browsers with JavaScript disabled, Digital DX loads an image inside the noscript tag to register the visit/conversion. In this case, use the parameter secured to pass the secured parameters.

PGP Encryption

Passed parameters should be URL-form encoded into a single string (for example, VisitName=Robert%20Smith&VisitEmail=r.smith%40gmail.com). This is what you will PGP encrypt, sign and pass as the SecureParameters variable. The final string passed in as the SecureParameters variable will look like this:

"-----BEGIN PGP MESSAGE-----\nVersion: BCPG v1.50\n\nhQEMA9/66abKVXSZAQf/UT+3OtVApwD0H+Fv2S5bXqMfkvHEQgbvXLwMiLPRy2gs\nv3L4EbMGMoIjt8Leg1D/M8bgbovYEs546LwXdAcOQt/n4c2+9WB8mph9lDW4+z9U\n5eWwwDjatrF8yKvpVM+g0+y8SEtuuBr2xrNfXBaCXRSyEN/88tl7drvIjzAg5lUV\nuPMtDvLnE9bAhu02FQx04Dc0lKGDROPlXCp/6tW6rXRmdvZfPRe4GDCzkHoZVOGR\nByNMD1swSIWC60IL5so4wWvmOqgP/fU57W2QNz7wmF9RtSG+L8zdhYX0BKdQAOVL\nKzhRtoMbBpNcT1m0prFhw40sfGDcVnPLJhD4RvLv79LBpwE2HeW3LNm6ZH45ou1A\nmIzik8ZGExDVLY4N9tax6goP1tYXTOq2Zc/XuwIQHhXMdEZaxeLppsjt1cOym/BV\n/2y8uPO8DPQa4jTXDPOsmLJpzAJMnk3EhMMaDDzOIS32i8IyY2sYPgd651ifXrO7\n38zCnPC6zMByBuwqvoT5xlELYE0KFRvm7fmYhYK2KHQrazneESRX0TnLrI3k6mSR\ndK/MSLVb5v6aNY6f/RySADE/XqhEJ8DVXRyN8Qum+vtl1PMGOothaFemT4bZbZ+8\nw7PKCZSFWqKcEZyk1eJl02V8u1VgmYkaya2vvLGFqTGxSVk6jALrPcIyCxW7z1XV\nVSwdraDtqMyJ6aAOkUEF5qidyupoajpyjxWRsaM5Al/VJOjR6u97fu9aSNtGNW73\nmmpqBh2MwbPvO5wWTadN3VLRowlkzNWIX0pdKvdA69fQ4NlGLra9bmH0ofjQuCl9\nNTRAqn5pbyb8aCyWtxMTtgxZwgNsdWMg0yYMLV+HdH3zVT6Bc+lExzOl5rxOXxbz\nQxj3Bqil615AQP2JIi4A6FQ0+Om1xNtm+t6eIFAR3GDYjaw+GgBv+r4mdXRfz/6I\nOQysntG1rMgCHjXg6B2y46PAp2tdVptJVcUhyz93m99MBT3nKtUmmb5sVHJRnmIg\nQjQv+3SKjVnMwncHveNXosBBeem2Vdrb+lVbI3eQ0XD/fEi43oQdl8hSNuqfw1jy\nDz4Gi2EaYyaDqrRMS6nEMaOujfD6zcPpbR8MSbmQTvmi5eOWPQZhopXrN2ogxtea\n5jUabllMN5PxGkXWBAhWG1hUVkYH8SMucQ==\n=/htM\n-----END PGP MESSAGE-----"

You can provide your public signing key on the New/Edit Website window. Digital DX uses it to generate a new server key in the back-end for encrypting the data and providing you a public key for encrypting the data. The server-side generated keys are 2048-bit, and we recommend you use the same key size for your signing key.

Data validation relies on asymmetrical cryptography: parameters are encrypted using your private key and the public key of the server. Digital DX decrypts parameters using its private server key and your public key.

For your first test, you can encrypt your data and pass it into the website setup data verification area. The server will decrypt it, verify the signature, and return the plain-text data or any error messages encountered.

SHA-512 Hashing

The most secure method of validating chats is the full PGP encryption. However, for ease of implementation, we also support the SHA-512 hashing algorithm.

The parameters you want to pass should be URL-form encoded into a single string (for example, VisitName=Robert%20Smith&VisitEmail=r.smith%40gmail.com). The private hashing key will be concatenated in front of this value, and then hashed using the SHA-512 algorithm. The hashed value should then be hex-encoded and appended to the front of the SecureParameters variable. The final string passed in as the SecureParameters variable will look like this:

"1939D964B68EBFA61DE8C0B45D0C3C4836169C87DAB362116474A3B67B113B65F0172D3FA3191EC3525DA3E50B11A09B00B0A2869A1585EF148420347DE17A9EVisitName=Robert%20Smith&VisitEmail=r.smith%40gmail.com"

On the New/Edit Website window, you can create and delete the private hashing keys used to validate the visitor data.

For your first test, you can hash the key and data to append the data to the hash and pass it to the data verification area of the New/Edit Website window . The server will parse out and verify the hash, returning plain-text data or any error messages.

Parameters

Once validation is enabled, you can use both original parameter names ("vr", "vn", etc.) and human-readable versions:

Friendly Name Original Meaning
URL url The current page of the visitor (also the chat launch url when a chat is launched)
ReferrerURL referrer The referring page of the visitor
VisitName vn The name of the visitor
VisitRef vr A reference value for the visitor
VisitInfo vi An information value for the visitor
VisitEmail ve The email address of the visitor
VisitPhone vp The phone number of the visitor
CustomURL curl The custom URL for the chat
VisitorIcon vicon The chat icon for the visitor
OperatorIcon oicon The default chat icon for the operator
LastName ln The last name of the visitor
FirstName vn The first name of the visitor (synonymous with VisitName)
InitialQuestion iq The initial question for the visitor in chat
ConversionRef cr The conversion reference value for the conversion (must be unique per conversion code)
ConversionInfo ci An information value for the conversion
ConversionAmount ca The amount of the conversion (should be a number simply as 1000.15 for one thousand and fifteen one hundredths)
LanguageCode lc The language code for the chat
customField_[name]   Value of the custom field with the given name

Additional fields that require validation:

Friendly Name Original Meaning
ChatButtonID cbdid The ID of the chat button used to launch the request (which will additionally set the department and chat window if not overridden with another parameter)
FloatingChatButtonID cbdid The ID of the floating chat button used to launch the request (synonymous with ChatButtonDefID)
ChatWindowID cwdid The ID of the chat window to show to the visitor in chat
DepartmentID rdid The ID of the department to which the chat should be assigned
OperatorID roid The ID of the operator to whom the chat should be assigned
ConversionCodeID ccid The ID of the conversion code
InvitationID idid The ID of the associated Auto-Invite Ruleset

Finally, there are several validation-related fields for enhancing chat functionality once the chat is validated:

Friendly Name Original Meaning
Type type The type of the request to enforce. Chat, visit, or conversion. Recommended on all requests.
Expiration expires The time when the request should no longer be considered valid. Recommended on all requests. Counted in milliseconds from midnight 1970-01-01 UTC.
Note: The expiration should allow for a realistic duration of a session, and not too short.
ChatKey ck A unique identifier for this chat request. Repeated chat launches with this key will fail. Recommended on all chat-type requests.
Note: Assign this parameter to a session ID or similar to allow for launching more than a single validated chat during a session.
VisitorKey vk A unique identifier for this visitor. If an operator blocks the chat, it blocks any chat/visitor with this VisitorKey from re-launching chat.
Unsecured unsecured An & separated list of parameter names. These parameters when not present in the validated data can be pulled from the query string of the request normally and/or changed/populated without server validation. For example: VisitName&InitialQuestion&VisitPhone (note the & must be URI encoded to %26 when it is part of the secure parameter string.)

API Parameters

If you are using the chat API, the following parameters are required when the chat is created:

Friendly Name Original Meaning
APIKey APIKey The API key being used. This must match the API key passed in through the authentication header.
Data Data Pre-populated data passed into the chat. (Note: Individual fields must be listed in the 'Unsecured' parameter to not require validation.)

Troubleshooting and Error Messages

Do not modify the HTML code generated by Digital DX as it may result in receiving errors. When you click Generate HTML on the Channels > Chat Buttons > HTML page, copy the complete generated code as is into the HTML source of the website that visitors see. Improper setup can result in the following errors:

Chat Not Validated
You have not passed in the required validation. Either there is no validation, that is the encrypted message is blank, or the Type parameter is missing or incorrect. The Type parameter may be incorrect, for example, if it is set to visit before adding a floating chat button.
Error Validating Chat
You tried to validate the chat, but the hash/encryption process was unable to either decrypt or verify the information.
Validated chat launch has expired
You are passing in an Expiration timestamp that is in the past. Make sure of the following: Confirm that your server's clock is accurate; Confirm that you are passing in the time dynamically at chat launch; Confirm that you are providing a sufficient buffer so chats can't be launched after they expire.
Validated chat launch has already been used
You are passing in a ChatKey value that has already been used to launch a chat. Confirm that the chat key is unique per potential chat launch or is being dynamically generated at chat launch.

If visitor monitoring or conversion tracking is not being generated correctly, use the verification area of the New/Edit Website window to verify that the data has not expired and that type is set correctly.

HTML Code Structure

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 SHA-512, 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.
Related Articles

How to monitor visitors without displaying a chat button

Set your site to monitor visitor activity without displaying a chat button upon entry. Use this solution when you want to be able to invite visitors to chat manually or according to certain criteria.

With this solution the primary connection between BoldChat and your site is a snippet of code called Visitor Monitor HTML.

  1. Set the default Floating Chat Button to None.

    This ensures that no button is displayed to visitors upon entering a site with Visitor Monitoring HTML.

    1. From the main menu of the operator client, go to Setup > General Account Settings.
    2. On the General Account Settings window, under Default Floating Chat , click the X to set the value to None and save your changes.
  2. Generate Visitor Monitoring HTML, as follows:
    1. From the main menu of the operator client, go to Setup > HTML > Generate Floating Button / Visitor Monitor HTML
    2. On the Generate Visitor Monitor HTML window, under Floating Chat Button, click the X to set the value to None.
    3. Associate your HTML with a Website definition. See How to set up a Website definition.
    4. Option. Associate your HTML with an Auto-Invite Ruleset definition. See How to invite visitors to chat according to rules.
  3. Copy and paste the code to your site. See Generate and insert HTML to your website.
Remember: You must also implement an invitation strategy, otherwise you will be unable to invite visitors to chat. See Setting up Invitations.
Related Articles

Monitor visitors on a website

BoldChat?s Visitor Monitoring tracks visitors on your website in real time and provides detailed information.

  1. IP and Reverse IP: See the IP address and Reverse IP (host name) of each visitor.
  2. Entry URL Tracking: View the Entry URL of every visitor (useful to see which visitors came from ad campaign #1 vs. ad campaign #2).
  3. Proactive Invitations: Automatically invite visitors to chats based on customizable rules.
  4. Geo-Location: Enables showing the country, region, and city for any visitor on your website.
Important: In order to take advantage of these visitor monitoring features, Visitor Monitoring must be implemented throughout your site. Learn more in the Setup and Customization Guide.
Related Articles

Collecting visitor data with Custom Visitor Info and Variables

Gather information about visitors and pass it to BoldChat to help operators achieve business goals.

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

Chat Button Variables

Select the Pass Custom Visitor Information option when generating Chat Button HTML.

vr: visitor reference
Passes any desired information about a specific visitor. An initial value is not passed to this variable via the operator client.
vn: visitor name
Passes the visitor's name. This variable passes the value of the Name field from the pre-chat form.
vi: visitor information
Passes any desired information about a specific visitor. An initial value is not passed to this variable via the operator client.
ve: visitor 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: visitor 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 in the section highlighted below.

Values are passed when the visitor initiates a chat. Values are shown on the operator grid together with the incoming chat.

Variables within the Chat Button HTML code
Figure 1. Variables within the Chat Button HTML code

Visitor Monitoring Variables

Select the Pass Custom Visitor Information option when generating Visitor Monitoring HTML.

vr: visitor reference
Passes any desired information about a specific visitor. An initial value is not passed to this variable via the operator client.
vn: visitor name
Passes the visitor's name. This variable passes the value of the Name field from the pre-chat form.
vi: visitor information
Passes any desired information about a specific visitor. An initial value is not passed to this variable via the operator client.
ve: visitor 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: visitor 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 visitor?s current URL (the URL of the visitor's current page).
curl: custom URL
Pass a URL that differs from the page of origin (that is, do not pass the URL of the visitor's current page). This can be useful for identifying a URL or page that would normally be blocked due to business rules that prevents the page from being displayed because of dynamic or sensitive information.
Tip: When using Visitor Monitoring HTML on a site that requires registration, values can be passed once a visitor signs in to their account. Use the Data Validation feature when passing sensitive data. See How to validate Chats, Visits and Conversions (Data Validation).

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


Figure 2. Variables within the Visitor Monitoring HTML code
Variables within the Visitor Monitoring HTML code

Conversion Tracking Variables

Select the Pass Custom Conversion Information and Pass Custom Visitor Information options when generating Conversion Code HTML.

Important: When implementing Conversion Tracking, you must ensure that your Visitor Monitoring HTML, Conversion Tracking HTML, and Chat Button HTML are all associated with the same Website definition.
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 visitor. An initial value is not passed to this variable via the operator client.
vr: visitor reference
Passes any desired information about a specific visitor. An initial value is not passed to this variable via the operator client.
vn: visitor name
Passes the visitor's name. This variable passes the value of the Name field from the pre-chat form.
vi: visitor information
Passes any desired information about a specific visitor. An initial value is not passed to this variable via the operator client.
ve: visitor 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: visitor 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 Visitor 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 Visitor Monitoring code sets the custom variables appropriate to the information from the customer's account. The customer then decides to launch a chat, these variable 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 Visitor Monitoring code overwritten by the Chat Button variable assignment.

Passing Conversion Tracking Variables

Once the code containing your custom variable has been generated, you must edit the script to set the variable assignment. This is easily accomplished with a little JavaScript or with your preferred scripting language via the getPageViewer directive.

Note: Conversion Tracking Variable values are automatically updated each time the VMS code is run.

In the above highlighted example, customerId is a variable that you would create and associate the desired value from the page. Please notice that both vi variables have been set, this is necessary to ensure the variable assignment functions for both JavaScript enable and Non JavaScript enable browsers.

Now, let's take look at how you would set the value for customerId using a little JavaScript. Once the value is set it will then be passed to the vi variable, this occurs because we have set vi=customerId or more specifically, the value of customerId will be assigned to vi.

Assuming the value of the customer number is exposed in some way, such as an element identifier on the web page. For example, we used a div tag with an Id set to CustomerNumber; this identifies it and enables us to extract the inner value and then assign it to our variable. See below for a full code example.

The code above extracts the value from the div element (123456789) and then assigns it to customerId which in turn is then assigned to vi. Once this is assigned, it is available to be viewed in the visit grid within BoldChat.

Passing Custom Variables on Pre-Chat Forms

You can pass custom information to BoldChat 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.
  1. Click New to add a custom parameter to your Chat Window definition under Setup > Account Setup > Chats > Custom Chat Window > Pre-Chat Form > Custom Fields.
  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(), as it has been deprecated.

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-operator setting.
Related Articles

How to generate an HTML Snippet

The primary connection between BoldChat and your site is always a snippet of HTML code that you generate in BoldChat and insert to your site.

Members of a Permission Group with the following account permissions can use this feature:
  • Can Generate Chat Button HTML
  • Can Generate Visitor Monitor HTML
  • Can Generate Conversion Tracking HTML

The HTML snippet tells BoldChat servers how you are using BoldChat. When choosing an HTML snippet for your site, you are asking yourself the following questions:

  • Which button or link are you showing to visitors?
  • Are you collecting information about visitors 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 visitors to chat based on characteristics of their visit such as page visited, length of visit, and more.

Regardless of your reason for using BoldChat and the details of your exact implementation, you must integrate a BoldChat HTML snippet to create a "gate" between visitors and BoldChat servers.

  1. From the main menu of the operator client, go to Setup > HTML and select the type of HTML to generate:
    • Generate Floating Button / Visitor Monitoring HTML. Select this option when you want to implement a floating chat button and/or monitor visitors before chat and/or invite users to chat based on characteristics of their visit
    • Generate Chat Button HTML. Select this option when you want to implement a fixed-position chat button or link on your site.
    • Generate Conversion Tracking HTML. Select this option when you want to track conversion events so you can relate specific chats to actual sales or other milestones.
  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 BoldChat entities that can be associated with an HTML snippet, such as Custom Chat Button definitions, Custom Chat Window definitions, Website definitions, Department definitions, Auto-Invite Ruleset definitions, Conversion Code definitions, and more.
  3. Click Copy to Clipboard.
  4. When pasting the HTML code to your site, consider the following in light of your actual site architecture:
  5. 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 (use 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 Custom Chat Button or Floating Chat Button with your HTML (not modify an existing)
  • When you associate a new website with your HTML (not modify an existing)
  • When you toggle Pass Custom Visitor Information on/off
  • When you change the Conversion Code associated with your HTML
  • When you change the Auto-Invite Ruleset associated with your Visitor Monitoring HTML

If you no longer want to display a chat window on a specific web page, remove the chat button code from the HTML source of that page.

Related Articles

How to set up a Chat Button definition

The term chat button is used generally to refer to both Custom Chat Button definitions and Custom Floating Chat Button definitions.

Why do we call it a "definition"?

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

Where do I create chat button definitions?

We recommend creating and managing Custom (static) Chat Button definitions and Floating Chat Button definitions from the following location: Setup > Account Setup > Chats.

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 visitor 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 visitor moves the mouse over it.

How do chat buttons relate to other BoldChat entities?

Chat button definitions can be associated with the following:

  • An HTML snippet
  • A Custom Chat Window definition
  • A Department definition

The direction of the relationship is from HTML snippet to chat button, and from chat button to window or department.

An HTML snippet can only be associated with one chat button definition. A chat button definition can only launch one specific chat window and can only be associated with one department, while a chat window can be launched from multiple buttons or invitations and a department can be associated with multiple buttons.

What is controlled by the chat button definition?

The chat button definition controls the following:

  • The actual button images shown when operators 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 visitors are shown when they click the button
  • The Department associated with the button
  • The countries where the button will be displayed

Which settings impact chat button availability?

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

  • Operator availability (including operator hours)
  • Website business hours
  • Department business hours
  • ACD settings (queue limits)
Related Articles

How to set a chat button to be shown in specific countries

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

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

    Result: The New Custom Button window is displayed.

  2. Use the direction buttons to move countries between Included Countries and Excluded Countries.
  3. Save your changes.

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

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

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

Related Articles

How to set up a chat button to leverage a department definition

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 Custom Chat Button definition process for both floating and fixed-position buttons.

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

    Result: The New Custom Button window is displayed.

  2. Save your changes.

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

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

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

Related Articles

How to set a chat button as a chat entry point (fixed-location)

Set a button that a visitor clicks to initiate a chat session.

When implementing chat, your visitors need something to click in order to start a chat session. The term chat entry point refers to the interface element that a visitor clicks to initiate a chat. You set a chat entry point as part of the procedure of generating and inserting an HTML snippet to your site.

  1. From the main menu of the operator client, go to Setup > HTML > Generate Chat Button HTML.

    Result: The Generate Chat Button HTML window is displayed.

  2. On the Generate Chat Button HTML window, at the top of the window under Type of Chat Button, select Web Page Chat Button Image.
  3. Under Customize Chat Button Images, choose a chat button definition to associate with your HTML snippet:
    • To use the default button, do nothing (the default is called My Chat Button)
    • To change the chat button definition, click the three dots ... next to Custom Chat Button. See Setting up Chat Buttons.
    Tip: To see what your chat button or text link will look like on the web page based on current settings, click Open Test Page.
  4. Associate your HTML with a Website definition. See How to set up a Website definition.
  5. Option. Pass customer visitor information into the chat session.

    See Collecting visitor data with Custom Visitor Info and Variables.

  6. Copy and paste the code to your site. See Generate and insert HTML to your website.
Related Articles

How to show a different chat button image when operators are available/unavailable

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

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

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

    Result: The New Custom Button window is displayed.

  2. On the New Custom... window, under When Unavailable, choose the expected behavior when no operators are available:
    • Choose Show Unavailable Button: When no operators are available, the Unavailable Image URL is displayed to visitors.
    • Show No Button: When no operators are available, no button is displayed to visitors.
    • Show Available Button: When no operators are available, the Available Image URL is displayed to visitors.
  3. Save your changes.

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

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

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

Related Articles

How to set a floating chat button as a chat entry point (with Visitor Monitoring)

Set a floating button that a visitor clicks to initiate a chat session.

When implementing chat, your visitors need something to click in order to start a chat session. The term chat entry point refers to the interface element that a visitor clicks to initiate a chat. You set a chat entry point as part of the procedure of generating and inserting an HTML snippet to your site.

  1. From the main menu of the operator client, go to Setup > HTML > Generate Floating Button / Visitor Monitor HTML

    Result: The Generate Visitor Monitor HTML window is displayed.

  2. On the Generate Visitor Monitor HTML window, choose a floating button to deploy:
    • To use the default button, do nothing (the default is called My Chat Button)
    • To change the chat button definition, click the three dots ... next to Floating Chat Button. See Configuring chat buttons.
  3. Associate your HTML with a Website definition. See How to set up a Website definition.
  4. Option. Associate your HTML with an Auto-Invite Ruleset definition. See How to invite visitors to chat according to rules.
  5. Copy and paste the code to your site. See Generate and insert HTML to your website.
Related Articles

Layered chat window scripting

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

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

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

Adding custom scripts

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

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

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

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

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

Using events and listeners

There are two ways to attach event listeners:

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

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

List of event functions

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

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

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

iFrame object snippet (addListener method)

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

window object snippet (global function)

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

Customizing pop-up chat windows

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

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

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

Layout overview

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

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

Window texts, messages and labels

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

Colors

Fastpath: On the Brandings page, select Common - Layered and go to Colors.
Tip: As a general rule, variable names reflect the name of the corresponding key. For example, you can refer to the Header Font Color key with the header_font_color variable.
Setting group Key Variable Default value
Simple Content Background Color (R,G,B) content_background_color #F0F0F0
Header Background Color header_background_color url('https://genesyscustomercare.nanorep.co/storage/nr1/kb/8AF2B933/8AF2BA4B/8C810D27/531/lightbulb_bg.png')
Text Color text_color #000000
Text Font text_font verdana, arial, helvetica, sans-serif
Text Size text_size 12px

Logo and images

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

Layout and custom scripting

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

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

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

To customize your CSS code, you can inspect chat window elements to determine their scope using Chrome, Firefox, or a professional development tool. For more information, see Advanced features for chat window customization.

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

How to use auto-translation during chats

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

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

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

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

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


Are visitors aware that messages are being auto-translated?

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

What language should I use?

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

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

How can I change the visitor language?

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

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

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

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

How can I switch auto-translation on or off?

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

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

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

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

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

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

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

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

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

What happens if a language pair is unavailable?

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

Related Articles

How to allow visitors to send themselves a transcript

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

    Result: The New Custom Chat Window is displayed.

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

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

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

Advanced features for chat window customization

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

Variables
Branding variables conform to the ${variable_name} scheme.
Tip: As a general rule, variable names reflect the name of the corresponding key. For example, you can refer to the Header Font Color key with the header_font_color variable.
Key chaining
Variables can be chained if a key needs to inherit the value of another key. Working with key chains is helpful to avoid inconsistent color or text usage and simplify the customization process.
Note: Key inheritance is limited to a certain number of levels due to performance considerations, usually around four.
CSS, Javascript and HTML includes
Includes allow you to inject custom JavaScript code, redesign the layout and fine-tune CSS settings in one place. Any valid CSS, Javascript or HTML snippet is allowed in the appropriate fields without restrictions.

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

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

Every layered chat window comprise a window and a frame object with different scopes.

  • A chat window object is a container element that controls the window object of the host page, in which the chat window is embedded.
  • A chat frame object is the window object of the innermost iFrame, in which the chat runs.
Image format

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

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

How to provide a chat window in multiple languages

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

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

    Result: The New Custom Chat Window is displayed.

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

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

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

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

  5. Set a language as default.

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

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

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

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

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

Visitor language is determined as follows:

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

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

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

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

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

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

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

    Result: The New Custom Button window is displayed.

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

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

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

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

Related Articles

How to customize chat windows

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

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

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

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

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

How to set up a Chat Window definition

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

Where do I create chat windows?

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

How do chat windows relate to other BoldChat entities?

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

  • Custom Chat Button
  • Chat Link
  • Custom Chat Invitation

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

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

Why do we call it a "definition"?

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

What is controlled by the Chat Window definition?

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

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

What is a layered chat window?

As the name suggests, a layered chat window appears as a new element on your page instead of as a new window. Layered windows are optimized for display on mobile devices, but many users prefer them for desktop browsers, as well.

Schedule and Verify Chat Window Customization Upgrade

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

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

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

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

Why would you upgrade your chat window definition?

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

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

Note: For most users, this option is not available unless they have a chat window that was created a long time ago and a new version of the BoldChat Operator Client has been released in the meantime.
Related Articles

Layered chat window branding

As the name suggests, a layered chat window appears as a new element on your page instead of as a new window. Layered windows are optimized for display on mobile devices, but many users prefer them for desktop browsers, as well.

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

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

Layout overview

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


A layered window has the following variables of individual elements:

  1. General Text Color
  2. Header Font Color
  3. Header Background Color
  4. Operator Message - Message - Font Color
  5. Operator Message - Name - Font Color
  6. Operator Message - Time - Font Color
  7. Operator Message Background Color
  8. Customer Message - Message - Font Color
  9. Customer Message - Name - Font Color
  10. Customer Message - Time - Font Color
  11. Customer Message Background Color
  12. Button Font Color
  13. Link Font Color
  14. Required Font Color
  15. Message Input Font Color
  16. Message Input Background Color
  17. Button Background Color
  18. Message Input Container Background Color
  19. Content Background Color (R,G,B)

Window texts, messages and labels

Window texts, messages and labels can be customized per language. See How to provide a chat window in multiple languages.

Colors (Simple branding)

Fastpath: On the Brandings page, select Simple branding, Common - Layered page, and the Colors group.
Tip: As a general rule, variable names reflect the name of the corresponding key. For example, you can refer to the Header Font Color key with the header_font_color variable.
Key Variable Description
Content Background Color (R,G,B) content_background_color

Default: 35, 35, 35

 The background color of the inner chat window, where visitors see the messages.
Content Background Transparency background_transparency

Default: 0.65

 The transparency of the inner chat window.
General Text Color text_color

Default: white

 The color of system messages and labels.
General Text Font text_font

Default: sans-serif

 The font family of system messages and labels.
General Text Size text_size

Default: 1em

 The font size of system messages and labels.
Header Background Color header_background_color

Default: #01A5EE

 The background color of the chat window's header.
Header Font Color header_font_color

Default: #FFFFFF

 The color of the label in the chat window's header.
Message Input Container Background Color message_input_container_background_color

Default: #232323

 The border color of the message input field and the Send button at the bottom of the chat window.
Operator Message - Message - Font Color operator_message_font_color

Default: #E7E7E7

 The color of operator messages.
Operator Message - Name - Font Color operator_message_sender_color

Default: #B2B2B2

 The color of the operator's name.
Operator Message - Time - Font Color operator_message_sent_color

Default:#3DC8F3

 The color of the time stamp when the operator sent the message.
Operator Message Background Color operator_background

Default: #232323

 The background color of the operator message container.
Visitor Message - Message - Font Color visitor_message_font_color

Default: #FFFFFF

 The color of the visitor's message.
Visitor Message - Name - Font Color visitor_message_sender_color

Default: #FFFFFF

 The color of the visitor's name.
Visitor Message - Time - Font Color visitor_message_sent_color

Default: #FFFFFF

 The color of the time stamp when the visitor sent the message.
Visitor Message Background Color visitor_background

Default: #3DC8F3

 The background color of the visitor message container.

Colors (Custom branding)

Fastpath: On the Brandings page, select Custom branding, Common - Layered page, and the Colors group.
Tip: As a general rule, variable names reflect the name of the corresponding key. For example, you can refer to the Header Font Color key with the header_font_color variable.
Key Variable Description
ActiveAssist Activity Background Color aa_background

Default: ${form_background}

 The background color of the message that describes the ActiveAssist activity.
ActiveAssist Activity Font Color aa_color

Default: ${text_color}

 The color of the message that describes the co-browse activity.
ActiveAssist Message - Message - Font Color aa_message_font_color

Default: ${operator_message_font_color}

 The color of co-browse system messages.
ActiveAssist Message - Name - Font Color aa_message_sender_color

Default: ${operator_message_sender_color}

 The color of the agent's name who started the co-browse session.
ActiveAssist Message - Time - Font Color aa_message_sent_color

Default: ${operator_message_sent_color}

 The color of the time stamp when the agent started the co-browse activity.
ActiveAssist Message Background Color aa_message_background

Default: ${operator_background}

 The background color of the co-browse message container.
Button Font Color button_font_color

Default: ${text_color}

 The color of button labels.
Dialog Background Color dialog_background

Default: ${text_color}

 The background color of dialogs, such as when the agent asks the customer for remote control permission.
Dialog Button Font Color dialog_button_font_color

Default: ${text_color}

 The color of the button labels in chat window dialogs.
Dialog Cancel Button Background Color dialog_cancel_background

Default: ${form_background}

 The background color of the Cancel button in dialogs.
Dialog Font Color dialog_font_color

Default: ${form_background}

 The color of dialog texts.
Dialog OK Button Background Color dialog_ok_background

Default: ${button_background}

 The background color of the OK button in dialogs.
Form Background Color form_background

Default: ${message_input_container_background_color}

 The background color of the pre-chat and post-chat forms.
Form Input Background Color form_input_background

Default: ${form_background}

 The background color of the input fields in pre-chat and post-chat forms.
Form Input Border Color form_input_border_color

Default: #6F6F6F

 The border color of the pre-chat and post-chat forms.
Form Input Error Border Color form_input_error_border_color

Default: #FF0000

 The border color of error messages in pre-chat and post-chat forms. For example, when the customer enters an invalid email address.
Form Input Font Color form_input_font_color

Default: ${text_color}

 The font color of the input field content in pre-chat and post-chat forms that the customer types.
Form Input Placeholder Color form_input_placeholder_color

Default: #666666

 The font color of placeholders in the input fields of forms.
Link Font Color link_color

Default: #9F9F9F

 The color of links.
Link Font Hover Color link_hover_color

Default: #CFCFCF

 The color of links when the customer hovers over a link.
Message Input Background Color message_input_background

Default: #FFFFFF

 The background color of the input field, where customers type their messages.
Message Input Font Color message_input_font_color

Default: #000000

 The color of customer messages as they type.
Operator Activity Font Color activity_color

Default: ${text_color}

 The color of the message about agent activity.
Required Text Font Color required_font_color

Default: #C9C9C9

 The color of the "Required" label in forms.
Status Message Background Color status_background

Default: #FFFFFF

 The background color of status messages.
Status Message Font Color status_font_color

Default: #000000

 The color of status messages.

Logo and images

Fastpath: On the Brandings page, select Custom branding, Common - Layered page, and the Chat Frame group.
Note: The default aspect ratio of the logo image is 1:1 (square). This setting can be overridden in a style sheet.
Key Variable Description
Icons - Header - Menu icon_header_menu

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

  
Icons - Header - Minimize icon_header_minimize

Default: https://genesyscustomercare.nanorep.co/storage/nr1/kb/8AF2B933/8AF2BA4B/8C810D27/531/lightbulb_bg.pngs.boldchat.com/images/floating/minimize-arrow.png

  
Icons - Menu - Minimize icon_menu_minimize

Default: https://genesyscustomercare.nanorep.co/storage/nr1/kb/8AF2B933/8AF2BA4B/8C810D27/531/lightbulb_bg.pngs.boldchat.com/images/floating/minimize.png

  
Icons - Menu - Close icon_menu_close

Default: https://genesyscustomercare.nanorep.co/storage/nr1/kb/8AF2B933/8AF2BA4B/8C810D27/531/lightbulb_bg.pngs.boldchat.com/images/floating/close.png

Announcements

Genesys DX/Bold360 End of Life: January 2024

The Genesys DX (Bold360) platform will end of life on January 31st, 2024. This difficult decision was announced in March, 2023.  

Genesys continues to make a strong commitment to Genesys Cloud, while tightening the portfolio to further accelerate feature growth on the platform. Part of that included bringing over key Genesys DX features to Genesys Cloud CX, such as Knowledge Optimizer that focuses on ease-of-use knowledge management. Digital only licenses for Genesys Cloud were also introduced late last year, which are suitable to those who are not looking for voice capabilities or who need agent seats that only feature support for digital channels. 

Details on the end of life timeline

As of January 31st, 2024, access to Genesys DX product interfaces and customer-deployed components stop to function. Users will no longer be able to log into product interfaces, and all of the boldchat/bold360/nanorep domains will become unavailable for use. If you are curious on what the code on your website related to this might look like and how to remove it, we encourage referencing this post on the DX community. 

After January 31st, 2024, admins will still be able to get access for an additional 30 days. This period is meant to allow for extracting the necessary data from the platform. Historical data extraction from your account will be available to retrieve by data extraction APIs (Bold360 APIs and Nanorep APIs).  

Genesys.com
+1.888.436.3797
Contact us
Products
Company
About Genesys

Every year, Genesys® orchestrates billions of remarkable customer experiences for organizations in more than 100 countries. Through the power of our cloud, digital and AI technologies, organizations can realize Experience as a Service℠, our vision for empathetic customer experiences at scale. With Genesys, organizations have the power to deliver proactive, predictive, and hyper personalized experiences to deepen their customer connection across every marketing, sales, and service moment on any channel, while also improving employee productivity and engagement. By transforming back-office technology to a modern revenue velocity engine Genesys enables true intimacy at scale to foster customer trust and loyalty.

Copyright © 2022 Genesys. All rights reserved.
Terms of Use | Privacy Policy | Email Subscription | Accessibility Feedback | Cookie Preferences