Setup - Velt

Get Started

Key Concepts

Overview
Organizations
Documents
Locations
Users
Access Control

Async Collaboration

Comments
- Overview
- Setup
- Customize Behavior
- Comments Sidebar
- Comments Notifications
- Build Yourself - Standalone Components
  - Comment Composer
  - Comment Thread
  - Comment Pin
    - Overview
    - Setup
In-app Notifications
Inline Reactions
Recorder
View Analytics
Arrows

Realtime Collaboration

Presence
Cursors
Follow Me Mode
Huddle
Live Selection
Live State Sync
Single Editor Mode
Video Player Sync

Self-Host Data

Email Notifications

Overview

Webhooks

Security

Miscellaneous

Migrate From Cord
Common Integration Questions

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

export default function YourDocument() {

  const yourMethod = (event) => {
    event?.addContext({ postion: {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>
  )
}

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.

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

const yourMethod = (event) => {
  event?.addContext({ postion: {x: 200, y: 100}, commentType: 'manual'});
}

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

const yourMethod = (event) => {
  event?.addContext({ postion: {x: 200, y: 100}, commentType: 'manual'});
}

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

veltCommentsTag?.addEventListener('onCommentAdd', (event) => {
  console.log('*** onCommentAdd ***');
  console.log(event.detail);
  event.detail?.addContext({ postion: {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.

const context = {
  postion: {x: 200, y: 100},
};
const commentElement = useCommentUtils();
commentElement.addManualComment({ context });

const context = {
  postion: {x: 200, y: 100},
};
const commentElement = useCommentUtils();
commentElement.addManualComment({ context });

const context = {
  postion: {x: 200, y: 100},
};
const commentElement = Velt.getCommentElement();
commentElement.addManualComment({ context: context});

Retrieve all Comment Annotations

Retrieve all Comment Annotations using the useCommentAnnotations() hook.

To learn more about the useCommentAnnotations() hook, read here.

let commentAnnotations = useCommentAnnotations()

let commentAnnotations = useCommentAnnotations()

const commentElement = Velt.getCommentElement();
let subscription = commentElement.getAllCommentAnnotations().subscribe((commentAnnotations) => {
  // console.log(commentAnnotations);
});

To unsubscribe from the subscription:

subscription?.unsubscribe()

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>
)

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>
)

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);
    }
  });
}

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

export default function YourDocument() {

  const yourMethod = (event) => {
    event?.addContext({ postion: {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>
  )
}

Was this page helpful?

Overview Overview

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

export default function YourDocument() {

  const yourMethod = (event) => {
    event?.addContext({ postion: {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>
  )
}