Skip to main content
1

Import the VeltCommentPin component and the useCommentAnnotations() hook.

Import the VeltCommentPin component and the useCommentAnnotations() hook.
import { VeltCommentPin, useCommentAnnotations } from '@veltdev/react';
2

Add custom metadata when comment is added

Use the onCommentAdd method to add custom metadata to a comment when a new comment is being added.This metadata can be used later to set the position of the Comment Pin. You need to set the mandatory commentType: 'manual' property to the metadata object.
<VeltComments onCommentAdd={(event) => yourMethod(event)} />

const yourMethod = (event) => {
  event?.addContext({ customKey: 'customValue', commentType: 'manual' });
}
3

Retrieve all Comment Annotations

Retrieve all Comment Annotations using the useCommentAnnotations() hook.To learn more about the useCommentAnnotations() hook, read here.
let commentAnnotations = useCommentAnnotations()
4

Render the Velt Comment Pin component and set the position

Add the Velt Comment Pin component and pass in the Comment Annotation Id. Now retrieve the context to retrieve the custom metadata you set earlier and use it to set the position of the Comment Pin.

let commentAnnotations = useCommentAnnotations()

return (
<div className='comments-container'>
  {
    commentAnnotations.map((commentAnnotation) => {
      return (
        <div key={commentAnnotation.annotationId} style={{
          position: 'absolute',
          left: commentAnnotation.context.position.x + dragPosition.x,
          top: commentAnnotation.context.position.y + dragPosition.y,
          transform: 'translate(0%, -100%)'
        }}>
          <VeltCommentPin annotationId={commentAnnotation.annotationId}></VeltCommentPin>
        </div>
      )
    })
  }
</div>
)

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

export default function YourDocument() {

  const yourMethod = (event) => {
    event?.addContext({ customKey: 'customValue', commentType: 'manual' });
  }

  let commentAnnotations = useCommentAnnotations()

  return (

    <VeltComments onCommentAdd={(event) => yourMethod(event)} />

    <div className='comments-container'>
      {
        commentAnnotations.map((commentAnnotation) => {
          return (
            <div key={commentAnnotation.annotationId} style={{
              position: 'absolute',
              left: commentAnnotation.context.position.x + dragPosition.x,
              top: commentAnnotation.context.position.y + dragPosition.y,
              transform: 'translate(0%, -100%)'
            }}>
              <VeltCommentPin annotationId={commentAnnotation.annotationId}></VeltCommentPin>
            </div>
          )
        })
      }
    </div>
  )
}

<script>
const veltCommentsTag = document.querySelector('velt-comments');

veltCommentsTag?.addEventListener('onCommentAdd', (event) => {
  console.log('*** onCommentAdd ***');
  console.log(event.detail);
  event.detail?.addContext({ customKey: 'customValue', commentType: 'manual'});
});

const commentElement = Velt.getCommentElement();

let subscription = commentElement.getAllCommentAnnotations().subscribe((commentAnnotations) => {
  renderCommentAnnotations(commentAnnotations);
});

const commentsContainer = document.getElementById('comments-container');

function renderCommentAnnotations(commentAnnotations) {
  commentAnnotations.forEach((commentAnnotation) => {
    if (!document.getElementById(`comment-pin-container-${commentAnnotation.annotationId}`)) {
      // Add Comment Pin if it doesn't exist
      const { x, y } = commentAnnotation.context.position;
      var commentPinContainer = document.createElement('div');
      commentPinContainer.className = 'comment-pin-container';
      commentPinContainer.id = `comment-pin-container-${commentAnnotation.annotationId}`;
      commentPinContainer.style.left = x + 'px';
      commentPinContainer.style.top = y + 'px';
      commentPinContainer.innerHTML = `<velt-comment-pin annotation-id="${commentAnnotation?.annotationId}"></velt-comment-pin>`;
      commentsContainer?.appendChild(commentPinContainer);
    }
  });
}

</script>