​
1. To retrieve comments in the frontend

To retreive all comments in the frontend, use the useCommentAnnotations() hook. The hook will return an array that contains all current comments.

Whenever there is a change to the comments structure, the hook return value will be updated to the latest change.

The hook will automatically unsubscribe from the subscription when the component dismounts.

import { useCommentAnnotations } from '@veltdev/react';

export default function YourDocument() {

  let commentAnnotations = useCommentAnnotations()

  return (
    <div>
       {commentAnnotations.map(x => <div>{x.annotationId}</div>)}
    </div>
  )
}

By default, useCommentAnnotations() will return data for the current documentId and location.

If you pass in a documentId as an argument, it will return all comments in the given documentId.

If you pass in a documentId as the first argument and a location object as the second argument, it will return all comments in the given documentId and location.

import { useCommentAnnotations } from '@veltdev/react';

export default function YourDocument() {

  let commentAnnotations = useCommentAnnotations('my-document-id', { id:'my-location-id',locationName:"MyLocationName"})

  return (
    <div>
       {commentAnnotations.map(x => <div>{x.annotationId}</div>)}
    </div>
  )
}

​
2. To retrieve comments in the backend

For this you should use our Webhook service. Let’s say you want to be notified whenever a comment is added or updated, you can provide us an endpoint and we will send the comment data to that end point as and when there is an update. You can then process it further. Note that you cannot retrieve historical comments using this.

You can enable and configure webhook in your Velt Console as shown below. After you enable this, you need to provide an endpoint url. We will make a post request to that endpoint to send the comment data.

To read more about how to configure webhooks, check out the webhooks documentation.

​
3. Get Count of Unread CommentAnnotations On Current Document

You can get the number of CommentAnnotations that have at least 1 unread Comment on the current Document by using the useUnreadCommentAnnotationCountOnCurrentDocument() hook:

const count = useUnreadCommentAnnotationCountOnCurrentDocument();
useEffect(() => {
  console.log(count, 'countObj')
}, [count])

​
4. Get Count Of Unread Comments On Current Document

You can get the number of unread Comments on the current Document by using the useUnreadCommentCountOnCurrentDocument() hook:

const count = useUnreadCommentCountOnCurrentDocument();
useEffect(() => {
  console.log(count, 'countObj')
}, [count])

​
5. Get Count Of Unread CommentAnnotations By Location Id

You can get the number of CommentAnnotations with at least 1 unread Comment by Location Id by using the useUnreadCommentAnnotationCountByLocationId() hook:

const count = useUnreadCommentAnnotationCountByLocationId(locationId);
useEffect(() => {
  console.log(count, 'countObj')
}, [count])

​
6. Get Count Of Unread Comments By Location Id

You can get the number of unread Comments by Location Id by using the useUnreadCommentCountByLocationId() hook:

const count = useUnreadCommentCountByLocationId(locationId);
useEffect(() => {
  console.log(count, 'countObj')
}, [count])

​
7. Get Count Of Unread Comments By Annotation Id

You can get the number of unread Comments by annotation id by using the useUnreadCommentCountByAnnotationId() hook:

const count = useUnreadCommentCountByAnnotationId(annotationId);
useEffect(() => {
   console.log(count, 'countObj')
}, [count])

​
8. Get Selected Comments

  • Get the currently selected comment annotations.
  • This returns an array of CommentAnnotation objects.
const commentElement = client.getCommentElement();
const subscription = commentElement.getSelectedComments().subscribe((selectedComments) => {
  console.log('Selected comments:', selectedComments);
});

Unsubscribe from the subscription when you’re done:

subscription?.unsubscribe()

​
9. Get Comment Annotation by ID

  • Retrieve a specific comment annotation by its ID.
  • By default, it will return the comment annotation for the current documentId.
  • If you pass in a documentId, it will return the comment annotation for the given documentId.

Using Hooks:

const annotation = useCommentAnnotationById({
  annotationId: '-O6W3jD0Lz3rxuDuqQFx',  // AnnotationID
  documentId: 'document-id'              // DocumentId (Optional)
});

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

Using API:

const commentElement = client.getCommentElement();

let subscription = commentElement.getCommentAnnotationById({
  annotationId: '-O6W3jD0Lz3rxuDuqQFx',  // AnnotationID
  documentId: 'document-id'              // DocumentId (Optional)
}).subscribe((annotation) => {
  console.log('annotation', annotation);
});

To unsubscribe from the subscription:

subscription?.unsubscribe()

Was this page helpful?

Multimedia FeaturesTask Management Controls