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

export default function App() {

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

      <div class="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>
  );
}

  • React / Next.js

  • HTML

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 class="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 class="table">
  <div className="cell" id="cell-id-1">
    <VeltCommentBubble
      targetCommentElementId="cell-id-1"
    />
  </div>
  <div className="cell" id="cell-id-2">
    <VeltCommentBubble
      targetCommentElementId="cell-id-2"
    />
  </div>
</div>
5

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?

Inbox SetupStream Setup