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

export default function App() {

  return (
    <VeltProvider apiKey="API_KEY">

      <div id="scrolling-container-id">

        //This element is scrollable
        <div class="target-content">
          //This element contains the content that you want to be commented.
        </div>

        <VeltComments
          streamMode={true}
          streamViewContainerId="scrolling-container-id"
        />

      </div>

    </VeltProvider>
  );
}

  • React / Next.js

  • HTML

1

Import Comment components

Import the VeltComments component.

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

Add `VeltComments` component with Stream mode

Add the VeltComments component inside a scrolling container. Make it a sibling to the element that contains the content you want to be commented.

In the VeltComments component, mark the streamMode attribute as true.

Also set the streamViewContainerId attribute to the id of the scrolling container.

Stream mode renders all comment dialog boxes in a column on the right side similar to Google Docs. It works well with Text mode, which is enabled by default.

Setting a reference to the container ID helps us position & scroll the comment stream as the user scrolls more robustly.

<VeltProvider apiKey="API_KEY">
  <div id="scrolling-container-id">
    //This element is scrollable
    <div class="target-content">
      //This element contains the content that you want to be commented.
    </div>
    <VeltComments
      streamMode={true}
      streamViewContainerId="scrolling-container-id"
    />
  </div>
</VeltProvider>
3

Test Integration

Test it out by adding a comment.

Select any text, a Comment Tool button will appear near the highlighted text.

Click on it to add a comment and see the comment appear in the comment stream.

Was this page helpful?

Popover SetupText Setup