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

export default function App() {

  return (
    <VeltProvider apiKey="API_KEY">

      <VeltComments />

      <section id="container-id" data-velt-target-inline-comment-element-id="container-id">
        <div>Your Article</div>

        <VeltInlineCommentsSection
          targetElementId="container-id"
          shadowDom={false}
          dialogVariant="dialog-variant"
          variant="inline-section-variant"
          darkMode={true}
        />
      </section>


    </VeltProvider>
  );
}

1

Import Comment components

Import the VeltProvider, VeltComments, and VeltInlineCommentsSection component.

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

Add VeltComments component

  • Add the VeltComments component to the root of your app where your VeltProvider is.
  • This component is required to render comments in your app.
<VeltProvider apiKey="API_KEY">
  <VeltComments />
</VeltProvider>
3

Add container to hold Inline Comments component

  • Create an element to hold your Inline Comments component, such as a div or section.
  • Add a unique element id to it.
  • (optional) Set the same id to the data-velt-target-inline-comment-element-id attribute. This is used in advanced scenarios, eg: This ensures that if you add a freestyle or text comment within this container, it will appear in inline comments component too.
<section id="container-id" data-velt-target-inline-comment-element-id="container-id">
	<div>Your Article</div>
</section>
4

Add VeltInlineCommentsSection component

  • Add VeltInlineCommentsSection component inside your container.
  • Add targetElementId property to the Velt Inline Comments component. This needs to match the id you set to the container. This binds the Inline Comments component with the desired container.
<VeltInlineCommentsSection
  targetElementId="container-id"
/>
5

(Optional) Make it single threaded or multithreaded

  • Default: true
  • By default inline comment section is multithreaded.
  • You can make it single threaded by setting multiThread attribute to false.
<VeltInlineCommentsSection multiThread={false} />

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

export default function App() {

  return (
    <VeltProvider apiKey="API_KEY">

      <VeltComments />

      <section id="container-id" data-velt-target-inline-comment-element-id="container-id">
        <div>Your Article</div>

        <VeltInlineCommentsSection
          targetElementId="container-id"
          shadowDom={false}
          dialogVariant="dialog-variant"
          variant="inline-section-variant"
          darkMode={true}
        />
      </section>


    </VeltProvider>
  );
}

Was this page helpful?

Tiptap SetupLottie Player Setup