Chat APIs and In-app Messaging SDKs for Developers, by Developers

Applozic powers multi-platform Chat APIs and in-app Messaging SDKs for Android, iOS and the Web that will enable you to build advanced in-app chat solutions your users will love.

Integrate chat in your application with completely customizable UI kits, powerful messaging APIs and SDKs, developed with exceptional security measures in mind.

Documentation    API Explorer

Conversation

1:1 User Chat and Group Chat Conversations for Web Chat Plugin in Javascript

Pre-built customizable chat UI

Initiate Chat

To initiate the chat with another user using userId:

$applozic.fn.applozic('loadTab', otherUserId);

Alternatively, you can add a chat button inside your web page using 'a' tag and set 'userId' in data attribute "data-mck-id" to initiate chat between logged in user and another user.

<a href="#" class="applozic-launcher" data-mck-id="PUT_OTHER_USERID_HERE" data-mck-name="PUT_OTHER_USER_DISPLAY_NAME_HERE">CHAT BUTTON</a>

To open the chat list:

$applozic.fn.applozic('loadTab', '');

Send message

Send message from logged in user to another user

$applozic.fn.applozic('sendMessage', {
                      'to': otherUserId,           // userId of the receiver
                      'message' : messageText,     // message to send    
                      'type' : 0                  //(optional) DEFAULT(0),
                        });

Send message from logged in user to group

$applozic.fn.applozic('sendGroupMessage', 
    {'groupId' : 'GROUP_ID',       
   'clientGroupId' : 'CLIENT_GROUP_ID',   // use either groupId or clientGroupId
   'message' : messageText                          //message to send           
   });

Send message visible only to the receiver.

$applozic.fn.applozic('sendMessage',
                      {"to": otherUserId,            //userId of the receiver
                        "message" : TextMessage,     //message to send    
                        "type" : 12
                       });

Message list

$applozic.fn.applozic('messageList', 
        {'id': 'Group Id or User Id',     
      'isGroup': false,                      // True in case of group 
      'clientGroupId' : 'CLIENT_GROUP_ID', // use either groupId or clientGroupId
       'callback': function(response){ 
              // write your logic
       } 
       });

Sample response:

response = {
   'status' : 'success',                     // or error
   'messages' :[{'key': "MESSAGE_IDENTIFIER",
                'from': "SENDER_USERID",         
                'to': 'RECEIVER_USERID',
                'message': "MESSAGE_TEXT",
                'type': 'inbox or outbox',
                'status': "MESSAGE__CURRENT_STATUS", // For outbox message                                                              //(sent, delivered or read)
                          // For inbox messsage (read, unread)       
                'timeStamp': 'MESSAGE_CREATED_TIMESTAMP'          
                  }]                
                }

Context (Topic) based Chat

Context-based chat provides a way to show the topic details about the chat conversation.
It is widely used by marketplaces for buyer-seller chat where chat conversation is related to a particular product listing.

Context base chat without SMS fallback format

Add 'topicBox' and 'getTopicDetail' in 'window.applozic.init' call.
The following code will initiate a context-based chat with the topic details passed in getTopicDetail function.

window.applozic.init({
    appId: applozicApplicationKey,      //Get your application key from https://www.applozic.com
    userId: userId,                     //Logged in user's id, a unique identifier for user
    userName: username,                 //User's display name
    topicBox: true,
    getTopicDetail: function (topicId) {
        //Based on topicId, return the following details from your application
        return {
            'title': 'topic-title',      // Product title
            'subtitle': 'sub-title',     // Product subTitle or Product Id
            'link': 'image-link',        // Product image link
            'key1': 'key1',         // Small text anything like Qty (Optional).
            'value1': 'value1',     // Value of key1 ex-10 (number of quantity) Optional.
            'key2': 'key2',        // Small text anything like MRP (product price) (Optional).
            'value2': 'value2'      // Value of key2 ex-$100(Optional)
        };
    },
    onInit: function (response) {

        if (response === "success") {
            $applozic.fn.applozic('loadContextualTab', ({
                'userId': 'userId', //'groupId':'group id' in case for groups
                'topicId': '12345'
            }));
        }
    }
});

Create Context based chat

