Text Comment Tool Wireframes

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

VeltTextCommentToolWireframe

React / Next.js
Other Frameworks

<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

React / Next.js
Other Frameworks

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

<velt-comments shadow-dom="false" text-comment-tool-shadow-dom="false"></velt-comments>

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.

React / Next.js
Other Frameworks

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();

​VeltTextCommentToolWireframe

​Styling

​Disable ShadowDOM

​Dark Mode

VeltTextCommentToolWireframe

Styling

Disable ShadowDOM

Dark Mode