Popover Setup
Import Comment components
Import the VeltComments
, VeltCommentTool
, and VeltCommentBubble
components.
import {
VeltProvider,
VeltComments,
VeltCommentTool,
VeltCommentBubble
} from '@veltdev/react';
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.
<VeltProvider apiKey="API_KEY">
<VeltComments popoverMode={true}/>
</VeltProvider>
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
In Popover Mode
, you can add a Comment Tool
near each cell or element you want to comment on.
Add the <VeltCommentTool>
component on each component where you want to enable commenting.
For example, in a table you could add this tool to each cell and show it on hover or right click context menu.
You must specify a target element ID which binds the tool to that element. When users click on the Comment Tool
, it will attach a Comment
to the target element.
Once the Comment
is saved, you will notice a triangle on the top right corner of the element indicating that a Comment
is present on this element.
<div className="table">
<div className="cell" id="cell-id-1">
<VeltCommentTool
targetCommentElementId="cell-id-1"
/>
</div>
<div className="cell" id="cell-id-2">
<VeltCommentTool
targetCommentElementId="cell-id-2"
/>
</div>
</div>
b. Single Comment Tool
If you want to have a single Comment Tool
in a single location such as the navigation bar, you can do so as well.
To do this, add data-velt-target-comment-element-id
as an attribute on each element you want to add comments on.
Now, when you click on the Comment Tool
and click on the target element, it will attach a Popover
comment to the element.
You will now notice that you can 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.
<div>
<VeltCommentTool />
<div className="table">
<div className="cell" data-velt-target-comment-element-id="cell-id-A" id="cell-id-A">
</div>
<div className="cell" data-velt-target-comment-element-id="cell-id-B" id="cell-id-B">
</div>
</div>
</div>
Add the Comment Bubble component (optional)
This component accepts a target element ID & binds the comment annotation to it.
It shows the total number of replies in the given comment annotation. You also have the option to choose whether to display the total number of replies or just the unread replies.
This gives you a lot of flexibility as you can place this component anywhere and provides a more obvious affordance to your users.
Props: 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.
<div className="table">
<div className="cell" id="cell-id-1">
<VeltCommentTool
targetCommentElementId="cell-id-1"
/>
<VeltCommentBubble
commentCountType={"unread"}
targetCommentElementId="cell-id-1"
/>
</div>
<div className="cell" id="cell-id-2">
<VeltCommentTool
targetCommentElementId="cell-id-2"
/>
<VeltCommentBubble
commentCountType={"unread"}
targetCommentElementId="cell-id-2"
/>
</div>
</div>
Remove Popover Mode Triangle (optional)
You can choose to remove the triangle that appears in Popover
mode.
By default, the triangle is enabled.
<VeltComments popoverTriangleComponent={false}/>
API Method:
const commentElement = client.getCommentElement();
commentElement.enablePopoverTriangleComponent();
commentElement.disablePopoverTriangleComponent();
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.
Was this page helpful?