Comment Pin

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>

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

<velt-wireframe style="display:none;">
    <velt-comment-pin-wireframe>
        <velt-comment-pin-ghost-comment-indicator-wireframe></velt-comment-pin-ghost-comment-indicator-wireframe>
        <velt-comment-pin-index-wireframe></velt-comment-pin-index-wireframe>
        <velt-comment-pin-private-comment-indicator-wireframe></velt-comment-pin-private-comment-indicator-wireframe>
        <velt-comment-pin-triangle-wireframe></velt-comment-pin-triangle-wireframe>
        <velt-comment-pin-unread-comment-indicator-wireframe></velt-comment-pin-unread-comment-indicator-wireframe>
    </velt-comment-pin-wireframe>
</velt-wireframe>

GhostCommentIndicator

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

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

<velt-wireframe style="display:none;">
    <velt-comment-pin-ghost-comment-indicator-wireframe></velt-comment-pin-ghost-comment-indicator-wireframe>
</velt-wireframe>

Index

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

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

<velt-wireframe style="display:none;">
    <velt-comment-pin-index-wireframe></velt-comment-pin-index-wireframe>
</velt-wireframe>

PrivateCommentIndicator

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

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

<velt-wireframe style="display:none;">
    <velt-comment-pin-private-comment-indicator-wireframe></velt-comment-pin-private-comment-indicator-wireframe>
</velt-wireframe>

Triangle

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

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

<velt-wireframe style="display:none;">
    <velt-comment-pin-triangle-wireframe></velt-comment-pin-triangle-wireframe>
</velt-wireframe>

UnreadCommentIndicator

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

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

<velt-wireframe style="display:none;">
    <velt-comment-pin-unread-comment-indicator-wireframe></velt-comment-pin-unread-comment-indicator-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

Using Props:

<VeltComments pinShadowDOM={false} />

Using API:

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

Using Props:

<VeltComments pinShadowDOM={false} />

Using API:

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

Using Props:

<velt-comments pin-shadow-dom="false"></velt-comments>

Using API:

const commentElement = Velt.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();

Using Props:

<VeltComments pinDarkMode={true}/>

Using API:

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

Using Props:

<velt-comments pin-dark-mode="true"></velt-comments>

Using API:

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

Variants

Define variants for the Velt Comment Pin component. This is useful for customizing how the pin looks on different elements like charts, tables, etc.
Learn more about how to define and use variants here.

<VeltCommentPin variant="CUSTOM_VARIANT" />

Release Notes

​VeltCommentPinWireframe

​GhostCommentIndicator

​Index

​PrivateCommentIndicator

​Triangle

​UnreadCommentIndicator

​Styling

​Disable ShadowDOM

​Dark Mode

​Variants

VeltCommentPinWireframe

GhostCommentIndicator

Index

PrivateCommentIndicator

Triangle

UnreadCommentIndicator

Styling

Disable ShadowDOM

Dark Mode

Variants