Freestyle Setup

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

export default function App() {

  return (
    <VeltProvider apiKey="API_KEY">
      <VeltComments />

      <div className="toolbar">
        <VeltCommentTool />
      </div>
    </VeltProvider>
  );
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Comment documentation</title>
  </head>
  <body>
    <velt-comments></velt-comments>

    <div class="toolbar">
      <velt-comment-tool></velt-comment-tool>
    </div>
  </body>
</html>

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>
  );
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Comment documentation</title>
  </head>
  <body>
    <velt-comments></velt-comments>

    <div class="toolbar">
      <velt-comment-tool></velt-comment-tool>
    </div>
  </body>
</html>

Overview Page Mode Setup

⌘I