Documentation Index
Fetch the complete documentation index at: https://docs.velt.dev/llms.txt
Use this file to discover all available pages before exploring further.
React / Next.js
Other Frameworks
Import Comment components
Import the VeltComments component and the VeltCommentTool component.import {
VeltProvider,
VeltComments,
VeltCommentTool
} from '@veltdev/react';
Add Comments component
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 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 />
</div>
Test Integration
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.
Add Comment component
Add the comment component to your template. Try to put it as close to the root level of your <body>.This component is required to render comments in your app.<body>
<velt-comments></velt-comments>
</body>
Add Comment Tool component
Add the <velt-comment-tool> 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 class="toolbar">
<velt-comment-tool></velt-comment-tool>
</div>
Test Integration
Test it out by adding a comment.You should be able to leave comments using the Comment Tool. import {
VeltProvider,
VeltComments,
VeltCommentTool
} from '@veltdev/react';
export default function App() {
return (
<VeltProvider apiKey="API_KEY">
<VeltComments />
<div className="toolbar">
<VeltCommentTool />
</div>
</VeltProvider>
);
}
