​
1. AI auto categorization of comments

Whether AI auto-categorization of comments is enabled.

Default: false

We use AI to analyze your comment content and auto-categorize it so users can filter comments easily. You can provide a list of custom categories that we should use to categorize the comments (shown below).

<VeltComments autoCategorize={true} />

API Method:

const commentElement = client.getCommentElement();
commentElement.enableAutoCategorize();
commentElement.disableAutoCategorize();

​
2. Set Custom Categories

Pass custom categories in the customCategory prop.

Default categories: Question, Feedback, Bug, Other.

With custom categories, you can replace the default categories with your own values.

These categories are used in the Comments Sidebar to filter comments by category. The AI autoCategorize feature uses the list of categories to determine the closest category to choose from.

The input format to the customCategory prop should be an array of objects with an id, name, and color.

The color property is used to set the category pill background color.

<VeltComments customCategory={[
  {
    "id": "bug",
    "name": "Bug",
    "color": "red"
  }
]}/>

API Method:

const commentElement = client.getCommentElement();
commentElement.setCustomCategory([
  {
    "id": "bug",
    "name": "Bug",
    "color": "red"
  }
])

Make sure to have at least 2 categories set.

​
3. Priority

Whether to enable setting priority on comments.

Default: false

When this is on, users can assign a priority to each comment & filter comment by priority in the sidebar. You can customize the list of priority options as shown later on this page in the Set Custom Priorities section.

<VeltComments priority={true} />

API Method:

const commentElement = client.getCommentElement();
commentElement.enablePriority();
commentElement.disablePriority();

​
4. Set Custom Priorities

Pass custom priorities in the customPriority prop.

Default priorities: P0, P1, P2

With custom priorities, you can replace the default priorities with your own values. These priorities are also used in the comment sidebar to filter comments by priority.

This will work if you have enabled the priority feature.

The color property is used to set the priority pill background color.

The lightColor property sets the background color of the filter.


<VeltComments customPriority={[
  {
    "id": "low",
    "name": "Low",
    "color": "red",
    "lightColor": "pink",
  },
]}/>

API Method:

const commentElement = client.getCommentElement();
commentElement.setCustomPriority([
  {
    "id": "low",
    "name": "Low",
    "color": "red",
    "lightColor": "pink",
  },
])

Make sure to have at least 2 categories set.

​
5. Status

Whether to enable the default status dropdown & filters.

Default: true

When this is on, users can assign a status to each comment & filter comment by status in the sidebar. You can customize the list of status options as shown below on this page.

<VeltComments status={true} />

API Method:

const commentElement = client.getCommentElement();
commentElement.enableStatus();
commentElement.disableStatus();

​
6. Set Custom Statuses

Set custom statuses in the customStatus prop.

Default statuses: Open, In Progress, Resolved

With custom statuses, you can replace the default statuses with your own values. These statuses are also used in the comment sidebar to filter comments by status.

Setting the Status type using the type property:

  • default: This will be the default status assigned to each comment.
  • ongoing: This is treated as an intermediary status, you can add as many statuses with type ongoing as you want.
  • terminal: This represents a status that is completed. Comments with this status type are no longer shown in the DOM.

Setting the Status Icon using the svg property:

  • You can pass in a serialized SVG. We automatically parse and colorize SVGs. If instead you pass in an icon URL, you will have to colorize each icon yourself to match the status color.
<VeltComments customStatus={[
  {
    "id": "open",
    "name": "Open",
    "color": "white",
    "lightColor":"green",
    "type": "default",
    "svg": "<svg></svg>" // Pass in a serialized SVG
  }
]}/>

API Method:

const commentElement = client.getCommentElement();
commentElement.setCustomStatus([
  {
    "id": "open",
    "name": "Open",
    "color": "white",
    "lightColor":"green",
    "type": "default",
    "svg": "<svg></svg>" // Pass in a serialized SVG
  }
])

Make sure to have at least 2 categories set.

​
7. Resolve button

Whether to show resolve button on comments.

Default: true

This adds a tick mark button on the top right corner of the comment dialog. Clicking on this button will mark the comment as resolved.

<VeltComments resolveButton={true} />

API Method:

const commentElement = client.getCommentElement();
commentElement.enableResolveButton();
commentElement.disableResolveButton();

​
8. Moderator mode

Whether comments require moderator approval.

Default: false

