Contacts

Web plugin contacts guide

Pre-built customizable chat UI

Populate contact list

Javascript code to load contacts

// Contacts Array
 var contactsJSON = [{"userId": "USER_1", "displayName": "Devashish",
                          "imageLink": "https://www.applozic.com/resources/images/applozic_icon.png", // image url (optional)
                          "imageData" :"Base64 encoded image data"  // or image data (optional)
                          },
                         {"userId": "USER_2", "displayName": "Adarsh",
                          "imageLink": "https://www.applozic.com/resources/images/applozic_icon.png", // image url (optional)
                          "imageData" :"Base64 encoded image data"  // or image data (optional)
                         },
                         {"userId": "USER_3", "displayName": "Shanki",
                          "imageLink": "https://www.applozic.com/resources/images/applozic_icon.png",  // image url (optional)
                          "imageData" :"Base64 encoded image data"  // or image data (optional)
                         }
                      ];

 // Function calling inside onInit(from #Step 2) after plugin initialize successfully
    onInit : function(response) {
       if (response === "success") {
          // calling function load contacts
           $applozic.fn.applozic('loadContacts', {"contacts":contactsJSON});
       } else {
          // error in user login/register (you can hide chat button or refresh page)
       }
   }

   //Set loadOwnContacts to true from Step 2
   loadOwnContacts : true,

📘

Call loadContacts function only after plugin initialize callback (see Registration onInit function for reference)

User Details

Get details of all users present in user's contact list.

$applozic.fn.applozic('getUserDetail', {callback: function(response) {
        if(response.status === 'success') {
           // write your logic
        }
     }
  });

Sample response:

{'status' : 'success' ,                     // or error
 'data':  {'totalUnreadCount': 15           // total unread count for user                              'users':                          // Array of other users detail
                      [{"userId":"USERID_1","connected":false,"lastSeenAtTime":1453462368000,"createdAtTime":1452150981000,"unreadCount":3}, 
                        {"userId":"USERID_2","connected":false,"lastSeenAtTime":1452236884000,"createdAtTime":1452236884000,"unreadCount":1}]    
                     }
           }

Build your UI from scratch

Get User Detail

Following function is for getting the user details by passing the array of userIds:

Applozic.ALApiService.getUserDetail({
    data: ["userId1", "userId2"],
    success: function (response) {
        console.log(response);
    },
    error: function () {}
});
import User from '../../models/User';
import BaseClient, { BaseResponse, METHODS } from '../../base';

const ENDPOINT = '/rest/ws/user/v2/detail';

export interface UserDetailsApi {
  (userIdList: string[]): Promise<User[]>;
}

const userDetailsBuilder = (applozicClient: BaseClient): UserDetailsApi => {
  const userDetailsApi: UserDetailsApi = async userIdList => {
    const response: BaseResponse<User[]> = await applozicClient.makeApiCall(
      METHODS.POST,
      ENDPOINT,
      {
        data: {
          userIdList
        },
        useAuth: true
      }
    );
    return response.response;
  };
  return userDetailsApi;
};

export default userDetailsBuilder;

Sample Response

[
 {
  "userId": "UserId1", // UserId of the user (String)
  "userName": "Name1", // Name of the user (String)
  "connected": true, // Current connected status of user, if "connected": true                                          //that means user is online (boolean)
  "lastSeenAtTime": 12345679,  // Timestamp of the last seen time of user (long)
  "createdAtTime": 148339090,         //  Timestamp of the user's creation (long)
  "imageLink": "http://image.url",    // Image url of the user
  "deactivated": false,               // user active/inactive status (boolean)
  "phoneNumber": "+912345678954",       // phone number of user
  "unreadCount": 10,                                // total unread message count
  "lastLoggedInAtTime": 1483342919147,//  Timestamp of the user's last logged in                                                                             //(long)
  "lastMessageAtTime": 1483343150550  //Timestamp of the user's last message                                                                                 //(long)
 },
 {
  "userId": "UserId2",                  // UserId of the user (String)
  "userName": "Name2",                  // Name of the user (String)
  "connected": true,                        // Current connected status of user (boolean)
  "lastSeenAtTime": 123456789,  // Timestamp of the last seen time of user (long) 
  "imageLink": "http://image.url" // Image url of the user
 }
]

Block User

Applozic.ALApiService.blockUser({
    data: { userId: "userId", isBlock: true },
    success: function (response) { console.log(response); }, error: function () { }
});
import BaseClient, { METHODS } from '../../base';

const ENDPOINT = '/rest/ws/user/block';

interface BlockUserRes {
  status: string;
  generatedAt: number;
  response?: string;
}

export interface BlockUserApi {
  (userId: string): Promise<BlockUserRes>;
}

const blockUserBuilder = (applozicClient: BaseClient): BlockUserApi => {
  const blockUserApi: BlockUserApi = async (userId) => {
    const response: BlockUserRes = await applozicClient.makeApiCall(
      METHODS.GET,
      ENDPOINT,
      {
        query: { userId },
        useAuth: true
      }
    );
    return response;
  };
  return blockUserApi;
};

export default blockUserBuilder;

UnBlock User

Applozic.ALApiService.unBlockUser({
    data: { userId: "userId" },
    success: function (response) { console.log(response); }, error: function () { }
});
import BaseClient, { METHODS } from '../../base';

const ENDPOINT = '/rest/ws/user/unblock';

interface UnblockUserRes {
  status: string;
  generatedAt: number;
  response?: string;
}

export interface UnblockUserApi {
  (userId: string): Promise<UnblockUserRes>;
}

const unblockUserBuilder = (applozicClient: BaseClient): UnblockUserApi => {
  const unblockUserApi: UnblockUserApi = async (userId) => {
    const response: UnblockUserRes = await applozicClient.makeApiCall(
      METHODS.GET,
      ENDPOINT,
      {
        query: { userId },
        useAuth: true
      }
    );
    return response;
  };
  return unblockUserApi;
};

export default unblockUserBuilder;

What’s Next
Did this page help you?