JavaScript SDK Quickstart Guide

Suggest Edits

To send web push notifications, the client website must be configured to show the popup. The pop-up appears when the customers navigate to the website. When the customers accept to receive web push notifications, a service worker is created in the browser's background. The service worker constantly listens to the push messaging server and shows the notification even when the website is closed.

Sample Notifications

Private Browsing Mode

Web push notifications are not supported in private browsing mode.

Option to download SDK initialization config file from web app asset configuration page

The JavaScript SDK will have a single file containing all configurations required to initialize the SDK.

Prerequisites

The minimum requirements to use imiconnect JavaScript SDK are:

Component

Requirement

Apple Push Notification

An APNS certificate, to enable Push Notification services.

Google Push Notification

A FCM certificate, to enable Push Notification services.

Account

A valid Google developer account
A valid iOS developer account
An active account on imiconnect platform

Software

imiconnect JavaScript SDK

Web push notifications are supported on the following OS and browsers:

Chrome

Firefox

Safari

Windows Desktop (Version 7 ,8,10)

Yes

Mac OS X 10.11 (EI Captain)

Yes

Linux (Fedora 24)

Yes

iOS (9.x)

Android (5.x)

Yes

Configuration Tasks

Setup FCM for Chrome and Firefox Browsers
Setup APNs for Safari Browser
Add Web Application in imiconnect
Download and Integrate JavaScript SDK in your Website
Sending Push Messages to Customers
Sending In-app Messages to Customers

Setup FCM for Chrome and Firefox Browsers

To create a Google API project, follow these steps:

Go to Google Firebase Console.
Click Add Project.

Figure 3: Welcome to Firebase

Add the following in the screen that appears:
- Project name: Enter a name for your project.
- Country/region: Select the country name.
- Select the Default setting and Terms and conditions check-box
Click Create Project to continue.

Create Project

The console will create a project with the given details.
Click Continue to proceed.

Project Created

On the overview page, Click icon text toProject Overview

Add Firebase to web app

The project setting details are displayed, copy the Web API Keyin imiconnect Web APP setting Page

General setting page

Click on Cloud Messaging.
While creating a chrome/Firefox app, you can enter either the Legacy server key or the Server Key in the API Key and Sender ID for Project number.

Project Credentials

The API Key can either be the Legacy server key or the Server Key.

User Interface

The snippet contains initialization information to configure the Firebase JavaScript SDK to use Authentication, Cloud Storage and the Realtime Database.
Users can take the apikey and messagingSenderId to create a web push chrome application.

Add Web Application in imiconnect

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

Note:

If you are at a version of IMIconnect which is V4.0, kindly refer to this link to Configure an IMIconnect Web Application.

Web Push Popup

For example, to show the web push popup on loading the index.html page, copy the below code and paste it in header or body of your index.html page. Replace the appId with the id that is generated in imiconnect for the web application.

if (!IMI.IMIconnect.isRegistered()) {
            var callback = {
                onSuccess: function() {
                    console.log("reg success");
                    //logic to subscribe to topics or publish messages
                },
                onFailure: function(errormsg) {
                    console.log("reg failed");
                }

};
            var deviceProfile=new IMI.ICDeviceProfile(deviceId, userId);  
           //here user id is  optional (If user id not there user can call deviceID,  
             userId will be generated by IMIConnect and passed to callback function)//
          //var  deviceProfile = new IMI.ICDeviceProfile(deviceId);//
          IMI.IMIconnect.register(deviceProfile, callback);
        }
    } catch (err) {
        console.log(err);
    }
</script>

<script src="../js/jquery.min.js"></script>
<script src="//www.gstatic.com/firebasejs/4.6.2/firebase-app.js"></script>
<script src="//www.gstatic.com/firebasejs/4.6.2/firebase-messaging.js"></script>
<script src="../js/mqttws31.js"></script>
<script src="../js/IMIClient.js"></script>
<script>
    try {
        var config = new IMI.ICConfig(appId, clientKey);
        IMI.IMIconnect.startup(config);

        if (!IMI.IMIconnect.isRegistered()) {
            var callback = {
                onSuccess: function() {
                    console.log("reg success");
                    //logic to subscribe to topics or publish messages
                },
                onFailure: function(errormsg) {
                    console.log("reg failed");
                }

            };
            var deviceProfile=new IMI.ICDeviceProfile(deviceId, userId);  
           //here user id is  optional (If user id not there user can call deviceID,  
             userId will be generated by IMIConnect and passed to callback function)//
          //var  deviceProfile = new IMI.ICDeviceProfile(deviceId);//
          IMI.IMIconnect.register(deviceProfile, callback);
        }
    } catch (err) {
        console.log(err);
    }
</script>

if (!IMI.imiconnect.isRegistered()) {
            var callback = {
                onSuccess: function() {
                    console.log("reg success");
                    //logic to subscribe to topics or publish messages
                },
                onFailure: function(errormsg) {
                    console.log("reg failed");
                }

};
            var deviceProfile=new IMI.ICDeviceProfile(deviceId, userId);  
           //here user id is  optional (If user id not there user can call deviceID,  
             userId will be generated by IMIConnect and passed to callback function)//
          //var  deviceProfile = new IMI.ICDeviceProfile(deviceId);//
          IMI.imiconnect.register(deviceProfile, callback);
        }
    } catch (err) {
        console.log(err);
    }
</script>

