Desktop notifications

TalkJS can trigger desktop notifications if a user's browser supports it (most desktop browsers do). When a new message comes in, these will pop over all windows, as long as one browser tab has your app open. This will only work, however, if the Session object is active, which is why we recommend you initialize it on every page.

The Inbox by default contains a button which allows users to set the desktop notifications to enabled. In the other chat UIs this behavior can be replicated by using setDesktopNotificationEnabled() on Session.

A notifier badge in your navigation bar

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.