Webex Engage's Livechat widget leverages browser storage (session and local storage) in order to facilitate conversations on this channel. These variables are captured and stored at every step of the livechat interaction right from the point where the widget script is initialized i.e., even before a chat session is initiated.
It is therefore recommended that your website fetches consent from your customers through a consent form prior to loading Webex Engage's Livechat widget. These browser storage variables are stored against Engage's domain. Not only do they carry PII (Personally identifiable information) / pseudo-PII data customers might share in their chat with the business, e.g., their name, email ID, and other contextual variables that you may collect via pre-chat forms but also data that define the widget's configurations and behavior (appearance, out-of-office configurations, etc.) as configured by the Client Admin on the Admin console.
Best practice:
- We recommend obtaining explicit consent from your customers once they visit your website before you initialize the Livechat widget. Once you've received consent, it is recommended that you store this consent as a boolean flag in your session storage / local storage as you deem fit.
- You can then conditionally inject the widget's script into the DOM programmatically to initialize the Livechat widget. This will subsequently load associated dependencies from Engage's servers. Below is a sample code that you can reference
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Hello World!</title>
</head>
<body>
<!--Representational 'Accept Cookies' button on your consent form-->
<button id="cookies_consent" onclick="loadwidget()">Accept Livechat Cookies</button>
<!--End of cookie consent form-->
<!-- Start of Webex Engage's *MODIFIED* Livechat widget code snippet-->
<!-- Below code is a slightly modified version of the Installation code shown to Client Admins on WxEngage's Admin Console -->
<!-- Do NOT copy Webex Engage's Livechat widget here. Instead, ONLY replace the placeholder values in line #18 and #22 -->
<div id="divicw" data-bind="<guid>" data-org=""></div>
<script>
var i = {
t: function(t) {
var e = "<livechat-js-script-url>";
try {
var o = new XMLHttpRequest();
o.onreadystatechange = function() {
if (this.readyState == 4) {
var t = document.getElementById("divicw");
if (this.status == 0) {
i.o(t);
return;
}
var e = document.createElement("script");
e.innerHTML = this.responseText;
t.parentNode.insertBefore(e, t.nextSibling);
}
}
;
o.open("GET", e, true);
o.send();
} catch (s) {
console.error(s);
}
},
o: function(t) {
t.insertAdjacentHTML("afterend", '<iframe id="tls_al_frm" frameborder="0" style="overflow: hidden;height: 208px;width: 394px;position: fixed;display: block;right: 48px;bottom: 12px;z-index: 99999; display:none;"></iframe>');
var e = document.getElementById("tls_al_frm");
var o = e.contentWindow || e.contentDocument.document || e.contentDocument;
o.document.open();
o.document.write('<!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style>body{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #99a0b0;font-size: 14px;}.popover__content{background-color: #fbfbfe; padding: 1.5rem; border-radius: 5px; width: 300px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);position: relative;}.popover__message{font-weight: 600;color:#56627c;font-size: 16px;}.pull-left{float:left;}.clearfix{clear: both;}.hdr-txt{width: 218px; margin-top: 3px;}.para-txt a{text-decoration: none;color: #005cde;}.close-btn{position: absolute;right:15px;top:15px;}.close-btn a{text-decoration: none;font-weight: 400; color: #56627c; font-size: 16px;}</style></head><body><div class="popover__content"><div class="close-btn"><a href="#" onclick="closeTLSAlert();">X</a></div><div class="popover__message"><div class="pull-left hdr-txt">This browser version is not supported on LiveChat.</div></div><div class="clearfix"></div><p class="para-txt">Please update your browser to the latest version and re-open the website to access the widget. </p></div><script>function closeTLSAlert(){window.parent.postMessage({key: "close_tls_alert",value: "close_tls_alert",action: "close_tls_alert"}, "*");}<\/script></body></html>');
o.document.close();
e.style.display = "block";
window.addEventListener("message", function(t) {
if (t.data.action == "close_tls_alert") {
i.s();
}
});
},
s: function() {
var t = document.getElementById("tls_al_frm");
t.remove();
},
};
</script>
<!--End of *MODIFIED* Livechat widget code snippet-->
<!--Scripts to set cookie consent in session storage and load the widget is consent is granted -->
<script>
function loadwidget() {
sessionStorage.setItem("lcConsent", "1");
appendWidget();
}
if (sessionStorage.getItem("lcConsent") == 1) {
appendWidget();
}
function appendWidget() {
var body = document.getElementsByTagName("body")[0];
i.t(function(t) {});
}
</script>
<!--End of privacy based widget loading scripts-->
</body>
</html>
Note
- Replace the placeholder texts mentioned below by navigating to You can fetch this from the Webex Engage's Admin console logging in as a Client Admin > Assets > Channel Assets > Editing the Livechat Asset in context > Installation code. Copy the entire script into notepad and search for
data-bindand the URL in the expressionvar e = "....
data_bindin line #19livechat-js-script-urlin line #23- This code snippet assumes that you've stored the consent within a variable
lcConsentwithin the browser's session storage variables.
Warning
The Livechat widget code snippet you see in the code snippet above has been slightly modified to load the widget based on the consent. Do not tamper the payload above or this may lead to loading issues!
List of keys stored in the browser
| Key | Storage Type | Purpose | Created | Expiry |
|---|---|---|---|---|
fingerprint | Local storage | A unique identifier to track the user behavior on the website (DOM events, time spent on page, page URLs visited, etc.) This info is used to offer proactive chat invites (if configured) or alternatively can be used in routing decisions for inbound conversations | After initiating the first conversation | Until browser history is cleared |
style_<asset_id>_<domain> | Local storage | This cookie holds various livechat config settings configured against this brand/website domain. It contains data related to the Brand's name, tagline, logo, out-of-office banners in case no agents are available, color scheme, etc., that are used in optimizing the page load time to render the widget efficiently. | After initiating the first conversation | Until browser history is cleared |
customer_first_seen | Local storage | Unix timestamp when the customer was first seen on the website. This is required to offer routing configurations on Webex Engage's Admin Console. | After initiating the first conversation | Until browser history is cleared |
customer_last_seen | Local storage | Unix timestamp when the customer was last seen on the website. This is required to offer routing configurations on Webex Engage's Admin Console. | After initiating the first conversation | Until browser history is cleared |
customer_last_seen_interval_id | Local storage | Check with Madhav | After initiating the first conversation | Until browser history is cleared |
executed_proactive_ids | Local storage | An array of IDs of executed proactive rules that were offered to the end-customer | After initiating the first conversation | Until browser history is cleared |
<fingerprint>_<threadId>_unreadcount | Local storage | Count of unread messages on a particular Thread ID | Once the widget is initialized | Until browser history is cleared |
broadcast_info_<threadId> | Local storage | Contains info that needs to be broadcasted on a thread when conversation lifecycle events occur | Once the widget is initialized | Until browser history is cleared |
IM04065324_usergroup_id | Local storage | Determines the tenant on Engage's cloud | Once the widget is initialized | Until browser history is cleared |
email-id-<threadId> | Local storage | Stores the Email ID of the customer that has been captured as part of the Email transcript request | Once the widget is initialized | Until browser history is cleared |
IMI.Core.<appId>.userId | Local storage | A unique identifier that is assigned as an identity of the website visitor | Once the widget is initialized | Until browser history is cleared |
IMI.Core.<deviceId>.defDeviceId | Local storage | A unique identifier that is assigned as the identity of the device/browser that the visitor is using | Once the widget is initialized | Until browser history is cleared |
IMI.Core.<appId>.isSystemGenerated | Local storage | Contains details of system-generated events on the SDK | Once the widget is initialized | Until browser history is cleared |
IMI.Core.<appId>.appName | Local storage | Name of the App as configured on Engage's cloud | Once the widget is initialized | Until browser history is cleared |
IMI.Core.IM04065324.regiterResp | Local storage | This variable contains details around the event that registers a visitor's profile on the SDK. | Once the widget is initialized | Until browser history is cleared |
<appId>_REG_<fingerprint>_is_rtm_registered_new | Local storage | Determines whether the user is a return customer or visiting the website for the first time. | Once the widget is initialized | Until browser history is cleared |
IMI.Core.<appId>.disconnectEvent | Local storage | This is used to store details around the network disconnect event in case of network loss. | Once the widget is initialized | Until browser history is cleared |
replied_proactive_ids | Local storage | This stores the list of proactive message rule IDs that may have already been triggered on the website to avoid sending duplicate messages. | Once the widget is initialized | Until browser history is cleared |
data_org | Session storage | A unique identifier that identifies your Livechat widget instance on Engage's cloud. | Once the widget is initialized | Until the tab is closed |
parenthostname | Session Storage | Domain of the configured website e.g. www.example.com | Once the widget is initialized | Until the tab is closed |
imi_clear_session_chats | Session storage | A flag that determines that chats are to be cleared on the browser after closure | Once the widget is initialized | Until the tab is closed |
hdnisemojienable | Session storage | A flag that determines whether emojis are enabled on the Livechat widget | Once the widget is initialized | Until the tab is closed |
hdnisattachmentenable | Session Storage | A flag that determines whether attachments are enabled on the Livechat widget | Once the widget is initialized | Until the tab is closed |
data-bind | Session Storage | A unique system identifier that represents the Livechat asset this widget ties to on Engage's backend | Once the widget is initialized | Until the tab is closed |
appid | Session Storage | A unique identifier that represents the Livechat instance | Once the widget is initialized | Until the tab is closed |
appkey | Session Storage | Unique key that is used in comms via the backend layer to relay messages from the browser to the server. | Once the widget is initialized | Until the tab is closed |
hasprechatform | Session Storage | A flag that determines whether a pre-chat form is enabled on this website as configured on Webex Engage's Admin console. | Once the widget is initialized | Until the tab is closed |
load_previous_chats | Session Storage | A flag that determines whether chat history is to be persisted and loaded across browser sessions as configured on Webex Engage's Admin console. | Once the widget is initialized | Until the tab is closed |
Note
Please note that all of the above variables are mandatory for the Livechat widget to function regardless of whether associated features are used or not.