Comment Thread

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

​

VeltCommentThreadWireframe

<VeltCommentThreadWireframe>
    <VeltCommentDialogWireframe />
</VeltCommentThreadWireframe>

<VeltCommentThreadWireframe>
    <VeltCommentDialogWireframe />
</VeltCommentThreadWireframe>

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

​

VeltCommentDialogWireframe

You can find the wireframe for the Comment Dialog here.

​

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

<VeltCommentThread shadowDom={false} />

<VeltCommentThread shadowDom={false} />

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

​

Dark Mode

Default: false

<VeltCommentThread darkMode={true} />

<VeltCommentThread darkMode={true} />

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

​

Variants

• 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"
/>

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

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