<script src="../js/jquery.min.js"></script>
<script src="../js/mqttws31.js"></script>
<script src="../js/IMIClient.js"></script>
<script>
    try {
        var config = new IMI.ICConfig(appId, clientKey);
        IMI.imiconnect.startup(config);

        if (!IMI.imiconnect.isRegistered()) {
            var callback = {
                onSuccess: function() {
                    console.log("reg success");
                    //logic to subscribe to topics or publish messages
                },
                onFailure: function(errormsg) {
                    console.log("reg failed");
                }

            };
            var deviceProfile=new IMI.ICDeviceProfile(deviceId, userId);  
           //here user id is  optional (If user id not there user can call deviceID,  
             userId will be generated by IMIConnect and passed to callback function)//
          //var  deviceProfile = new IMI.ICDeviceProfile(deviceId);//
          IMI.imiconnect.register(deviceProfile, callback);
        }
    } catch (err) {
        console.log(err);
    }
</script>

Now the web push configuration is complete to display a popup when the default web page is loaded.

When the web page is loaded a popup appears. When a user clicks on Allow, unique ids are generated and stored in the profile manager. The ids generated are:

Browser

IDs

Chrome

chrome_pushid

Firefox

firefox_pushid and key

Safari

safari_pushid

To send messages without a customerid, you must use browser-specific pushids.

Sending Push Messages to Customers

You can send push messages to customers in many methods. Below is one of them:

When the customers click Allow button, the push details are stored in the profile manager.
Get the profiles based on appid using getAppProfile API. You will get all the browser-specific push ids.
Use Messaging API, to send push messages to the push ids.

Sending In-app Messages to Customers

Prerequisites

Follow steps from here to download JS SDK specific to your App.
Ensure your app asset in IMIClient.js
Ensure manifest<your_app_id>.json is present in /manifest
In Chrome Inspect, verify on console that plugin is available by typing:
IMI

Code Integration

Here is a summary of the process required to implement RT. Following these steps is JavaScript code for each step.

Startup Plugin with Asset Details
Check if user is already registered.
Register User
Connect for RTM
Register messageListener
Send message using publishMessage

Code Examples

Startup Plugin:
a. Default setup:

JavaScript

 var appId = "#####";
    var appSecret = "#####";
    var config = new IMI.ICConfig(appId, appSecret);
    IMI.IMIconnect.startup(config);

b. Specify pathConfig:
If the website is hosted within a sub-folder, use pathConfig parameter to specify folders:
assets: folder where all JS SDK files are located including ‘manifest’ folder. By default, this is derived as:
window.location.origin + '/assets';
root: folder where sw.js file is located
Important! sw.js file should always be in website root for Push notifications to work properly.

JavaScript

//Within 'your-app-folder'
var pathConfig = {
 "assets": "/your-app-folder/assets/",
 "root": "/your-app-folder/"
}
 
//Default pathConfig
var pathConfig = {
 "assets": "",
 "root": ""
}
var config = new IMI.ICConfig(appId, appSecret, pathConfig);

Provide contextPath only if using any other folder that ‘assets’. By default, contextPath is:

window.location.origin + '/assets';

To provide contextPath:

var config = new IMI.ICConfig(appId, appSecret, contextPath);

Check if user is already registered.

JavaScript

var isRegistered = IMI.IMIconnect.isRegistered();

To register user, call:

JavaScript

function register() {
var deviceID = IMI.ICDeviceProfile.getDefaultDeviceId();
   var deviceProfile = new IMI.ICDeviceProfile(deviceID,userId);
    IMI.IMIconnect.register(deviceProfile, registerCallback);
    }
  }
registerCallback = {
    onSuccess: (msg) => {
      console.log('registerCallback onSuccess');
    },
    onFailure: (err) => {
      err = err || {};
      console.log(err);
    }
  };

Connect for In-app messages.

JavaScript

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

JavaScript

var messaging = IMI.ICMessaging.getInstance();
    messaging.setICMessagingReceiver(msgCallBack);

msgCallBack = {
    onConnectionStatusChanged: (statuscode) => {
      console.log('onConnectionStatusChanged to', statuscode);
    },
    onMessageReceived: (message) => {
      console.log('onMessageReceived ', message);
      this.addReceivedMessage(message);//perform action ex: update UI.
    }
  };

In this particular SDK, even republished messages are received from messageListener.

Send message using publishMessage.

JavaScript

publishMessage = function(thread, msg, mediaIds, callback) {
    var messaging = IMI.ICMessaging.getInstance();
    var message = new IMI.ICMessage();
    message.setMessage(msg);
    message.setThread(thread);
    if (mediaIds && mediaIds.length > 0) {
        var mediaArray = [];
        mediaIds.map(m => {
            var icAttach = new IMI.ICAttachment();
            icAttach.setMediaId(m);
            mediaArray.push(icAttach);
        })
        message.setAttachments(mediaArray);
    }
    messaging.publishMessage(message, callback);
}

Parameters:

Parameter

Type

thread

ICThread

msg

String

mediaIds

Array

Updated 14 days ago

imiconnect API docs

imiconnect Developer Hub

JavaScript SDK Quickstart Guide

Private Browsing Mode

Option to download SDK initialization config file from web app asset configuration page

Prerequisites

Configuration Tasks

Setup FCM for Chrome and Firefox Browsers

Add Web Application in imiconnect

Note:

Web Push Popup

Sending Push Messages to Customers

Sending In-app Messages to Customers

Prerequisites

Code Integration

Code Examples

JavaScript SDK Quickstart Guide

Suggested Edits are limited on API Reference Pages