Inline Comments Setup

React / Next.js
Other Frameworks

Import Comment components

Import the VeltProvider, VeltComments, and VeltInlineCommentsSection component.

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

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>

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.

<section id="container-id">
	<div>Your Article</div>
</section>

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"
/>

(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} />

(Optional) Customize placeholder text

Customize the placeholder text for comment, reply, and composer input fields.

<VeltInlineCommentsSection
  commentPlaceholder="Add a comment..."
  replyPlaceholder="Write a reply..."
  composerPlaceholder="Start typing..."
/>

To customize placeholder text shown when editing an existing comment or reply, use editPlaceholder, editCommentPlaceholder, and editReplyPlaceholder. See VeltInlineCommentsSectionProps for details.

(Optional) Enable message truncation

Default: false
Truncate long messages in the list, showing a Show more toggle after the specified number of lines.
Use messageTruncationLines to control the cutoff (default: 4).

<VeltInlineCommentsSection
  targetElementId="article0"
  messageTruncation={true}
  messageTruncationLines={3}
/>

Add velt-comments component

Add the Velt Comments component to the root of your app.
This component is required to render comments in your app.

<body>
  <velt-comments></velt-comments>
</body>

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.

<section id="container-id">
	<div>Your Article</div>
</section>

Add velt-inline-comments-section component

Add velt-inline-comments-section component inside your container.
Add target-element-id 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.

<velt-inline-comments-section
		target-element-id="container-id"
		shadow-dom="false"
		dialog-variant="dialog-variant"
		variant="inline-section-variant"
		dark-mode="true"
>
</velt-inline-comments-section>

(Optional) Make it single threaded or multithreaded

Default: true
By default inline comments are multithreaded.
You can make it single threaded by setting multi-thread attribute to false.

  <velt-inline-comments-section multi-thread="false">
  </velt-inline-comments-section>

(Optional) Customize placeholder text

Customize the placeholder text for comment, reply, and composer input fields.

<velt-inline-comments-section
  comment-placeholder="Add a comment..."
  reply-placeholder="Write a reply..."
  composer-placeholder="Start typing..."
>
</velt-inline-comments-section>

To customize placeholder text shown when editing an existing comment or reply, use edit-placeholder, edit-comment-placeholder, and edit-reply-placeholder. See VeltInlineCommentsSectionProps for details.

(Optional) Enable message truncation

Default: false
Truncate long messages in the list, showing a Show more toggle after the specified number of lines.
Use message-truncation-lines to control the cutoff (default: 4).

<velt-inline-comments-section
  target-element-id="article0"
  message-truncation="true"
  message-truncation-lines="3">
</velt-inline-comments-section>

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

export default function App() {

  return (
    <VeltProvider apiKey="API_KEY">

      <VeltComments />

      <section id="container-id">
        <div>Your Article</div>

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


    </VeltProvider>
  );
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Comment documentation</title>
  </head>
  <body>
    <velt-comments></velt-comments>
    <section id="container-id">
      <div>Your Article</div>

      <velt-inline-comments-section
        target-element-id="container-id"
        shadow-dom="false"
        dialog-variant="dialog-variant"
        variant="inline-section-variant"
        dark-mode="true"
      >
      </velt-inline-comments-section>
    </section>

  </body>
</html>