Add a notification badge to show unread messages

You can notify users about new messages even when they’re not viewing the chat, by adding a notification badge to your app’s header. A common example is an icon with a red badge showing the number of unread conversations, similar to LinkedIn’s message icon:

You can add a badge with the number of unread conversations using the Unreads object, which provides event handlers for incoming messages.

For example, assuming you're using JQuery and your notifier badge is an HTML element with id="notifier-badge", you could append this code to the function body:

1session.unreads.onChange(function (unreadConversations) {
2  const amountOfUnreads = unreadConversations.length;
3
4  // Update the badge text and control visibility
5  $('#notifier-badge')
6    .text(amountOfUnreads)
7    .toggle(amountOfUnreads > 0);
8
9  // Update the tab title to show unread counts
10  if (amountOfUnreads > 0) {
11    document.title = '(' + amountOfUnreads + ') MySite';
12  } else {
13    document.title = 'MySite';
14  }
15});

The onChange event is called whenever the number of unread conversations changes, and also on startup. You can find a complete example on our examples repository on GitHub.

See the Session JavaScript API reference for additional events and features.