Groups

Group Chat

Pre-built customizable chat UI

Group Messaging

Group has 2 identifiers:

  1. groupId: Auto-generated by Applozic
  2. clientGroupId (optional): In case if you already have group identifier on your application side, use clientGroupId in all functions.

Open group chat

$applozic.fn.applozic('loadGroupTab', groupId);  // group Id returned in response to group create api

Open group chat using Client Group Id

$applozic.fn.applozic('loadGroupTabByClientGroupId',{'clientGroupId':clientGroupId});

Create Group

$applozic.fn.applozic('createGroup', {'groupName' : groupName,   // required
                                       'type' : 1, //(required) 1:private, 2:public, 5:broadcast,7:GroupofTwo

                                       'groupIcon' : group display image, // optional
                                       'clientGroupId' : '',      // optional
                                       'users': [{      'userId':userId1, 
                                                   'displayName':'',
                                                   'groupRole' : 3  // (optional)  USER(0), ADMIN(1), MODERATOR(2), MEMBER(3)
                                                 },
                                                 { 'userId':userId2,
                                                                'displayName':'',
                                                   'groupRole' :3  // (optional)  USER(0), ADMIN(1), MODERATOR(2), MEMBER(3)
                                                 }
                                                ],
                                                'callback' : function(response){console.log(response);}});

📘

Note

The 'type' parameter defines the type of the group. There are different types of groups available. Learn more about them here.

📘

Currently, 100 users can be added to a Public and Private group. This number can be increased on request.

Access level based on role of users in group

USER(0),               - Chat
ADMIN(1),              - Full access
MODERATOR(2)           - Add/remove users + Group Info update
MEMBER(3)              - Group Info update

Add User to Group (only for Group Admin)

$applozic.fn.applozic('addGroupMember',{'groupId': groupId,
                                        'clientGroupId': clientGroupId, //use either groupId or clientGroupId
                                        'userId': userIdToAdd,
                                        'role' :  3,  // (optional)  USER(0), ADMIN(1), MODERATOR(2), MEMBER(3)
                                        'callback': function(response) {console.log(response);}
                                        });

Remove User from Group (only for Group Admin)

$applozic.fn.applozic('removeGroupMember',{'groupId': groupId,
                                          'clientGroupId' : clientGroupId, //use either groupId or clientGroupId
                                          'userId': userIdToRemove,         
                                          'callback': function(response) {console.log(response);}
                                          });

Leave Group

$applozic.fn.applozic('leaveGroup', {'groupId' : groupId,
                                     'clientGroupId' : clientGroupId, //use either groupId or clientGroupId
                                     'callback' :function(response){console.log(response);}
                                     });

Update Group

$applozic.fn.applozic('updateGroupInfo', {'groupId' : groupId,
                                     'clientGroupId' : clientGroupId, //use either groupId or clientGroupId,
                                     'name' : groupName, // optional
                                     'imageUrl' : '',  //optional
                                     'users': [                      // required only if want to update user role
                                              {
                                                userId:userIdToUpdate, // required
                                                role:3,  // (required)    USER(0), ADMIN(1), MODERATOR(2), MEMBER(3)
                                              }],
                                     'callback' : function(response){console.log(response);}});

Get group list

