Import Comment components

Import the VeltComments component and the VeltCommentTool component.

import {
} from '@veltdev/react';

Add Comment component with Inbox mode

Add the VeltComments component to the root of your app and mark the inboxMode property as true.

This component is required to render comments in your app.

This mode enable a more focused inbox style UI for each comment on the right side. Instead of showing a comment dialog box, it shows the given comment in a sidebar.

You can combine this with Freestyle, Popover, or Text mode.

<VeltProvider apiKey="API_KEY">
  <VeltComments inboxMode={true}/>

Add Comment Tool component

Add the VeltCommentTool component wherever you want to show the comment tool button.

Clicking on it initiates comment mode & changes your mouse cursor to a comment pin. Now you can click anywhere on the document to attach comments to any elements.

<div className="toolbar">
  <VeltCommentTool />

Test Integration

Test it out by opening the page with Velt components in your browser.

You should be able to leave a comment by selecting some text or using the Comment Tool.