import { VeltComments, useVeltClient } from '@veltdev/react';

import { useEffect } from 'react'

export default function YourDocument() {
  const { client } = useVeltClient();  

  useEffect(()=>{
    if(client){
      const commentElement = client.getCommentElement();

      // 1
      commentElement.getAllCommentAnnotations().subscribe((comments) => {
        // Do something with comments
      });
    }
    

  })

  return (
    <div>
        <VeltComments />
    </div>
  • React / Next.js

  • HTML

1

To retrieve comments in the frontend

To retrieve all comments in the frontend, call getCommentElement() on the Velt client and then subscribe() to getAllCommentAnnotations() and pass in a callback function.

Whenever there is a change to the comments structure, the callback function will be triggered and will contain all current comments in an array.

if (client) {
  const commentElement = client.getCommentElement();
  commentElement.getAllCommentAnnotations().subscribe((comments) => {
    // Do something with comments
  });
}
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.