Here is the method to create topic-based chat. It will create topic-based chat with the topic details passed in topicDetail object.
Status Behavior
NEW: The previous conversation will get ended and a new conversation will be created.
OPEN: If the conversation is closed, it will be re-opened.
DEFAULT: return the conversation as it is.

Topic-based chat with an Individual user Example

$applozic.fn.applozic('loadContextualTab',({
'userId': 'debug', // userId whom you want to add in topic based chat
'topicId': "12345", //Unique identifier for product/Topic
"topicDetail" : {title : 'topic -title', // Product Title
subtitle : 'sub-title', //Product Sub-title
link : 'image-link', //Product Image Link
key1 : 'key1', //Small text anything Like qty(Optional)
value1 : 'value1' , //Value of key 1
key2 : 'key2' , //Small text anything Like MRP (product price) (Optional)
value2 : 'value2' // Value of key 2
},
'status': "new"
}));

Topic-based chat with Group Example

$applozic.fn.applozic('loadContextualTab',({
'groupId': 232107, // GroupId whom you want to add in topic based chat
'topicId': "12345", //Unique identifier for product/Topic
"topicDetail" : {title : 'topic -title', // Product Title
subtitle : 'sub-title', //Product Sub-title
link : 'image-link', //Product Image Link
key1 : 'key1', //Small text anything Like qty(Optional)
value1 : 'value1' , //Value of key 1
key2 : 'key2' , //Small text anything Like MRP (product price) (Optional)
value2 : 'value2' // Value of key 2
},
'isGroup':true,
'status': "new"
}));

Context base chat with SMS Fallback format

If you want to add SMS fallback format with context base chat then use below code:

window.applozic.init({
    appId: applozicApplicationKey,      //Get your application key from https://www.applozic.com
    userId: userId,                     //Logged in user's id, a unique identifier for user
    userName: username,                 //User's display name
    topicBox: true,
   getConversationDetail: function (topicId) {
          return convDetail = {
              "fallBackTemplatesList": [
                  {
                      "userId": "SENDER_USER_ID",
                      "fallBackTemplate": "SENDER SMS FORMAT"
                  },
                  {
                      "userId": "RECEIVER_USER_ID",
                      "fallBackTemplate": "RECEIVER SMS FORMAT"
                  }
              ],

              "topicDetail": {
                  'title': 'TOPIC-TITLE',    //Product name eg: Tesla S
                  'subtitle': 'SUB-TITLE',
                  'link': "PRODUCT-IMAGE-HYPER-LINK",
                  'key1': "KEY-1",            //Number of Quantity
                  'value1': "VALUE-1",
                  'key2': "KEY-2",            //MRP (Product price)
                  'value2': "VALUE-2"
              }

          };
      },
     onInit: function (response) {

        if (response === "success") {
            $applozic.fn.applozic('loadContextualTab', ({
                'userId': 'userId', //'groupId':'group id' in case for groups
                'topicId': '12345'
            }));
        }
    }
  });

Add a chat button inside your web page using a tag and add the following:

Class Attribute - applozic-wt-launcher 
 Data Attriutes  - mck-id, mck-name and mck-topicid
mck-id      :  User Id of the user with whom to initiate the chat
 mck-name    :  Display name of the user with whom to initiate the chat
 mck-topicId :  Unique identifier for the topic/product
<a href="#" class="applozic-wt-launcher" data-mck-id="PUT_USERID_HERE" data-mck-name="PUT_DISPLAYNAME_HERE" data-mck-topicid="PUT_TOPICID_HERE">CHAT ON TOPIC</a>

Build your UI from scratch

This section provides the functions required for designing conversation chat screens.

Custom UI Send message

Send message from logged in user to another user

 type: 5 - Sent Message, 4 - Received Message
 contentType: 0 - Standard Chat Message
 to: userId to whom the message is to be sent
 metadata: Additional key value pairs
 source (optional): 1 - WEB, 5 - DESKTOP_BROWSER, 6 - MOBILE_BROWSER
Applozic.ALApiService.sendMessage({
    data: {
        message: {
            "type": 5,
            "contentType": 0,
            "message": "hi",
            "to": "debug4",
            "metadata": {},
            "key": "mpfj2",
            "source": 1
        }
    },
    success: function (response) { console.log(response); },
    error: function () { }
});

