Inbox Setup

Import the VeltComments component and the VeltCommentTool component.

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

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}/>
</VeltProvider>

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

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.