Section:

Mentions

To make the realtime collaboration flow even better, WebViewer provides APIs that can be used to capture mentions in the notes panel. The mentions contain the data that can be sent to a server, and notify other users in the same collaboration session.

Apryse Docs Image

Import user data into the viewer

The first thing to enable the mentions feature in the viewer is to import user data using setUserData.

1WebViewer(...)
2  .then(instance => {
3    const userData = [
4      {
5        value: 'John Doe', // required property
6        email: 'johndoe@gmail.com', // optional property
7        // you can have more optional properties here, and they will be passed back in the mentionChanged event callback
8      },
9      {
10        value: 'Jane Doe',
11        email: 'janedoe@gmail.com'
12      },
13    ];
14
15    instance.UI.mentions.setUserData(userData);
16  });

Provide a callback function to lookup users

Instead of providing a hardcoded list and setting user data, you can provide a callback function that will look up the users based on the user entry.

JavaScript

1WebViewer(...)
2  .then(function(instance) {
3    instance.mentions.setMentionLookupCallback(async (userData, searchTerm) => {
4      const matches = [];
5      userData.forEach((user) => {
6        if (user.name === 'John Doe') {
7          matches.push(user);
8        }
9      });
10      return matches;
11    });
12  });

Listen to the mentionChanged event to capture mentions in a comment

The instance.UI.mentions instance exposes a mentionChanged event that works in a very similar way as annotationChanged. This event will be triggered whenever a mention is added, modified, or deleted from the notes panel.

1WebViewer(...)
2  .then(instance => {
3    instance.UI.mentions.on('mentionChanged', (mentions, action) => {
4      if (action === 'add') {
5        // a new mention was just added to a comment
6      }
7
8      if (action === 'modify') {
9        // the mentioned names in a comment didn't change, but the surrounding text was changed
10      }
11
12      if (action === 'delete') {
13        // a mention was just deleted from a comment
14      }
15
16      console.log(mentions);
17      // [
18      //   {
19      //     value: 'John Doe',
20      //     email: 'johndoe@gmail.com',
21      //     annotId: '...', // the annotation to which the mention belongs to
22      //   },
23      //   {
24      //     value: 'Jane Doe',
25      //     email: 'janedoe@gmail.com'
26      //     annotId: '...',
27      //   },
28      // ]
29    })
30  });

Set the allowed trailing characters

By default, a user name won't be considered as a mention if it is followed by any characters except a space, but this setting can be changed by using the setAllowedTrailingCharacters API

1WebViewer(...)
2  .then(instance => {
3    instance.UI.mentions.setUserData([
4      {
5        value: 'John Doe',
6      },
7    ]);
8     // this is considered as a mention, because `@John Doe` is at the end of the string
9    'Hello, @John Doe'
10     // this is considered as a mention, because `@John Doe` is followed by a space
11    'Hello, @John Doe How are you?'
12     // this is NOT considered as a mention, because `@John Doe` is followed by a comma
13    '@John Doe, Hello!'
14     instance.UI.mentions.setAllowedTrailingCharacters([' ', ',']);
15     // this is now considered as a mention, because comma is an allowed trailing character
16    '@John Doe, Hello!'
17  });

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales