​
1. Update Contact List

  • By default, the contact list is generated using the users in the organization and the document.
  • However, if you do not want to use that feature or want to provide a custom list of contacts, you can use this method.
  • By default, it will overwrite the current contact list. You can merge the provided contacts with the existing list by passing the merge flag as {merge:true}.
  • This method will only update the contact list in the current user session. It doens’t update the user contacts in the database or change the access control.
const contactElement = useContactUtils();

useEffect(() => {
  contactElement.updateContactList([{userId: 'userId1', name: 'User Name', email: 'user1@velt.dev'}], {merge: false});
}, [contactElement]);

​
2. Callback on Contact Selection

  • This event is triggered when a contact is selected from the contact dropdown in the Comment Dialog.
  • Use the event object to determine if the selected contact has access to the document using fields like isOrganizationContact, isDocumentContact and documentAccessType.
  • If the selected contact doesn’t have access to the document, you can show an invite dialog to the user to invite the contact to the document.

The returned data will be in the following schema:

export class UserContactSelectedPayload {
    contact!: UserContact; // Selected Contact.
    isOrganizationContact!: boolean; // Is user part of organization contact.
    isDocumentContact!: boolean; // Is user part of document contact.
    documentAccessType!: string; // Document access type.
}

const selectedContact = useContactSelected();

useEffect(() => {
  console.log('selectedContact: ', selectedContact);
}, [selectedContact]);

​
3. Enable @here feature

  • This allows you to notify all the users explicitly added to the current document.
  • It won’t notify users in the organization who are not explicitly added to the document.

const contactElement = useContactUtils();

useEffect(() => {
  contactElement.enableAtHere();
  contactElement.disableAtHere();
}, [contactElement]);

​
4. Change @here label to custom text

  • This allows you to modify the default text of the @here feature. eg: @all, @everyone, @team, etc.

Using Props:

<VeltComments atHereLabel='@all'>

Using API Method:

const contactElement = useContactUtils();

useEffect(() => {
  contactElement.setAtHereLabel('@all');
}, [contactElement]);

​
5. Change @here description

  • Customize the description that appears for the @here mention.

Using Props:

<VeltComments atHereDescription="Notify all users in this document" />

Using API Method:

const contactElement = useContactUtils();

useEffect(() => {
  contactElement.setAtHereDescription('Notify all users in this document');
}, [contactElement]);

​
6. Enable user @mentions

Whether user @mentions are enabled.

Default: true

Using props:

<VeltComments userMentions={false} />

Using API Method:

const contactElement = useContactUtils();

useEffect(() => {
  contactElement.enableUserMentions();
  contactElement.disableUserMentions();
}, [contactElement]);

​
7. Update Contact List Visibility For Organization Users

  • Sometimes you may want to show only certain types of contacts in the contact dropdown.
  • By default, organization users will see all contacts in the organization, any user groups and any contacts added to the document.
  • Using this method, you can restrict the contacts shown in the dropdown to only certain types.
  • This only affects the Organization Users and not the Document Users. Document Users will always only see contacts added to the document.

Here are the available options:

  • all: Show all the contacts
  • organization: Show organization contacts.
  • organizationUserGroup: Show organization user groups.
  • document: Show document contacts.
const contactElement = client.getContactElement();
contactElement.updateContactListScopeForOrganizationUsers(['all', 'organization', 'organizationUserGroup', 'document']);

Was this page helpful?