Platform DocumentationPlatform ChangelogAPI ReferencePush & In-App SDKsSDK Release Notes
Push & In-App SDKs
FAQsWebsite

JavaScript SDK Quickstart Guide

Suggest Edits

Getting Started

  1. Add Web Application in Webex Connect
  2. Setup FCM for Chrome and Firefox Browsers
  3. Setup APNs for Safari Browser
  4. Download and Integrate JavaScript SDK in your Website
  5. Code Integration

1. Add Web Application in Webex Connect

To view how to create Web App Asset for 5.x, visit Web App Asset in Webex Connect

2. Setup FCM for Chrome and Firefox Browsers

Please follow this link to learn how to set up Firebase Cloud Messaging (FCM) for Chrome and Firefox browsers.

3. Setup APNs for Safari Browser

Please follow this link to learn how to set up APNs for Safari Browser.

4. Download and Integrate JavaScript SDK in your Website

To download and integrate the JavaScript SDK into your website, please refer to the detailed instructions provided here.

5. Code Integration

Here is a summary of the process required to implement Live Chat Messaging.

  1. Include SDK
  2. Startup plugin
  3. Check if user is already registered
  4. Register user
  5. Connect
  6. Register Listener for Live Chat Messaging
  7. Create a thread
  8. Send message using publishMessage

1. Include SDK

  1. Unzip the downloaded SDK and add contents to your project
  2. Import below files in the tag
<script src="assets/js/jquery.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.6.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.6.0/firebase-messaging-compat.js"></script>
<script type="text/javascript" src="assets/js/mqttws31.js"></script>
<script type="text/javascript" src="assets/js/aes.js"></script>
<script type="text/javascript" src="assets/js/imi-environments.js"></script>
<script type="text/javascript" src="assets/js/IMIClient.js"></script>

📘

Note

Here, sdk is in folder “assets”, please update to project specific location

2. Startup plugin

In Browser Console, verify if the plugin is available by typing IMI. It should output this:

Follow below step to setup Live Chat Messaging

Call plugin’s startup() method:

IMI.IMIconnect.startup();

📘

Note

Refer Managing Assets for managing multiple assets and paths.

3. Check if user is already registered

IMI.IMIconnect.isRegistered()

4. Register user

var userID = 1;
var deviceID = userID + new Date().getTime(); //any random no.
var deviceProfile = new IMI.ICDeviceProfile(deviceID, userID);
var registerCallback = {
   onSuccess: (msg) => {
      console.log(msg);
   },
   onFailure: (err) => {
      console.log(err);
   },
};
IMI.IMIconnect.register(deviceProfile, registerCallback);

📘

Note

We've introduced a feature to manage profile Time to Live (TTL) with a heartbeat mechanism. The TTL is configurable at the Asset level, defaulting to 40 days with a maximum of 365 days; changes can be made by contacting our support team. The JavaScript SDK sends a heartbeat to the platform based on specific conditions: if a heartbeat was sent within the last 15 days, no new heartbeat is sent; if not, a heartbeat is sent. Upon receiving a heartbeat, the backend resets the profile TTL to it's original value, which is 40 days by default, extending the active period. If no heartbeat is received within 40 days, the backend automatically deletes the inactive profile. For user registration, the default TTL is set to 40 days. If the app is opened after 40 days of inactivity, the SDK checks the last heartbeat timestamp and, if it exceeds 40 days, immediately unregisters the user from the app.

5. Connect

In registration onSuccess callback, add below code:

var messaging = IMI.ICMessaging.getInstance();
if (!messaging.isConnected())
   messaging.connect();

6. Register Listener for Live Chat Messaging

var msgCallBack = {
   onConnectionStatusChanged: (statuscode) => {
      console.log('onConnectionStatusChanged to', statuscode);
   },
   onMessageReceived: (message) => {
      console.log('onMessageReceived ', message);
   }
};
var messaging = IMI.ICMessaging.getInstance();
messaging.setICMessagingReceiver(msgCallBack);

Create a thread

createThread(title) {
   var title = title || "New Conversation";
   var thread = new IMI.ICThread();
   thread.setTitle(title);
   thread.setStatus(IMI.ICThreadStatus.Active);
   thread.setType(IMI.ICThreadType.Conversation);
   var messaging = IMI.ICMessaging.getInstance();
   messaging.createThread(thread, createThreadCallBack);
}
createThreadCallBack = {
   onSuccess: (threadObj) => {},
   onFailure: (err) => {

   },
};

Send message using publishMessage

var publishMessageCallback = {
   onSuccess: function (msg) {
      console.log("message sent", msg);
   },
   onFailure: function (errormsg) {
      console.log("failed to send message", errormsg);
   },
};

function publish() {
   var text = "Sample message text";
   var message = new IMI.ICMessage();
   message.setMessage(text);
   message.setThread(icThreadObj);
   var messaging = IMI.ICMessaging.getInstance();
   messaging.publishMessage(message, publishMessageCallback);
}

To set up push notifications, please follow this link: Sending Push Messages to Customers

Updated about 1 month ago