CTLive integration through events

The integration through CTLive events allows to integrate the library functions with custom code via JavaScript code. The integration takes place by listening in the main webpage document of the PostMessage events that are launched on specific actions.

Events

Event	Description	Notes	Data sent in object property
Loaded	Notifies that the library has been loaded and the configuration has been read		`elementID`: string that contains HTML element id containing the widget `widgetID`: string that contain the unique widget identifier `userID`: string that contain the unique user identifier
WidgetShown	The widget is shown	If the page is configured to show more than one widget an event is raised for each widget	`elementID`: string that contains HTML element id containing the widget `widgetID`: string that contain the unique widget identifier `userID`: string that contain the unique user identifier
WidgetHidden	The widget is hidden		`elementID`: string that contains HTML element id containing the widget `widgetID`: string that contain the unique widget identifier `userID`: string that contain the unique user identifier
WidgetClicked	The widget has been clicked/activated		`elementID`: string that contains HTML element id containing the widget `widgetID`: string that contain the unique widget identifier `userID`: string that contain the unique user identifier `type:` string containing the type of widget clicked. It can have one of the following values: “Chat” “CallbackNow” “CallbackLater” “ClickToCall”
ChatStarted	A chat request starts		`chatID`: string that contain the unique chat identifier `userID`: string that contain the unique user identifier
ChatOnline	The chat is active		`chatID`: string that contain the unique chat identifier `users`: array of strings containing the identifier of the users participating in the chat
ChatFinished	The chat is ended		`chatID`: string that contain the unique chat identifier `userID`: string that contain the unique user identifier
DatacollectionStarted	The data collection phase is started		`widgetID`: string that contain the unique widget identifier `userID`: string that contain the unique user identifier `type:` string containing the type of widget clicked. It can have one of the following values: “Chat” “CallbackNow” “CallbackLater” “ClickToCall”
DatacollectionSubmitted	The data collection phase is completed		`widgetID`: string that contain the unique widget identifier `userID`: string that contain the unique user identifier `type:` string containing the type of widget clicked. It can have one of the following values: “Chat” “CallbackNow” “CallbackLater” “ClickToCall”
SurveyStarted	The survey phase is started		`widgetID`: string that contain the unique widget identifier `chatID`: string that contain the unique chat identifier `userID`: string that contain the unique user identifier
SurveySubmitted	The survey phase is completed		`widgetID`: string that contain the unique widget identifier `chatID`: string that contain the unique chat identifier `userID`: string that contain the unique user identifier

Message Structure

Type: JSON

{
  name: "CTLiveEvent",
  type: <event type>
  object: <event specific data type>
}

Example

if (window.addEventListener) {
  addEventListener("message", messageListener, false);
} else {
  attachEvent("onmessage", messageListener);
}


function messageListener (event) {
  if ( typeof event !== "undefined" ) {
    if ( event !== null ) {
      if (event.target.location.origin !== document.location.origin) {
        //Message not for me
        return;
      }
      if (event.data.name !== "CTLiveEvent") {
        return;
      }

      switch(event.data.type) {
        case "Loaded":
          console.log("[POSTMESSAGE] Received Loaded event", event.data.object);
          // do some stuff...
       break;
        case "WidgetShown":
          console.log("[POSTMESSAGE] Received WidgetShown event", event.data.object);
          // do some stuff...
        break;
        case "WidgetHidden":
          console.log("[POSTMESSAGE] Received WidgetHidden event", event.data.object);
          // do some stuff...
        break;
        case "WidgetClicked":
          console.log("[POSTMESSAGE] Received WidgetClicked event", event.data.object);
          // do some stuff...
        break;
        case "ChatStarted":
          console.log("[POSTMESSAGE] Received ChatStarted event", event.data.object);
          // do some stuff...
        break;
        case "ChatOnline":
          console.log("[POSTMESSAGE] Received ChatOnline event", event.data.object);
          // do some stuff...
        break;
        case "ChatFinished":
          console.log("[POSTMESSAGE] Received ChatFinished event", event.data.object);
         // do some stuff...
        break;
        case "DatacollectionStarted":
          console.log("[POSTMESSAGE] Received DatacollectionStarted event", event.data.object);
          // do some stuff...
        break;
        case "DatacollectionSubmitted":
          console.log("[POSTMESSAGE] Received DatacollectionSubmitted event", event.data.object);
          // do some stuff...
        break;
        case "SurveyStarted":
          console.log("[POSTMESSAGE] Received SurveyStarted event", event.data.object);
          // do some stuff...
        break;
        case "SurveySubmitted":
          console.log("[POSTMESSAGE] Received SurveySubmitted event", event.data.object);
          // do some stuff...
        break;
      }

    }
  } 
}