The Comment Pin component allows you to manually set the position of Comment Annotations. This feature is particularly useful for complex UIs where you need precise control over the placement of Comment Pins.

Implementing this feature involves:

1. Adding comment: You have two options for adding comments with custom positioning:

  • a. Velt-Managed Click Events: Use the onCommentAdd method to incorporate custom metadata into the comment object. This metadata will be used later to position the Comment Pin. Learn more

  • b. Custom Click Event Handling: Handle click events on your canvas and use the addManualComment method to create a comment with custom metadata. Learn more

2. Retrieving comments data: Use the getAllCommentAnnotations method to fetch all Comment Annotations with their associated custom metadata. For React developers, we provide hooks for easier integration. Learn more

3. Rendering comments Pins: Iterate through the retrieved annotations and render the Comment Pin component, using the custom metadata to set each pin’s position.

Was this page helpful?

VariantsSetup