> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Setup

## 1. Add custom metadata when comment is added

You have two options for adding comments with custom positioning metadata:

**Option A: Velt-Managed Click Events**

* Use the `onCommentAdd` prop of the VeltComments component to add custom metadata when a comment is added.
* You need to set the mandatory `commentType: 'manual'` property to the metadata object.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltComments onCommentAdd={(event) => yourMethod(event)} />
>
> const yourMethod = (event) => {
>   event?.addContext({ position: {x: 200, y: 100}, commentType: 'manual'});
> }
> ```

> [tab] Other Frameworks
>
> ```js theme={null}
> const veltCommentsTag = document.querySelector('velt-comments');
>
> veltCommentsTag?.addEventListener('onCommentAdd', (event) => {
>   console.log('*** onCommentAdd ***');
>   console.log(event.detail);
>   event.detail?.addContext({ position: {x: 200, y: 100}, commentType: 'manual'});
> });
>
> ```

**Option B: Custom Click Event Handling**

* Handle click events on your canvas and use the `addManualComment` method to create a comment with custom metadata.

> [tab] React / Next.js
>
> ```jsx theme={null}
> const context = {
>   position: {x: 200, y: 100},
> };
> const commentElement = useCommentUtils();
> commentElement.addManualComment({ context });
> ```

> [tab] Other Frameworks
>
> ```js theme={null}
> const context = {
>   position: {x: 200, y: 100},
> };
> const commentElement = Velt.getCommentElement();
> commentElement.addManualComment({ context: context});
> ```

## 2. Retrieve all Comment Annotations

Retrieve all `Comment Annotations` using the `useCommentAnnotations()` hook.

To learn more about the `useCommentAnnotations()` hook, [read here](https://velt.dev/docs/api-reference/sdk/api/react-hooks.md#usegetcommentannotations).

> [tab] React / Next.js
>
> ```jsx theme={null}
> let commentAnnotations = useCommentAnnotations()
> ```

> [tab] Other Frameworks
>
> ```js theme={null}
> const commentElement = Velt.getCommentElement();
> let subscription = commentElement.getAllCommentAnnotations().subscribe((commentAnnotations) => {
>   // console.log(commentAnnotations);
> });
> ```
>
> To unsubscribe from the subscription:
>
> ```jsx theme={null}
> subscription?.unsubscribe()
> ```

## 3. 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`.

> [tab] React / Next.js
>
> ```jsx theme={null}
>
> 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>
> )
> ```

> [tab] Other Frameworks
>
> ```js theme={null}
> 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);
>     }
>   });
> }
>
> ```

```jsx React / Next.js theme={null}
import { VeltCommentPin, useCommentAnnotations } from '@veltdev/react';

export default function YourDocument() {

  const yourMethod = (event) => {
    event?.addContext({ position: {x: 200, y: 100}, 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>
  )
}
```

```html HTML theme={null}
<script>
const veltCommentsTag = document.querySelector('velt-comments');

veltCommentsTag?.addEventListener('onCommentAdd', (event) => {
  console.log('*** onCommentAdd ***');
  console.log(event.detail);
  event.detail?.addContext({ position: {x: 200, y: 100}, 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>
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.