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

VeltCommentPinWireframe

<VeltWireframe>
    <VeltCommentPinWireframe>
        <VeltCommentPinWireframe.GhostCommentIndicator />
        <VeltCommentPinWireframe.Index />
        <VeltCommentPinWireframe.PrivateCommentIndicator />
        <VeltCommentPinWireframe.Triangle />
        <VeltCommentPinWireframe.UnreadCommentIndicator />
    </VeltCommentPinWireframe>
</VeltWireframe>

GhostCommentIndicator

<VeltWireframe>
    <VeltCommentPinWireframe.GhostCommentIndicator />
</VeltWireframe>

Index

<VeltWireframe>
    <VeltCommentPinWireframe.Index />
</VeltWireframe>

PrivateCommentIndicator

<VeltWireframe>
    <VeltCommentPinWireframe.PrivateCommentIndicator />
</VeltWireframe>

Triangle

<VeltWireframe>
    <VeltCommentPinWireframe.Triangle />
</VeltWireframe>

UnreadCommentIndicator

<VeltWireframe>
    <VeltCommentPinWireframe.UnreadCommentIndicator />
</VeltWireframe>

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

Using Props:

<VeltComments pinShadowDOM={false} />

Using API:

const commentElement = client.getCommentElement();
commentElement.enablePinShadowDOM();
commentElement.disablePinShadowDOM();

Dark Mode

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

Default: false

Using Props:

<VeltComments pinDarkMode={true}/>

Using API:

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