UI/UX Controls

1. Dark Mode

Whether dark mode is enabled.

Default: false

<VeltComments darkMode={true} />

API Method:

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

<VeltComments mobileMode={true} />

API Method:

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

3. Enable Minimap

Whether the minimap is enabled.

Default: false

The minimap shows a bar on the edge of the screen with indicators that show where comments exist.

<VeltComments minimap={true} />

API Method:

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

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

To disable the feature, set scrollToComment to false.

<VeltComments scrollToComment={false}/>

API methods:

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

5. Enable pin highlighter outline

Wheter the pin highlighter outline is enabled or not.

Default: true

<VeltComments commentPinHighlighter={false} />

API Methods:

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

6. 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:

<VeltComments shadowDom={false} />

To disable ShadowDOM on individual features:

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

API methods:

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

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

<VeltComments composerMode="expanded"/>