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 the data-velt-target-inline-comment-element-id attribute to the container element.

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

Add VeltInlineCommentsSection component

Add VeltInlineCommentsSection component inside your container.

The targetInlineCommentElementId property of the VeltInlineCommentsSection component needs to match the data-velt-target-inline-comment-element-id attribute on the container. This binds the Inline Comments component with the desired container.

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