JavaScript SDK Quickstart Guide

Getting Started

Add Web Application in Webex Connect

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

❗️
Note
If you are at a version of Webex Connect which is V4.0, kindly refer to this link to Configure an Webex Connect Web Application.

Download and Integrate JavaScript SDK in your Website

For more information, refer here

Code Integration

Here is a summary of the process required to implement RT.

Include SDK
Startup plugin
Check if user is already registered.
Register User
Connect
Register messageListener
Create a Thread
Send message using publishMessage

Code Sample

Unzip the downloaded SDK and add contents to your project
Import below files in the tag

<script src="assets/js/jquery.min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.17.2/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.17.2/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

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

Follow below step to setup In-App Messaging

Call plugin’s startup() method:

IMI.IMIconnect.startup();

📘
Note
Refer Managing Assets for managing multiple assets and paths

Check if user is already registered

IMI.IMIconnect.isRegistered()

Else 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);

Connect
In registration onSuccess callback, add below code:

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

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) => {

        },
    };

Publish a message

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);
}