
1
Import Comment components
Import the
VeltComments
, VeltCommentTool
, and VeltCommentBubble
components.2
Add Comments component with Popover mode
Add the
VeltComments
component to the root of your app and mark the popoverMode
property as true
.This component is required to render comments in your app.Popover mode means that comments can be attached to specific target elements. The UX pattern is very similar to commenting in Google Sheets.3
Add the Comment Tool component
There are two patterns to add the 

Comment Tool
component with Popover
comments:- Add a
Comment Tool
next to each element you want to havePopover
comments - Have a single
Comment Tool
and use it to pin aPopover
comment on a particular element
a. Comment Tool next to each element
-
Add a
Comment Tool
near each cell or element you want to comment on. For example, in a table you could add this tool to each cell and show it on hover or right click context menu. - Add unique DOM ID to each cell or element component.
-
Set the value of the
targetElementId
prop on Comment Tool as the same unique ID that you added to the cell or element component. -
When users click on the
Comment Tool
, it will attach aComment
to the target element.
Comment
is added, you will notice a triangle on the top right corner of the element indicating that a Comment
is present on this element.
b. Single Comment Tool

- Add a
Comment Tool
in a single location such as the navigation bar. - Add unique DOM ID and
data-velt-target-comment-element-id
attribute to each cell or element component. Both should have the same value. - When users click on the
Comment Tool
and click on the target element, it will attach aComment
to it. - You can now only add one
Comment Annotation
per element.
If you don’t add the
data-velt-target-comment-element-id
attribute, you will be adding multiple Comment Annotations
on the same element.4
Add Metadata to the Comment
You can add metadata to the comment, which allows you to:
- Render additional data on comments
- Position comment pins manually
- Create custom UI components
- Enable comment filtering on custom data
- Using Comment Tool
- Using Comment Add Event Callback
a. Using Comment Tool
b. Using Comment Add Event Callback
You can learn more about it here.5
Add the Comment Bubble component (optional)

Either use this or the default triangle component. Using both could cause some visual ux issues. You can turn off the triangle component by setting the
popoverTriangleComponent
prop to false
in the Velt Comments
component.- Displays a count of replies for a comment thread
- Must have the same
targetElementId
as its associated element - Can be configured to show either total replies or only unread replies
- Can be placed anywhere in your UI
commentCountType
: This prop allows you to decide which count to display.total
: Shows the total number of replies. (default)unread
: Shows the number of unread replies.
6
Remove Popover Mode Triangle (optional)

Popover
mode.By default, the triangle is enabled.7
Test Integration
Test it out by opening the page with Velt components in your browser.Click on the 
Comment Tool
and leave a comment on the target element.