$applozic.fn.applozic('getGroupList', {'callback':function (response) { //write your logic}});

Sample response:

{'status' : 'success' ,                 // or error
            'data': [ {'id': groupId,
                       'name' : groupName',
                       'type' : '2',               // 1,2,5 or 7   (private, public, broadcast or GroupofTwo)
                       'memberName':[],           // Array of group member ids
                       'adminName': '',           // Put group admin's userId
                       'removedMembersId' [],     // Array including removed or left members Id  
                       'unreadCount' : '10'       // total unread count of messages for current logged in user
                        }]

Build your UI from scratch

userId : "user unique identifier"
groupId : "group unique identifier"
clientGroupId : "group unique identifier added by customer"

Group Create

Applozic.ALApiService.createGroup({
    data:
        {
            group: {
                "groupName": "test",
                "users": [{ 'userId': 'debug3' },
                { 'userId': 'debug4' }],
                "type": 2,      //(required) 1:private, 2:public, 5:broadcast, 7:GroupofTwo, 10:Support Chat
                "metadata": {
                    "CREATE_GROUP_MESSAGE": ":adminName created group :groupName",
                    "REMOVE_MEMBER_MESSAGE": ":adminName removed :userName",
                    "ADD_MEMBER_MESSAGE": ":adminName added :userName",
                    "JOIN_MEMBER_MESSAGE": ":userName joined",
                    "GROUP_NAME_CHANGE_MESSAGE": "Group name changed to :groupName",
                    "GROUP_ICON_CHANGE_MESSAGE": "Group icon changed",
                    "GROUP_LEFT_MESSAGE": ":userName left",
                    "DELETED_GROUP_MESSAGE": ":adminName deleted group",
                    "GROUP_USER_ROLE_UPDATED_MESSAGE": ":userName is :role now",
                    "GROUP_META_DATA_UPDATED_MESSAGE": "", "ALERT": "", "HIDE": ""
                }
            }
        }, success: function (response) { console.log(response); },
    error: function () { }
});
import BaseClient, { BaseResponse, METHODS } from '../../base';
import { GroupTypes } from '../../models/Group';
import Group from '../../models/Group';

const ENDPOINT = '/rest/ws/group/v2/create';

export interface ICreateGroupRequest {
  groupName: string;
  groupMemberList: string[];
  metadata?: { [key: string]: string };
  type: GroupTypes;
  admin?: string;
  imageUrl?: string;
  users?: string[];
  clientGroupId?: string;
}

export interface CreateGroupApi {
  (data: ICreateGroupRequest): Promise<BaseResponse<Group>>;
}

const createGroupBuilder = (applozicClient: BaseClient): CreateGroupApi => {
  const userDetailsApi: CreateGroupApi = async data => {
    const response: BaseResponse<Group> = await applozicClient.makeApiCall(
      METHODS.POST,
      ENDPOINT,
      {
        data,
        useAuth: true
      }
    );
    return response;
  };
  return userDetailsApi;
};

export default createGroupBuilder;

Sample response

{
  "status": "success",
  "generatedAt": 1464854985171,  // time value at which response is generated  from server
  "response": {
    "id": 274457,                //group unique identifier
    "clientGroupId": "Client Group Id",
    "name": "Group Name",
    "adminId": "TestUser",
    "membersId": [
      "UserName2",
      "UserName1",
      "TestUser"
    ],
    "users": [
      {
        "id": "77749a25-b260-4e37-aa62-12b8dfc64657", 
        "userId": "UserId1",                         
        "connected": false,                          
        "createdAtTime": 1464854985050,              
        "unreadCount": 0,
        "deactivated": false
      },
      {
        "id": "894591fc-a48a-4e0a-ae9b-fd5125002f46",
        "userId": "UserId2",
        "connected": false,
        "createdAtTime": 1464854985062,
        "unreadCount": 0,
        "deactivated": false
      }
    ],
    "unreadCount": 0,
    "type": 2
  }
}

Group Load

Applozic.ALApiService.loadGroups({
    success: function (response) {
        console.log(response);
    },
    error: function (response) {
        console.log(response);
    }
});
import BaseClient, { BaseResponse, METHODS } from '../../base';
import Group from '../../models/Group';

const ENDPOINT = '/rest/ws/group/v2/channel';

export interface IOpenGroupRequest {
  pageSize?: number;
  endTime?: number;
}

export interface IOpenGroupResponse {
  groupPxys: Group[];
  lastFetchTime: number;
}

export interface OpenGroupApi {
  (data: IOpenGroupRequest): Promise<BaseResponse<IOpenGroupResponse>>;
}

const openGroupBuilder = (applozicClient: BaseClient): OpenGroupApi => {
  const openGroupApi: OpenGroupApi = async data => {
    const response: BaseResponse<IOpenGroupResponse> = await applozicClient.makeApiCall(
      METHODS.GET,
      ENDPOINT,
      {
        query: { ...data },
        useAuth: true
      }
    );
    return response;
  };
  return openGroupApi;
};

export default openGroupBuilder;

Sample response

{
  "status": "success",
  "generatedAt": 1465310497564,    // time value at which response is generated from server
  "response": [
    {
      "id": 496,                   //group unique identifier
      "clientGroupId": "GroupId1",
      "name": "MultiGroup1",       //group Name
      "adminId": "TestUser",
      "membersId": [
        "kevin",
        "john",
        "TestUser"
      ],
      "removedMembersId": [],
      "unreadCount": 0,
      "type": 2
    },
    {
      "id": 497,                   //group unique identifier
      "clientGroupId": "497",      //group Name
      "name": "MultiGroup2",
      "adminId": "TestUser",
      "membersId": [
        "jade",
        "TestUser"
      ],
      "removedMembersId": [],
      "unreadCount": 0,
      "type": 2
    }
  ]
}

Group Info

Applozic.ALApiService.getGroupInfo({
    data: {
            groupId: "237437",
    },
    success: function (response) { console.log(response); },
    error: function () { }
});
import BaseClient, { BaseResponse, METHODS } from '../../base';
import Group from '../../models/Group';

const ENDPOINT = '/rest/ws/group/v2/info';

export interface GroupInfoApi {
  (clientGroupId: string): Promise<Group>;
}

const groupInfoBuilder = (applozicClient: BaseClient): GroupInfoApi => {
  const groupInfoApi: GroupInfoApi = async clientGroupId => {
    const response: BaseResponse<Group> = await applozicClient.makeApiCall(
      METHODS.GET,
      ENDPOINT,
      {
        query: {
          groupId: clientGroupId
        },
        useAuth: true
      }
    );
    return response.response;
  };
  return groupInfoApi;
};

export default groupInfoBuilder;

Sample response

{
  "status": "success",
  "generatedAt": 1465310497564,
  "response": {
      "id": 237437,
      "clientGroupId": "GroupId1",         //group unique identifier
      "name": "MultiGroup1",               //group name
      "adminId": "TestUser",               //group admin Id
      "membersId": [
        "kevin",
        "john",
        "TestUser"
      ],
      "removedMembersId": [],             // Removed group members array
      "unreadCount": 0,                   // group unread count
      "type": 2,                          //group type
      "imageUrl": "https://www.applozic.com/resources/images/applozic_logo.gif",
      "createdAtTime": 1473836906978,     //group created at time
      "userCount": 3
    }
}

Add Member to group

Applozic.ALApiService.addGroupMember({
    data:
        {
            group: {
                "userId": "user unique identifier",
                "clientGroupId": "group unique identifier"
            }
        },
    success: function (response) { console.log(response); },
    error: function () { }
});
import BaseClient, { BaseResponse, METHODS } from "../../base";
import { UserRoles } from "../../models/Group";

const ENDPOINT = "/rest/ws/group/add/member";

export interface IAddUserToGroupRequest {
  userId: string;
  clientGroupId: string;
  role: UserRoles;
}

export interface AddUserToGroupApi {
  (data: IAddUserToGroupRequest): Promise<BaseResponse<string>>;
}

const addUserToGroupBuilder = (
  applozicClient: BaseClient
): AddUserToGroupApi => {
  const userDetailsApi: AddUserToGroupApi = async (data) => {
    const response: BaseResponse<string> = await applozicClient.makeApiCall(
      METHODS.POST,
      ENDPOINT,
      {
        data,
        useAuth: true,
      }
    );
    return response;
  };
  return userDetailsApi;
};

export default addUserToGroupBuilder;

Sample response

{
  "status": "success",
  "generatedAt": 1452347180639, // time value at which response is generated from server
  "response": "success"
}

Remove Group Member from group

Applozic.ALApiService.removeGroupMember({
    data: {
            "userId": "user unique identifier",
            "clientGroupId": "group unique identifier"
    },
    success: function (response) { console.log(response); },
    error: function () { }
});
import BaseClient, { BaseResponse, METHODS } from "../../base";

const ENDPOINT = "/rest/ws/group/remove/member";

export interface IRemoveUserFromGroupRequest {
  userId: string;
  clientGroupId: string;
  resetCount?: boolean;
}

export interface RemoveUserFromGroupApi {
  (data: IRemoveUserFromGroupRequest): Promise<BaseResponse<string>>;
}

const removeUserFromGroupBuilder = (
  applozicClient: BaseClient
): RemoveUserFromGroupApi => {
  const userDetailsApi: RemoveUserFromGroupApi = async (data) => {
    const response: BaseResponse<string> = await applozicClient.makeApiCall(
      METHODS.POST,
      ENDPOINT,
      {
        data,
        useAuth: true,
      }
    );
    return response;
  };
  return userDetailsApi;
};

export default removeUserFromGroupBuilder;

Sample response

{
    "userId":"user unique identifier ",
    "clientGroupId":"group unique identifier"    
}

Group Left

Applozic.ALApiService.groupLeave({
    data: {
                "clientGroupId": "group unique identifier"
    },
    success: function (response) { console.log(response); },
    error: function () { }
});

Sample Response

{
  "status": "success",
  "generatedAt": 1452347180639,  // time value at which response is generated from server
  "response": "success"
}

Group Info Update

Applozic.ALApiService.groupUpdate({
    data:
        {
          groupId: GROUP_ID,  //Replace GROUP_ID with group id value
          newName: "New name of group",
          imageUrl: "image url of the group", // optional
          user': [{       // required only if want to update user role
                    userId:'USER_ID', //Replace USER_ID with the userId whose role you want to update
                    role:2,  // (required)    USER(0), ADMIN(1), MODERATOR(2), MEMBER(3)
                        }]
        },
    success: function (response) { console.log(response); },
    error: function () { }
});
import BaseClient, { BaseResponse, METHODS } from '../../base';
import { UserRoles } from '../../models/Group';
import Group from '../../models/Group';

const ENDPOINT = '/rest/ws/group/update';

export interface IUpdateGroupUser {
  userId: string;
  role: UserRoles;
}

export interface IUpdateGroupDetailsRequest {
  groupId?: string;
  clientGroupId?: string;
  newName?: string;
  imageUrl?: string;
  metadata?: { [key: string]: string };
  users?: IUpdateGroupUser[];
}

export interface UpdateGroupDetailsApi {
  (data: IUpdateGroupDetailsRequest): Promise<BaseResponse<Group>>;
}

const updateGroupDetailsBuilder = (
  applozicClient: BaseClient
): UpdateGroupDetailsApi => {
  const userDetailsApi: UpdateGroupDetailsApi = async data => {
    const response: BaseResponse<Group> = await applozicClient.makeApiCall(
      METHODS.POST,
      ENDPOINT,
      {
        data,
        useAuth: true
      }
    );
    return response;
  };
  return userDetailsApi;
};

export default updateGroupDetailsBuilder;

Sample response

{
  "status": "success",
  "generatedAt": 1452347180639,  // time value at which response is generated from server
  "response": "success"
}

Group Mute/Unmute

To unmute pass the current time in milliseconds in notificationAfterTime parameter

Applozic.ALApiService.groupMute({
  data: { clientGroupId: clientGroupId, 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"
}

Subscribe to open group

window.Applozic.ALSocket.subscribeToOpenGroup(group);

Subscribe to open group messages

Sends messages to users who have subscribed to open group.

window.Applozic.ALSocket.onOpenGroupMessage(obj);

What’s Next
Did this page help you?