General Controls

​

1. Allow comments only on certain elements

Provide a list of element DOM IDs, class names, or query selectors where commenting should be allowed.

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

• React / Next.js
• HTML

<VeltComments 
  allowedElementIds={['some-element']} 
  allowedElementClassNames={["class-name-1", "class-name-2"]}
  allowedElementQuerySelectors={["#id1.class-name-1"]}
/>

API Method:

• React / Next.js
• HTML

const commentElement = client.getCommentElement();
commentElement.allowedElementIds['some-element'];
commentElement.allowedElementClassNames(["class-name-1", "class-name-2"]);
commentElement.allowedElementQuerySelectors(["#id1.class-name-1"]);

​

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 Disable 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.

• React / Next.js
• HTML

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

Using API methods:

• React / Next.js
• HTML

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.

• React / Next.js
• HTML

<VeltComments ghostComments={true} />

API Method:

• React / Next.js
• HTML

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.

• React / Next.js
• HTML

<VeltComments ghostCommentsIndicator={true} />

API Method:

• React / Next.js
• HTML

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:

• React / Next.js
• HTML

<VeltComments sidebarButtonOnCommentDialog={true} />

API Methods:

• React / Next.js
• HTML

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

​

7. Subscribing to Sidebar Button Clicks on Comment Dialog

• React / Next.js with Hooks
• React / Next.js
• HTML

import { useCommentDialogSidebarClickHandler} from '@veltdev/react';

export default function YourDocument() {

  const commentDialogSidebarClickEvent = useCommentDialogSidebarClickHandler();
  useEffect(() => {
    console.log('CommentDialog Sidebar button clicked');
  }, [commentDialogSidebarClickEvent]);

  return (
    <div>
       
    </div>
  )
}

​

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>

​

9. Enable Hotkeys

Whether Hotkeys are enabled or not. For now, the only hotkey supported is pressing c to enable comment mode.

Default: false

To enable hotkeys, set the hotkey attribute to true.

• React / Next.js
• HTML

<VeltComments hotkey={false} />

API Methods:

• React / Next.js
• HTML

const commentElement = client.getCommentElement();
// to enable hotkeys
commentElement.enableHotkey();
// to disable hotkeys
commentElement.disableHotkey();

​

10. Add Comment support on PDF Viewers

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

<!-- Add data-velt-pdf-viewer="true" attribute at container level of your pdf viewer -->
<div id="viewerContainer" data-velt-pdf-viewer="true">
    <!-- Your pdf viewer here -->
    <div id="viewer" class="pdfViewer"></div>
</div>

​

11. Hide Comments at specific Locations

Use the client.excludeLocationIds() method to make Comments at a specific Location hidden from Users.

const locationIds = ['location1', 'location2']; // list of location ids
client.excludeLocationIds(locationIds);

To reset it, you can pass an empty array:

client.excludeLocationIds([]);

​

12. Enable Comment DOM Change Detection

By default, we skip Comment DOM Change Detection when users are in Comment Mode to improve performance.

Default: false

• React / Next.js
• HTML

<VeltComments changeDetectionInCommentMode={true} />

API Methods:

• React / Next.js
• HTML

const commentElement = client.getCommentElement();
// To enable change detection when comment mode is on
commentElement.enableChangeDetectionInCommentMode();
// To disable change detection when comment mode is on
commentElement.disableChangeDetectionInCommentMode();

​

13. Submit Comment on Enter Key Press

By default, pressing enter will add a new line and pressing shift + enter will submit a comment.

If you want to change this default behavior so that pressing enter will submit a comment, you can set the enterKeyToSubmit property to true.

• React / Next.js
• HTML

<VeltComments enterKeyToSubmit={true} />

// API methods
const commentElement = client.getCommentElement();
// To enable enter key to submit a comment
commentElement.enableEnterKeyToSubmit();
// To disable enter key to submit a comment
commentElement.disableEnterKeyToSubmit();