UI/UX Controls

​

1. Dark Mode

Whether dark mode is enabled.

Default: false

• React / Next.js
• Other Frameworks

<VeltComments darkMode={true} />

API Method:

• React / Next.js
• Other Frameworks

const commentElement = client.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();

​

2. Mobile Mode

Whether mobile mode is enabled.

When mobile mode is enabled and the screen width is small enough, comment windows will appear fixed to the bottom of the screen and full width instead of the usual popup window.

Default: false

• React / Next.js
• Other Frameworks

<VeltComments mobileMode={true} />

API Method:

• React / Next.js
• Other Frameworks

const commentElement = client.getCommentElement();
commentElement.enableMobileMode();
commentElement.disableMobileMode();

​

3. Enable / Disable Scroll to Comment on Click

Whether, users will be scrolled to the location of a Comment when it is clicked.

Default: true

By default, users will be redirected to a Comment if the comment id is provided in the url. But sometimes this experience is annoying, so we have provided a way to disable the option to automatically scroll users to the location of the Comment.

• React / Next.js
• Other Frameworks

<VeltComments scrollToComment={false}/>

API methods:

• React / Next.js
• Other Frameworks

const commentElement = client.getCommentElement();
// To enable scroll to component
commentElement.enablescrollToComment();
// To disable scroll to component
commentElement.disablescrollToComment();

​

4. Enable pin highlighter outline

Wheter the pin highlighter outline is enabled or not.

Default: true

• React / Next.js
• Other Frameworks

<VeltComments commentPinHighlighter={false} />

API Methods:

• React / Next.js
• Other Frameworks

const commentElement = client.getCommentElement();
commentElement.enableCommentPinHighlighter(); // to enable comment pin highlight
commentElement.disableCommentPinHighlighter(); // to disable comment pin highlight

​

5. Disable ShadowDOM

Whether the ShadowDOM is enabled or not on certain components.

Default: enabled

By default, a ShadowDOM is used with certain components to ensure that your application’s CSS does not interfere with the styling of the SDK components.

If you want your application’s CSS to affect the styling of the SDK components, you can disable the ShadowDOM.

To disable ShadowDOM on all Comment features:

• React / Next.js
• Other Frameworks

<VeltComments shadowDom={false} />

To disable ShadowDOM on individual features:

• React / Next.js
• Other Frameworks

<VeltComments pinShadowDom={false} dialogShadowDom={false} />
<VeltCommentsSidebar shadowDom={false} />

API methods:

• React / Next.js
• Other Frameworks

const commentElement = client.getCommentElement();
commentElement.enablePinShadowDOM();
commentElement.disablePinShadowDOM();
commentElement.enableDialogShadowDOM();
commentElement.disableDialogShadowDOM();
commentElement.enableSidebarShadowDOM();
commentElement.disableSidebarShadowDOM();

​

6. Expand Composer to show Attachments Bar

By default, the Composer in the Comments Dialog only shows the text input box and does not show the actions bar until the Composer is clicked on or the user starts typing.

You can modify this behavior by setting the Composer Mode prop to "expanded". This will make the actions bar always visible.

To keep the default behavior you can set the property to "default".

Default: "default"

• React / Next.js
• Other Frameworks

<VeltComments composerMode="expanded"/>

​

7. Set Custom Cursor

You can set custom mouse cursor when the comment mode is on. The custom cursor image must be 32 x 32 pixels.

• React / Next.js
• Other Frameworks

<VeltComments pinCursorImage={BASE64_IMAGE_STRING} />

API Methods:

• React / Next.js
• Other Frameworks

const commentElement = client.getCommentElement();
commentElement.setPinCursorImage(BASE64_IMAGE_STRING);

​

8. Show/Hide comments on DOM

Whether comments are shown on the DOM.

Default: true

By default, all the comments will be visible on DOM whenever we are able to detect to elements for that. But users can hide it from DOM if required.

There are 2 ways to show/hide comments on DOM:

Configuring attributes on the React Component:

• React / Next.js
• Other Frameworks

{/* `true` to show comments, `false` to hide comments */}
<VeltComments commentsOnDom={false} />

Using API methods:

• React / Next.js
• Other Frameworks

const commentElement = client.getCommentElement();
// to show comments on DOM
commentElement.showCommentsOnDom();
// to hide comments on DOM
commentElement.hideCommentsOnDom();

​

9. Comment dialog on hover

Whether the comment dialog shows on hover over the comment pin or the target element.

Default: true

• React / Next.js
• Other Frameworks

<VeltComments dialogOnHover={true} />

API Method:

• React / Next.js
• Other Frameworks

const commentElement = client.getCommentElement();
commentElement.enableDialogOnHover();
commentElement.disableDialogOnHover();

​

10. Comment dialog on target element click

Whether the comment dialog opens when target element is clicked. This is relevant only for Popover mode.

Default: true

• React / Next.js
• Other Frameworks

<VeltComments dialogOnTargetElementClick={true} />

API Method:

• React / Next.js
• Other Frameworks

const commentElement = client.getCommentElement();
commentElement.enableDialogOnTargetElementClick();
commentElement.disableDialogOnTargetElementClick();

​

11. Floating comment dialog

