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

This component is required to render comments in your app.

<VeltProvider apiKey="API_KEY">
  <VeltComments />
</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.

Click on the Comment Tool and click anywhere on the page to add a comment.