Response contains message key.

Send message from logged in user to group

Applozic.ALApiService.sendMessage({
    data: {
        message: {
            "type": 5,
            "contentType": 0,
            "message": "hi",
            "groupId": "group-1",
            "metadata": {},
            "key": "mpfj2",
            "source": 1
        }
    },
    success: function (response) { console.log(response); },
    error: function () { }
});

Response contains message key.

Send Attachment

var file =document.getElementById("id of file input type").files[0]; 
/* Below is the example of file object
  File {
    name: "test.html",
    lastModified: 1512376706000
    lastModifiedDate: Mon Dec 04 2017 14: 08: 26 GMT + 0530(IST) { }
    size: 865
    type: "text/html"
    webkitRelativePath: ""
     }*/
 var message = {
    "type": 5,
    "message": "",
    "to": userId,        //optional, remove it if sending group message
    "groupId": groupId,  //optional, remove it if sending 1-1 message
    "metadata": {},
    "source": 1
};
window.Applozic.ALApiService.sendAttachment({
    data: {
        file: file,
        messagePxy: message
    },
    success: function (result) { },
    error: function () { }
});

📘

Note: If you upload a file on our servers then there is a size limit of 100 MB. This limit can be increased on request.

Receive message

onMessageReceived is the function under events, which is used for receiving message.
See events in authentication section.

'onMessageReceived': function(response) {
  console.log(response.message);
}

Latest message list

The latest message list is used to display the messages to the logged in user based on the communication time. This list contains only the latest messages for each user or group that the logged in user has interacted with, sorted in descending order of the communication time. The latest message comes first in the list.

Applozic.ALApiService.getMessages({data: 
                                   {startIndex:0, 
                                    mainPageSize:60
                                   }, 
                          success: function(response){console.log(response);},
                          error: function() {}});

userDetail object property

userId

unique id of a user

connected

shows online/offline, true is for Online and false is for Offline

lastSeenAtTime

last seen of that particular user

unreadCount

unread count of logged in user for that particular user

message object property

groupId

Group Id in which message is sent, for 1-1 chat, this will be null

to

who sent a message

createdAtTime

message createdAt time

type

4 incoming message, 5 outing message

message

message

{
"message":[
    {
      "key":"5-35c2957b-8de0-482b-bea9-7c5c2e1dd2f4-1452080064726",
      "userKey":"35c2957b-8de0-482b-bea9-7c5c2e1dd2f4",
      "to":"michael",
      "contactIds":"michael",
      "message":"how are you",
      "sent":true,
      "delivered":false,
      "read":false,
      "createdAtTime":1452080064000,
      "type":5,
      "source":1,
      "status":3,
      "pairedMessageKey":"4-35c2957b-8de0-482b-bea9-7c5c2e1dd2f4-1452080064726",
      "contentType":0
    }
  ]
"userDetails": [
       {
       "userId": "movers-packers",
       "userName": "movers-packers",
       "connected": false,
       "status": 0,
       "createdAtTime": 1530036296000,
       "unreadCount": 0,
       "displayName": "movers-packers",
       "deactivated": false,
       "connectedClientCount": 0,
       "active": false,
       "lastLoggedInAtTime": 1530036296150,
       "roleKey": "009facb5-9323-43f2-a166-5d236c4635cb",
       "metadata": {},
       "roleType": 1
       }]
"groupFeeds": [
        {
        "id": 249633,
        "clientGroupId": "249633",
        "name": "Vipin",
        "adminName": "debug",
        "adminId": "debug",
        "membersName": [
                      "debug4",
                      "debug5",
                      "debug"
                  ],
        "membersId": [
                      "debug5",
                      "debug4",
                      "debug",
                  ],
        "removedMembersId": [],
        "unreadCount": 0,
        "type": 10,
        "notificationAfterTime":1535740200000,
        "imageUrl": "https://kommunicate.s3.ap-south-1.amazonaws.com/profile_pic/15307922331743c951e76437b755ce5ee8ad8a06703505-vipin%2Btestkm01012018%40applozic.com.jpg",
                  "createdAtTime": 1530971244305,
                  "userCount": 3,
        "groupUsers": [
                      {
                          "userId": "debug5",
                          "role": 1
                      },
                      {
                          "userId": "debug4",
                          "role": 1
                      },
                      {
                          "userId": "debug",
                          "role": 3
                      }
                  ],
        "childKeys": [],
        "childClientGroupIds": [],
        "metadata": {
                      "HIDE": "true",
                      "GROUP_USER_ROLE_UPDATED_MESSAGE": "",
                      "DELETED_GROUP_MESSAGE": "",
                      "CONVERSATION_STATUS": "0",
                      "CREATE_GROUP_MESSAGE": "",
                      "GROUP_NAME_CHANGE_MESSAGE": "",
                      "REMOVE_MEMBER_MESSAGE": "",
                      "JOIN_MEMBER_MESSAGE": "",
                      "GROUP_LEFT_MESSAGE": "",
                      "GROUP_ICON_CHANGE_MESSAGE": "",
                      "ADD_MEMBER_MESSAGE": "",
                      "GROUP_META_DATA_UPDATED_MESSAGE": ""
                  }
              }]

}

