import {
  VeltProvider,
  VeltComments,
  VeltCommentTool,
  VeltCommentBubble
} from '@veltdev/react';

export default function App() {

  return (
    <VeltProvider apiKey="API_KEY">
      <VeltComments popoverMode={true} popoverTriangleComponent={true} />


      {/* Comment Tool next to each element */}
      <div className="table">
        <div className="cell" id="cell-id-1">
          <VeltCommentTool
            targetElementId="cell-id-1"
          />
        </div>
        <div className="cell" id="cell-id-2">
          <VeltCommentBubble
            targetElementId="cell-id-2"
          />
        </div>
      </div>

      {/* Single Comment Tool */}
      <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>

    </VeltProvider>
  );
}

1

Import Comment components

Import the VeltComments, VeltCommentTool, and VeltCommentBubble components.

import {
  VeltProvider,
  VeltComments,
  VeltCommentTool,
  VeltCommentBubble
} from '@veltdev/react';
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.

<VeltProvider apiKey="API_KEY">
  <VeltComments popoverMode={true}/>
</VeltProvider>
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 have Popover comments
  • Have a single Comment Tool and use it to pin a Popover 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 a Comment to the target element.

Once the 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.

<div className="table">
  <div className="cell" id="cell-id-1">
    <VeltCommentTool
      targetElementId="cell-id-1"
    />
  </div>
  <div className="cell" id="cell-id-2">
    <VeltCommentTool
      targetElementId="cell-id-2"
    />
  </div>
</div>

​
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 a Comment 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.

<div>
  <VeltCommentTool />
  <div className="table">
    <div className="cell" id="cell-id-A" data-velt-target-comment-element-id="cell-id-A">

    </div>
    <div className="cell" id="cell-id-B" data-velt-target-comment-element-id="cell-id-B">

    </div>
  </div>
</div>
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

There are two ways to add metadata to the comment:

  • Using Comment Tool
  • Using Comment Add Event Callback

​
a. Using Comment Tool

  <VeltCommentTool targetElementId="elementId" context={{ key1: 'value1' }} />

​
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.

The Comment Bubble 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

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
      targetElementId="cell-id-1"
    />
    <VeltCommentBubble
      commentCountType={"unread"}
      targetElementId="cell-id-1"
    />
  </div>
  <div className="cell" id="cell-id-2">
    <VeltCommentTool
      targetElementId="cell-id-2"
    />
    <VeltCommentBubble
      commentCountType={"unread"}
      targetElementId="cell-id-2"
    />
  </div>
</div>
6

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();
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.

import {
  VeltProvider,
  VeltComments,
  VeltCommentTool,
  VeltCommentBubble
} from '@veltdev/react';

export default function App() {

  return (
    <VeltProvider apiKey="API_KEY">
      <VeltComments popoverMode={true} popoverTriangleComponent={true} />


      {/* Comment Tool next to each element */}
      <div className="table">
        <div className="cell" id="cell-id-1">
          <VeltCommentTool
            targetElementId="cell-id-1"
          />
        </div>
        <div className="cell" id="cell-id-2">
          <VeltCommentBubble
            targetElementId="cell-id-2"
          />
        </div>
      </div>

      {/* Single Comment Tool */}
      <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>

    </VeltProvider>
  );
}