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.