Comment Composer

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

​

VeltCommentComposerWireframe

<VeltCommentComposerWireframe>
    <VeltCommentDialogWireframe.Composer />
</VeltCommentComposerWireframe>

<VeltCommentComposerWireframe>
    <VeltCommentDialogWireframe.Composer />
</VeltCommentComposerWireframe>

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

​

VeltCommentDialogWireframe.Composer

You can find the wireframe for the Comment Composer 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

<VeltCommentComposer shadowDom={false} />

<VeltCommentComposer shadowDom={false} />

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

​

Dark Mode

Default: false

<VeltCommentComposer darkMode={true} />

<VeltCommentComposer darkMode={true} />

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

​

Variants

• Define variants for the entire Comment Composer component. This will enable you to show different Composer 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.

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

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

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