Text Comment Tool

We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.

VeltTextCommentToolWireframe

<VeltWireframe>
    <VeltTextCommentToolWireframe>
        {/* Your custom element */}
    </VeltTextCommentToolWireframe>
</VeltWireframe>

<VeltWireframe>
    <VeltTextCommentToolWireframe>
        {/* Your custom element */}
    </VeltTextCommentToolWireframe>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-text-comment-tool-wireframe>
        <!-- Your custom element -->
    </velt-text-comment-tool-wireframe>
</velt-wireframe>

Styling

Disable ShadowDOM

By default, ShadowDOM is used to ensure that your app’s CSS does not interfere with the styling of the SDK components.
Disable the shadow dom to apply your custom CSS to the component.

Default: true

<VeltComments shadowDom={false} textCommentToolShadowDom={false} />

Dark Mode

By default, all components are in Light Mode, but there are several properties and methods to enable Dark Mode.

Default: false

Below are the examples to enable Dark Mode for text comment tool.

Using Props:

<VeltComments textCommentToolDarkMode={true} />

Using API:

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

Using Props:

<VeltComments textCommentToolDarkMode={true} />

Using API:

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

Using Props:

<velt-comments text-comment-tool-dark-mode="true"></velt-comments>

Using API:

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

Release Notes

​VeltTextCommentToolWireframe

​Styling

​Disable ShadowDOM

​Dark Mode

VeltTextCommentToolWireframe

Styling

Disable ShadowDOM

Dark Mode