Comment Thread

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

This component is a thin wrapper around the Comment Dialog component.

VeltCommentThreadWireframe

<VeltCommentThreadWireframe>
    <VeltCommentDialogWireframe />
</VeltCommentThreadWireframe>

<velt-comment-thread-wireframe>
    <velt-comment-dialog-wireframe></velt-comment-dialog-wireframe>
</velt-comment-thread-wireframe>

You can find the wireframe for the Comment Dialog here.

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

<VeltCommentThread shadowDom={false} />

<velt-comment-thread shadow-dom="false"></velt-comment-thread>

Default: false

<VeltCommentThread darkMode={true} />

<velt-comment-thread dark-mode="true"></velt-comment-thread>

Define variants for the entire Comment Thread component. This will enable you to show different Thread UI in different parts of your app.
Alternatively, define a variant for the Comment Dialog component and use it here. This will enable you to show different Comment Dialog UI on the DOM vs here.
Learn more about how to define and use variants here.

<VeltCommentThread 
  variant="component-variant" 
  dialogVariant="dialog-variant"
/>

<velt-comment-thread 
  dialog-variant="dialog-variant"
  variant="component-variant"
></velt-comment-thread> 