Whether floating comment dialog is shown next to comment pin on hover or click.

Default: true

• React / Next.js
• Other Frameworks

<VeltComments floatingCommentDialog={true} />

API Method:

• React / Next.js
• Other Frameworks

const commentElement = client.getCommentElement();
commentElement.enableFloatingCommentDialog();
commentElement.disableFloatingCommentDialog();

​

12. Enable Popover mode triangle

Whether the popover triangle appears when Popover Mode is enabled.

Default: true

• React / Next.js
• Other Frameworks

<VeltComments popoverTriangleComponent={true}/>

API Method:

• React / Next.js
• Other Frameworks

const commentElement = client.getCommentElement();
commentElement.enablePopoverTriangleComponent();
commentElement.disablePopoverTriangleComponent();

​

13. Show resolved comments on DOM

Whether to show resolved comments on the DOM.

Default: false

• React / Next.js
• Other Frameworks

<VeltComments resolvedCommentsOnDom={true} />

API Methods:

• React / Next.js
• Other Frameworks

const commentElement = client.getCommentElement();
// To show resolved comments on dom
commentElement.showResolvedCommentsOnDom();
// To hide resolved comments on dom
commentElement.hideResolvedCommentsOnDom();

​

14. Comment index

Whether comment index is enabled.

Default: false

This appears in the comment sidebar and on the comment pins. When this is on, we show a small icon indicating the comment index in the order of creation date. This enables users to find and navigate to the desired comment quickly.

• React / Next.js
• Other Frameworks

<VeltComments commentIndex={true} />

API Method:

• React / Next.js
• Other Frameworks

const commentElement = client.getCommentElement();
commentElement.enableCommentIndex();
commentElement.disableCommentIndex();

​

15. Device Type Info

Whether device type indicator is enabled.

Default: false

When this is on, we show additional information in the Comment Thread indicating which device the comment was created on. This is useful especially for design tools, where additional context is needed for debugging issues.

• React / Next.js
• Other Frameworks

<VeltComments deviceInfo={true} />

API Method:

• React / Next.js
• Other Frameworks

const commentElement = client.getCommentElement();
commentElement.enableDeviceInfo();
commentElement.disableDeviceInfo();

​

16. Device Indicator on Comment Pins

Whether the device type indicator on Comment Pins is enabled.

Default: false

When this is on, we show a small device type icon on the Comment Pin indicating which device the comment was created on. This is useful especially for design tools, where additional context is needed for debugging issues.

• React / Next.js
• Other Frameworks

<VeltComments deviceIndicatorOnCommentPins={true} />

API Method:

• React / Next.js
• Other Frameworks

const commentElement = client.getCommentElement();
commentElement.enableDeviceIndicatorOnCommentPins();
commentElement.disableDeviceIndicatorOnCommentPins();

​

17. Enable Verbose Mode for Unread Comments

Whether verbose mode is enabled for unread Comments.

Default: 'minimal'

Unread Comments can be in minimal mode or verbose mode.

In minimal mode, a small red dot indicator appears for unread Comments.

In verbose mode, a larger badge with the text “UNREAD” will appear for unread Comments.

• React / Next.js
• Other Frameworks

<VeltComments unreadIndicatorMode={"verbose"} />

API Method:

• React / Next.js
• Other Frameworks

const commentElement = client.getCommentElement();
commentElement.setUnreadIndicatorMode("verbose"); // use badge with text UNREAD
commentElement.setUnreadIndicatorMode("minimal"); // use small red dot indicator

​

18. Show Unread Comments Count on Comment Bubble Component

Whether to show unread or total comment replies count on Comment Bubble Component.

Default: 'total'

• React / Next.js
• Other Frameworks

<VeltCommentBubble commentCountType={"unread"} />

​

19. Enable Comment Bubble on Comment Pin

Show a Comment Bubble when user hovers or clicks on the Comment Pin vs showing the Comment Dialog. The comment dialog will open only on clicking the comment bubble.

Default: 'false'

• React / Next.js with Hooks
• React / Next.js
• Other Frameworks

<VeltComments bubbleOnPin={true} />

const commentElement = useCommentUtils();
commentElement.enableBubbleOnPin();
commentElement.disableBubbleOnPin();

​

20. Enable showing Comment Bubble when hovering on the Comment Pin

Show a Comment Bubble when user hovers on the Comment Pin vs clicks on it.

Default: 'true'

• React / Next.js with Hooks
• React / Next.js
• Other Frameworks

<VeltComments bubbleOnPin={true} bubbleOnPinHover={false} />

const commentElement = useCommentUtils();

// To enable/disable showing bubble on pin
commentElement.enableBubbleOnPin();
commentElement.disableBubbleOnPin();

// To enable/disable showing bubble on hover
commentElement.enableBubbleOnPinHover();
commentElement.disableBubbleOnPinHover();

​

21. Control Collapsed Comments

You can control whether comments inside the annotation should be collapsed.

Default: true

• React / Next.js
• Other Frameworks

<VeltComments collapsedComments={false} />

const commentElement = client.getCommentElement();
// To enable collapsed comments
commentElement.enableCollapsedComments();
// To disable collapsed comments
commentElement.disableCollapsedComments();