Unread Count

Unread count is the number of messages unread by a user in a particular conversation. This section will help you in getting the unread count in different scenarios.

Pre-built customizable chat UI

Total Unread Count

To show the total unread count in pre-built customizable chat UI, add 'chat-launcher-icon' class in your HTML element.

<span class="chat-launcher-icon"></span>

Individual User

Add below mentioned code in your HTML element where you want to show the unread count for an individual user.

<div class='li-user-PUT_USER_ID_HERE'><div class='mck-unread-count-text'></div></div>

Note: Replace PUT_USER_ID_HERE with the userId. For example, if the userId is 121, then HTML code should be:

<div class='li-user-121'><div class='mck-unread-count-text'></div></div>

(div can be changed to span or any other HTML element).

Individual Group

Add below mentioned code in your HTML element where you want to show the unread count for any particular group.

<div class='li-clientgroupid-PUT_CLIENT_GROUP_ID_HERE'><div class='mck-unread-count-text'></div></div>

Note: replace PUT_CLIENT_GROUP_ID_HERE with the client group id. For example, if the clientGroupId is 121, then HTML code should be:

<div class='li-clientgroupid-121'><div class='mck-unread-count-text'></div></div>

(div can be changed to span or any other HTML element).

Build your UI from scratch

Total Unread Count

The totalUnreadCount parameter in login call response will give the total unread count.

Individual User

You will get unread message count for an individual user in getMessage function.

Real-time Unread Count Update

The 'onMessageReceived' event gets triggered when a new message is received by a logged in user. Inside 'onMessageReceived' event, increase the unread count in your UI element. Here is sample code

'onMessageReceived': function(response) {
  console.log(response);
  if(response.message.contentType !==10 && response.message.contentType !== 102){
  //write your code to update unread count in UI
  }
},

When the user opens a chat thread, mark the message thread as 'read' by calling 'conversation read' function conversationReadUpdate. Post that, reduce the 'read' message count to the total unread count.


What’s Next
Did this page help you?