Notifications

The collab client comes with browser notification support. Browser notifications are the popups that the browser displays when an event of interest happens (invited to a document, new message, etc).

To enable browser notifications, you must pass a notificationHandler to the client constructor.

const client = new CollabClient({
  ...otherOptions,
  notificationHandler: (event) => {

  }
})

A notificationHandler handler is a function that accepts an event, and uses that event to display a notification. The events are documented below.

We recommend using our CollabClient.defaultNotificationHandler, as it has all the functionality needed for browser notifications built right in.

Events#

Currently there are 2 types of events: an invite event and a new message event. The type of event can be determined from the event object passed into the notificationHandler.

const client = new CollabClient({
  ...otherOptions,
  notificationHandler: (event) => {

    if(event.type === 'invite') {
      // trigger an invite notification
    }
    
    if(event.type === 'message') {
      // trigger a new message notification
    }
  }
})

New invite event#

The invite event comes with the following data:

{
  type: 'invite';
  document: Document;
  invitedBy: string
}

You can use this data to display a message such as ${invitedBy} has invited you to collaborate on ${document.name}!

New message event#

The message event comes with the following data:

{
  type: 'message';
  annotation: Annotation
}

annotation.hasMention will be true if the message mentions the current user.

Default handler#

The default notificationHandler is a nice default that implements all the functionality needed for browser notifications (permissions, messaging, etc).

To use it, call the static defaultNotificationHandler and pass the result to the notificationHandler constructor option.

import { CollabClient } from '@pdftron/collab-client'

const client = new CollabClient({
  ...otherOptions,
  notificationHandler: CollabClient.defaultNotificationHandler({
    onClick: (event) => {},
    getText: (event) => {}
  })
})

defaultNotificationHandler takes and object with two optional properties, onClick and getText.

onClick#

onClick is a function that gets called when the browser notification is clicked. It is passed the notification event as a parameter.

This could be used to route your user to a specific document, or load the document in the client when it's clicked.

import { CollabClient } from '@pdftron/collab-client'

const client = new CollabClient({
  ...otherOptions,
  notificationHandler: CollabClient.defaultNotificationHandler({
    onClick: (event) => {
      if(event.type === 'invite') {
        const { document } = event;
        document.view();
      }
    },
  })
})

If onClick is not passed, nothing will happen when the notification is clicked.

getText#

getText is a function that accepts the notification event as a parameter, and returns what the title and body of the notification should be.

The function should return an object with the following shape:

{
  title: string,
  body: string
}

This allows you to customize the text displayed in the notification.

import { CollabClient } from '@pdftron/collab-client'

const client = new CollabClient({
  ...otherOptions,
  notificationHandler: CollabClient.defaultNotificationHandler({
    getText: (event) => {
      if(event.type === 'invite') {
        return {
          title: `New invite recieved from ${event.invitedBy}`,
          body: `Click here to view ${event.document.name}`
        }
      }
    },
  })
})

Troubleshooting#

If you do not see browser notifications when you think you should, ensure that you have notifications enabled on both your browser and your computer.

Please also note that incognito windows do not show browser notifications.