Message list for a particular thread

The previous section explained how to create the outer message list that displays the latest messages for a particular logged in user. But what happens if the user clicks on the message in the list? The user should see a detailed list of messages with that user/group.
This section will guide you through the same.

Applozic.ALApiService.getMessages({data:
                                   {startIndex:0, 
                                    userId:userId, 
                                    pageSize:30
                                   }, 
                            success: function(response) {console.log(response);},
                            error: function() {}});

Use the below code to get the message list for a particular group:

Applozic.ALApiService.getMessages({data: {
                                    startIndex:0, 
                                    groupId:groupId,
                                    pageSize:30
                                        }, 
                           success: function(response) {console.log(response);},
                           error: function() {}});

In both of the above cases the list is sorted in ascending order. The latest message would be last in the list.

Handling pagination

You can get the batch of next 60 messages for a particular user/group by passing the createdAtTime of last message from the previous messageList.
The below code explains handling the pagination for a particular group.

Applozic.ALApiService.getMessages({data: {
                                          startIndex:0, 
                                          userId/groupId:userId/groupId, 
                                          endTime:createdAtTime of last message,
                                          pageSize:30
                                        }, 
                 success: function(response) {console.log(response);},
                 error: function() {}});

User Mute

Applozic.ALApiService.userChatMute({
  data: { userId: "userId", notificationAfterTime: "Time till you want to mute in millisceconds" },
  success: function (response) { console.log(response); }, error: function () { }
});
{
  "status": "success",
  "generatedAt": 1452347180639,  // time value at which response is generated from server
  "response": "success"
}

SyncMuteUserList

Applozic.ALApiService.syncMuteUserList({success: function(response) {console.log(response);}, error: function() {} });

Delete Conversation

If you want to delete conversation with particular user or a group

Delete by userId

Applozic.ALApiService.deleteConversation({data: {userId: 'debug2'}, success: function(response) {console.log(response);}, error: function() {}});

Delete by groupId

Applozic.ALApiService.deleteConversation({data: {groupId: 5694841}, success: function(response) {console.log(response);}, error: function() {}});

Conversation Read

Applozic.ALApiService.conversationReadUpdate({data: "groupId=groupId"/"userId=encodeURIComponent(userId)" , success: function (result) {}, error: function () { } });

How to get message updates

window.Applozic.ALSocket.onMessage(obj);

Generate image URL

1. Thumbnail URL for image

You can get thumbnail URL from the fileMeta of the message by passing the following "msg.fileMeta.thumbnailUrl".

2. Fullview URL for image

You can generate fullview URL by following the below mentioned steps.
Step-1 Get blobKey from fileMeta of the message.
Step-2 Now generate URL like this :
URL =MCK_FILE_URL + FILE_PREVIEW_URL + msg.fileMeta.blobKey;
where,
MCK_FILE_URL = "https://applozic.appspot.com";
FILE_PREVIEW_URL = "/rest/ws/aws/file/";

Updated about a year ago


What's Next

Unread Count

Conversation


1:1 User Chat and Group Chat Conversations for Web Chat Plugin in Javascript

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.