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

export default function App() {

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

      <div className="table">
        <div className="cell" id="cell-id-1">
          <VeltCommentTool
            targetCommentElementId="cell-id-1"
          />
        </div>
        <div className="cell" id="cell-id-2">
          <VeltCommentBubble
            targetCommentElementId="cell-id-2"
          />
        </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 Comment Tool component

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

Add the Comment Bubble component (optional)

This component accepts a target element ID & binds to the comment associated with it.

It also shows the total number of threads in the given comment.

This gives you a lot of flexibility as you can place this component anywhere and provides a more obvious affordance to your users.

<div className="table">
  <div className="cell" id="cell-id-1">
    <VeltCommentTool
      targetCommentElementId="cell-id-1"
    />
    <VeltCommentBubble
      targetCommentElementId="cell-id-1"
    />
  </div>
  <div className="cell" id="cell-id-2">
    <VeltCommentTool
      targetCommentElementId="cell-id-2"
    />
    <VeltCommentBubble
      targetCommentElementId="cell-id-2"
    />
  </div>
</div>
5

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

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.