Inline Comments Setup

Import the VeltProvider, VeltComments, and VeltInlineCommentsSection component.

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

• 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>

• 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>

• Add VeltInlineCommentsSection component inside your container.
• Add targetCommentElementId 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
  targetCommentElementId="container-id"
  shadowDom={false}
  dialogVariant="dialog-variant"
  variant="inline-section-variant"
  darkMode={true}
/>