You may want to notify the current user of incoming messages from within your UI, even when they’re not looking at the Chatbox. A common way to do this is with a little icon button in your header with a red badge on top that shows the number of unread conversations. We call this the Notifier. For example, this is LinkedIn’s notifier:

TalkJS does not generate the notifier for you, because you’ll probably want to design it yourself. However, it’s easy 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 a HTML element with id="notifier-badge", you could append this code to the function body:

window.talkSession.unreads.on("change", function (conversationIds) {
  var amountOfUnreads = conversationIds.length;

  // update the text and hide the badge if there are
  // no unreads.
  $("#notifier-badge")
    .text(amountOfUnreads)
    .toggle(amountOfUnreads > 0);

  // update the tab title so users can easily see that they have
  // messages waiting
  if (amountOfUnreads > 0) {
    document.title = "(" + amountOfUnreads + ") MySite";
  } else {
    document.title = "MySite";
  }
});

The “change” event is called whenever the amount 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.