Browser Notifications

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.

Browser Permissions

The user will need to grant the browser permission to show notifications before this feature can be enabled. TalkJS automatically triggers this permission dialog when notifications are first enabled. Additionally, you can listen to the onBrowserPermissionNeeded and onBrowserPermissionDenied events to amend this permission flow with your own dialogs or help messages.

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:

Navbar in an app showing a notification

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:

1session.unreads.onChange(function (unreadConversations) {
2 const amountOfUnreads = unreadConversations.length;
3
4 // update the text and hide the badge if there are
5 // no unreads.
6 $('#notifier-badge')
7 .text(amountOfUnreads)
8 .toggle(amountOfUnreads > 0);
9
10 // update the tab title so users can easily see that they have
11 // messages waiting
12 if (amountOfUnreads > 0) {
13 document.title = '(' + amountOfUnreads + ') MySite';
14 } else {
15 document.title = 'MySite';
16 }
17});

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.