feature(new integration): LiveChat web Device mode integration onboar…

…ding (#633)

* feature[livechat]: initial Commit

* feature[livechat]: add track calls

* feature[livechatIntegration]: change event names and add functions

* feature[livechatIntegration]: remove email error validation and set session variable

* feature[livechatIntegration]: add traits in session variable

* feature[livechatIntegration]: flatten traits

* feature[livechat]: add userId and resolve review comments

* feature[livechat]: add function description

Co-authored-by: shrouti1507 <[email protected]>

integrations/LiveChat/browser.js

@@ -0,0 +1,111 @@
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable class-methods-use-this */
+import get from "get-value";
+import logger from "../../utils/logUtil";
+
+import { recordingLiveChatEvents } from "./util";
+import { isObject } from "../../utils/utils";
+import { flattenJson } from "../utils/commonUtils";
+import { NAME } from "./constants";
+
+class LiveChat {
+  constructor(config) {
+    this.name = NAME;
+    this.licenseId = config.licenseId;
+    this.recordLiveChatEvents = config.recordLiveChatEvents;
+    this.eventsToStandard = config.eventsToStandard;
+    this.updateEventNames = config.updateEventNames;
+    this.eventsList = config.eventsList;
+  }
+
+  init() {
+    logger.debug("===in init Livechat===");
+    window.__lc = window.__lc || {};
+    window.__lc.license = this.licenseId;
+    (function (n, t, c) {
+      function i(n) {
+        return e._h ? e._h.apply(null, n) : e._q.push(n);
+      }
+      var e = {
+        _q: [],
+        _h: null,
+        _v: "2.0",
+        on: function () {
+          i(["on", c.call(arguments)]);
+        },
+        once: function () {
+          i(["once", c.call(arguments)]);
+        },
+        off: function () {
+          i(["off", c.call(arguments)]);
+        },
+        get: function () {
+          if (!e._h)
+            throw new Error(
+              "[LiveChatWidget] You can't use getters before load."
+            );
+          return i(["get", c.call(arguments)]);
+        },
+        call: function () {
+          i(["call", c.call(arguments)]);
+        },
+        init: function () {
+          var n = t.createElement("script");
+          (n.async = !0),
+            (n.type = "text/javascript"),
+            (n.src = "https://cdn.livechatinc.com/tracking.js"),
+            t.head.appendChild(n);
+        },
+      };
+      !n.__lc.asyncInit && e.init(), (n.LiveChatWidget = n.LiveChatWidget || e);
+    })(window, document, [].slice);
+  }
+
+  isLoaded() {
+    logger.debug("===In isLoaded LiveChat===");
+    return !!(window.LiveChatWidget && isObject(window.LiveChatWidget));
+  }
+
+  isReady() {
+    logger.debug("===In isReady LiveChat===");
+
+    // Dasboard Other Settings
+    if (this.recordLiveChatEvents) {
+      recordingLiveChatEvents(
+        this.updateEventNames,
+        this.eventsList,
+        this.eventsToStandard
+      );
+    }
+    return !!window.LiveChatWidget;
+  }
+
+  identify(rudderElement) {
+    logger.debug("===In LiveChat Identify===");
+    const { message } = rudderElement;
+    const { userId } = message;
+    const { traits } = rudderElement.message.context;
+    const email = get(message, "context.traits.email");
+
+    if (email) {
+      window.LiveChatWidget.call("set_customer_email", email);
+    } else {
+      logger.error(
+        "User parameter (email) ,required for identify call, not found."
+      );
+    }
+
+    const name = get(message, "context.traits.name");
+
+    if (name) {
+      window.LiveChatWidget.call("set_customer_name", name);
+    }
+    if (traits) {
+      const flattenTraits = flattenJson(traits);
+      if (userId) flattenTraits.userId = userId;
+      window.LiveChatWidget.call("set_session_variables", flattenTraits);
+    }
+  }
+}
+
+export default LiveChat;

integrations/LiveChat/constants.js

@@ -0,0 +1,13 @@
+const NAME = "LIVECHAT";
+const CNameMapping = {
+  [NAME]: NAME,
+  LIVECHAT: NAME,
+  LiveChat: NAME,
+  Live_Chat: NAME,
+  livechat: NAME,
+  "LIVE CHAT": NAME,
+  "Live Chat": NAME,
+  "live chat": NAME,
+};
+
+export { NAME, CNameMapping };

integrations/LiveChat/index.js

@@ -0,0 +1,3 @@
+import LiveChat from "./browser";
+
+export default LiveChat;

integrations/LiveChat/util.js

@@ -0,0 +1,73 @@
+import { getHashFromArray } from "../utils/commonUtils";
+
+const integrationContext = {
+  name: "LiveChat",
+  version: "1.0.0",
+};
+
+/**
+ * This function is used to trigger a callback.
+ * @param {*} standardEventsMap - mapping of events done by the user
+ * @param {*} eventName - standard event name
+ * @param {*} updateEventNames - boolean variable to change eventName.
+ */
+const makeACall = (standardEventsMap, eventName, updateEventNames) => {
+  // Updating the event name with any mapping from the webapp if available else
+  // storing default event name in the updatedEvent
+  const updatedEvent =
+    standardEventsMap[eventName] && updateEventNames
+      ? standardEventsMap[eventName]
+      : eventName;
+
+  window.rudderanalytics.track(
+    `${updatedEvent}`,
+    {},
+    { context: { integration: integrationContext } }
+  );
+};
+
+const swapKeyValuePairs = (standardEventsMap) => {
+  const swappedEventsMap = {};
+  Object.keys(standardEventsMap).forEach((key) => {
+    swappedEventsMap[standardEventsMap[key]] = key;
+  });
+  return swappedEventsMap;
+};
+
+/**
+ * This function has event listners for the occuring events and to make a call for the event after
+ * collecting the data.
+ * @param {*} updateEventNames - variable to Update event name .
+ *  @param {*} userDefinedEventsList - List of requested events by the user.
+ * @param {*} userDefinedEventsMapping - Mapping of events in the webapp by the user
+ */
+function recordingLiveChatEvents(
+  updateEventNames,
+  userDefinedEventsList,
+  userDefinedEventsMapping
+) {
+  let standardEventsMap = getHashFromArray(userDefinedEventsMapping);
+  standardEventsMap = swapKeyValuePairs(standardEventsMap);
+  (function (api) {
+    [
+      "ready",
+      "new_event",
+      "form_submitted",
+      "greeting_hidden",
+      "rating_submitted",
+      "visibility_changed",
+      "greeting_displayed",
+      "availability_changed",
+      "customer_status_changed",
+      "rich_message_button_clicked",
+    ].forEach(function (eventName) {
+      if (userDefinedEventsList.includes(eventName)) {
+        api.on(eventName, function (payload) {
+          makeACall(standardEventsMap, eventName, updateEventNames);
+        });
+      }
+    });
+  })(window.LiveChatWidget);
+}
+
+export { integrationContext, recordingLiveChatEvents };

integrations/client_server_name.js

@@ -53,7 +53,9 @@ const clientToServerNames = {
   MOUSEFLOW: "Mouseflow",
   CONVERTFLOW: "ConvertFlow",
   SNAPENGAGE: "SnapEngage",
+  LIVECHAT: "LiveChat",
   SHYNET: "Shynet",
+
 };
 
 export { clientToServerNames };

integrations/index.js

@@ -52,8 +52,10 @@ import * as Rockerbox from "./Rockerbox";
 import * as Mouseflow from "./Mouseflow";
 import * as ConvertFlow from "./ConvertFlow";
 import * as SnapEngage from "./SnapEngage";
+import * as LiveChat from "./LiveChat";
 import * as Shynet from "./Shynet";
 
+
 // the key names should match the destination.name value to keep partity everywhere
 // (config-plan name, native destination.name , exported integration name(this one below))
 
@@ -112,6 +114,7 @@ const integrations = {
   MOUSEFLOW: Mouseflow.default,
   CONVERTFLOW: ConvertFlow.default,
   SNAPENGAGE: SnapEngage.default,
+  LIVECHAT: LiveChat.default,
   SHYNET: Shynet.default,
 };
 

integrations/integration_cname.js

@@ -52,8 +52,10 @@ import { CNameMapping as Rockerbox } from "./Rockerbox/constants";
 import { CNameMapping as Mouseflow } from "./Mouseflow/constants";
 import { CNameMapping as ConvertFlow } from "./ConvertFlow/constants";
 import { CNameMapping as SnapEngage } from "./SnapEngage/constants";
+import { CNameMapping as LiveChat } from "./LiveChat/constants";
 import { CNameMapping as Shynet } from "./Shynet/constants";
 
+
 // for sdk side native integration identification
 // add a mapping from common names to index.js exported key names as identified by Rudder
 const commonNames = {
@@ -112,6 +114,7 @@ const commonNames = {
   ...TVSquared,
   ...Vero,
   ...VWO,
+  ...LiveChat,
   ...Shynet,
 };