By default, when a user adds a comment it is visible to all authenticated users on the same document. Moderator mode makes visibility of all comments private to only admin users and the comment author. Admin users will see an approve button on the comment dialog. Once approved the comment will be visible to all users who can access the document.

You can set some users as admin by setting the isAdmin property in the User object, during the identify() call.

<VeltComments moderatorMode={true} />

API Method:

const commentElement = client.getCommentElement();
commentElement.enableModeratorMode();
commentElement.disableModeratorMode();

​
9. Ability to accept or reject comments

Whether to enable suggestion mode to accept or reject comments.

Default: false

To accept comments, set the suggestionMode attribute to true.

<VeltComments suggestionMode={true} />

API Method:

const commentElement = client.getCommentElement();
commentElement.enableSuggestionMode();
commentElement.disableSuggestionMode();

​
10. Listen to onCommentAccept and onCommentReject events

To listen to comments that are Accepted or Rejected in Suggestion mode, pass callbacks to the onCommentAccept and onCommentReject` event handlers.

<VeltComments onCommentAccept={(event)=>yourMethod(event)}/>
<VeltComments onCommentReject={(event)=>yourMethod(event)}/>

Response:

{
    "annotationId": "ANNOTATION_ID",
    "actionUser": {
        // user object
    },
    "actionType": "accept", // accept or reject
    "annotation": {
        // raw annotation object
    },
  	"replaceContentHtml": "HTML_FORMATTED_TEXT_TO_REPLACE", // optional
  	"replaceContentText": "PLAIN_TEXT_TO_REPLACE", // optional
}

​
11. Sign In button

Whether to enable Sign In button on comment dialog when user is anonymous or signed out.

Default: false

This allows anonymous or signed out users to still read the comments but encourages them to sign in if they want to respond to the comments.

<VeltComments signInButton={true} />

API Method:

const commentElement = client.getCommentElement();
commentElement.enableSignInButton();
commentElement.disableSignInButton();

​
12. onSignIn

When the user clicks on the sign in button, we will emit an onSignIn event that you can handle with your own sign in method.

No data is passed with the event.

<VeltComments onSignIn={() => yourSignInMethod()} />

​
13. Enable/Disable private comment mode

Whether private comment mode is enabled.

Default: false

Admin users can enable private comment mode. Once private comment mode is enabled, all the newly added comment annotations by the admin user will be private comments by default, meaning only other admins can see it.

To enable private comment mode, set the privateCommentMode attribute to true:

<VeltComments privateCommentMode={true} />

API Methods: API to enable/disable private comment mode:

const commentElement = client.getCommentElement();
// To enable private comment mode
commentElement.enablePrivateCommentMode();
// To disable private comment mode
commentElement.disablePrivateCommentMode();

​
14. Enable Minimap

  • The minimap shows a bar on the edge of the screen with indicators that show where comments exist.
  • Use this to enable/disable the minimap. By default it’s disabled.
  • It can be positioned left or right. By default, it’s positioned on the right side of the screen.

Option a. Enable using config:

<VeltComments minimap={true} minimapPosition="left" />

API Method:

const commentElement = client.getCommentElement();
commentElement.enableMinimap();
commentElement.disableMinimap();

Option b. Enable using Minimap Component: This offers greater flexibility to customize and position the minimap.

<div className="relative-container">
  <VeltCommentsMinimap targetScrollableElementId="scrollableElement" position="left" />
  <div id="scrollableElement">
      {/* scrollable content */}
  </div>
</div>

<style>
  .relative-container {
    position: relative;
  }

  #scrollableElement {
    width: 100%;
    height: 200px; /* or any value */
    overflow: auto;
  }
</style>

​
15. Restrict Resolve Action to Admin Users Only

  • Restrict the resolve action to admin users and the comment author only.

Using props:

<VeltComments resolveStatusAccessAdminOnly={true} />

Using API:

const commentElement = client.getCommentElement();
// To enable resolve status access admin only
commentElement.enableResolveStatusAccessAdminOnly();
// To disable resolve status access admin only
commentElement.disableResolveStatusAccessAdminOnly();

​
16. Toggle “Seen By” Feature

Control whether the “Seen By” feature is enabled for comments. When enabled, it shows which users have seen each comment.

Default: true

Using Props:

<VeltComments seenByUsers={false} />

Using API:

const commentElement = client.getCommentElement();
commentElement.enableSeenByUsers();
commentElement.disableSeenByUsers();

Was this page helpful?

Retrieve CommentsUI/UX Controls