Setup
Inline Comments Setup
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 yourVeltProvider
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
orsection
. - 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
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}
/>
Was this page helpful?