Persistent Comment Mode Banner

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

VeltPersistentCommentModeWireframe

<VeltWireframe>
    <VeltPersistentCommentModeWireframe>
        <VeltPersistentCommentModeWireframe.CloseButton />
        <VeltPersistentCommentModeWireframe.Label />
    </VeltPersistentCommentModeWireframe>
</VeltWireframe>

<VeltWireframe>
    <VeltPersistentCommentModeWireframe>
        <VeltPersistentCommentModeWireframe.CloseButton />
        <VeltPersistentCommentModeWireframe.Label />
    </VeltPersistentCommentModeWireframe>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-persistent-comment-mode-wireframe>
        <velt-persistent-comment-mode-close-button-wireframe></velt-persistent-comment-mode-close-button-wireframe>
        <velt-persistent-comment-mode-label-wireframe></velt-persistent-comment-mode-label-wireframe>
    </velt-persistent-comment-mode-wireframe>
</velt-wireframe>

CloseButton

<VeltWireframe>
    <VeltPersistentCommentModeWireframe.CloseButton />
</VeltWireframe>

<VeltWireframe>
    <VeltPersistentCommentModeWireframe.CloseButton />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-persistent-comment-mode-close-button-wireframe></velt-persistent-comment-mode-close-button-wireframe>
</velt-wireframe>

Label

<VeltWireframe>
    <VeltPersistentCommentModeWireframe.Label>
        <VeltPersistentCommentModeWireframe.Label.Public />
        <VeltPersistentCommentModeWireframe.Label.Private />
    </VeltPersistentCommentModeWireframe.Label>
</VeltWireframe>

<VeltWireframe>
    <VeltPersistentCommentModeWireframe.Label>
        <VeltPersistentCommentModeWireframe.Label.Public />
        <VeltPersistentCommentModeWireframe.Label.Private />
    </VeltPersistentCommentModeWireframe.Label>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-persistent-comment-mode-label-wireframe>
        <velt-persistent-comment-mode-label-public-wireframe></velt-persistent-comment-mode-label-public-wireframe>
        <velt-persistent-comment-mode-label-private-wireframe></velt-persistent-comment-mode-label-private-wireframe>
    </velt-persistent-comment-mode-label-wireframe>
</velt-wireframe>

Label.Public

<VeltWireframe>
    <VeltPersistentCommentModeWireframe.Label.Public />
</VeltWireframe>

<VeltWireframe>
    <VeltPersistentCommentModeWireframe.Label.Public />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-persistent-comment-mode-label-public-wireframe></velt-persistent-comment-mode-label-public-wireframe>
</velt-wireframe>

Label.Private

<VeltWireframe>
    <VeltPersistentCommentModeWireframe.Label.Private />
</VeltWireframe>

<VeltWireframe>
    <VeltPersistentCommentModeWireframe.Label.Private />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-persistent-comment-mode-label-private-wireframe></velt-persistent-comment-mode-label-private-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

<VeltComments persistentCommentShadowDom={false}/>

Concepts

Async Collaboration

Realtime Collaboration

Persistent Comment Mode Banner

VeltPersistentCommentModeWireframe

CloseButton

Label

Label.Public

Label.Private

Styling

Disable ShadowDOM

Concepts

Async Collaboration

Realtime Collaboration

​VeltPersistentCommentModeWireframe

​CloseButton

​Label

​Label.Public

​Label.Private

​Styling

​Disable ShadowDOM

VeltPersistentCommentModeWireframe

CloseButton

Label

Label.Public

Label.Private

Styling

Disable ShadowDOM