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

import { useEffect } from 'react'

export default function YourDocument() {
  const { client } = useVeltClient();

  useEffect(()=>{
    if(client){
      const commentElement = client.getCommentElement();
      commentElement.allowedElementIds['some-element']; // 1
      commentElement.enableCommentTool(); // 3
      commentElement.disableCommentTool(); // 3
      commentElement.enableGhostComments(); // 4
      commentElement.disableGhostComments(); // 4
      commentElement.enableGhostCommentsIndicator(); // 5
      commentElement.disableGhostCommentsIndicator(); // 5
    }

  })

  return (
    <div>
        <div data-velt-comment-disabled></div> {/* 2 */}

        {/* 8 */}
        <div data-velt-iframe-container="true">
          <iframe src="https://www.wikipedia.org/" width="500px" height="500px"></iframe>
        </div>

        <VeltComments  
            allowedElementIds={['some-element']} {/* 1 */}
            commentTool={false}  {/* 3 */}
            ghostComments={true} {/* 4 */}
            ghostCommentsIndicator={true} {/* 5 */}

        />
    </div>
  )
}

  • React / Next.js

  • HTML

1

Allow comments only on certain elements

Provide a list of element DOM IDs where commenting should be allowed.

Comments will be disabled for all other elements. Note, this does not impact Popover mode.

<VeltComments allowedElementIds={['some-element']} />

API Method:

const commentElement = client.getCommentElement();
commentElement.allowedElementIds['some-element'];
2

Disable comments on certain elements

Disable certain elements from being commented on.

Add the data-velt-comment-disabled attribute to elements where you want to disable commenting.

<div data-velt-comment-disabled></div>
3

Enable or Disabling the Comment Tool button

Whether the Comment Tool button is Enabled.

Default: true

When the Comment Tool is disabled, it can not be used to leave comments. Other ways to leave comments, such as highlighting text, will also be disabled.

{/* `true` to enable adding comments, `false` to disable adding comments */}
<VeltComments commentTool={false} />

Using API methods:

const commentElement = client.getCommentElement();
// to enable adding comments
commentElement.enableCommentTool();
// to disable adding comments
commentElement.disableCommentTool();
4

Ghost comments

Whether to show ghost comments on the DOM.

Default: false

Ghost comments are comments that were once linked to certain content on the DOM but that content is no longer available. If this is on, we display ghost comments in gray, close to where they were originally positioned on the DOM.

<VeltComments ghostComments={true} />

API Method:

const commentElement = client.getCommentElement();
commentElement.enableGhostComments();
commentElement.disableGhostComments();
5

Ghost comments indicator

Whether to show ghost comment labels in the comment sidebar.

Default: true

Ghost comments are always shown in the comments sidebar so that users can see the history of all comments. If this is on, we show a label on the comment in the sidebar indicating that the original content on which this comment was added is no longer available. This sets better expectations with the users.

<VeltComments ghostCommentsIndicator={true} />

API Method:

const commentElement = client.getCommentElement();
commentElement.enableGhostCommentsIndicator();
commentElement.disableGhostCommentsIndicator();
6

Enabling Sidebar Button on Comment Dialog

Whether the Sidebar Button on Comment Dialogs show up.

Default: true

By Default, each Comment Dialog has a button at the bottom that will open the Comments Sidebar when clicked.

To disable it, you can set it to false:

<VeltComments sidebarButtonOnCommentDialog={true} />

API Methods:

const commentElement = client.getCommentElement();
commentElement.enableSidebarButtonOnCommentDialog()
commentElement.disableSidebarButtonOnCommentDialog()
7

Subscribing to Sidebar Button Clicks on Comment Dialog

If you want to subscribe to clicks on the Sidebar Button at the bottom of the Comment Dialog you can do so by passing a callback to the onSidebarButtonOnCommentDialogClick event handler.

<VeltComments onSidebarButtonOnCommentDialogClick={(event)=>yourMethod(event)} />

API Methods:

const commentElement = client.getCommentElement();
commentElement.onSidebarButtonOnCommentDialogClick().subscribe((event) => yourMethod(event));
8

Comments iframe support

To support comments on top of an iframe, add the data-velt-iframe-container="true" attribute in the container element of the iframe.

<div data-velt-iframe-container="true">
	<iframe src="https://www.wikipedia.org/" width="500px" height="500px"></iframe>
</div>

Was this page helpful?

Event HandlersModes