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

export default function App() {

  return (
    <VeltProvider apiKey="API_KEY">

      <VeltComments textMode={true} />

    </VeltProvider>
  );
}

1

Import Comment components

Import the VeltComments component.

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

Add Comment component with Text mode

Add the VeltComments component to the root of your app.

This component is required to render comments in your app.

Text mode is enabled by default. To disable it, set the textMode attribute to false.

Text mode allows users to select any text and attach comments to it similar to Google Docs.

<VeltProvider apiKey="API_KEY">
  <VeltComments textMode={true} />
</VeltProvider>
3

Test Integration

Test it out by opening the page with Velt components in your browser.

Select any text, a Comment Tool button will appear near the highlighted text. Click on it to add a comment.

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

export default function App() {

  return (
    <VeltProvider apiKey="API_KEY">

      <VeltComments textMode={true} />

    </VeltProvider>
  );
}