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.

 

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.

You’ve successfully subscribed to TalkJS
Welcome back! You’ve successfully signed in.
Great! You’ve successfully signed up.
Your link has expired
Success! Check your email for magic link to sign-in.