> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-e6426361.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Persistent Comment Mode Banner

> Customize the Velt Persistent Comment Mode Banner shown when persistent commenting is enabled and a user is adding a comment — override copy and styling.

<Note>
  We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components.
</Note>

## VeltPersistentCommentModeWireframe

<img src="https://mintcdn.com/velt-mintlify-e6426361/LRJ4ySK8sl63VV8A/images/customization/comments/persistent-banner/persistent-banner-overview.png?fit=max&auto=format&n=LRJ4ySK8sl63VV8A&q=85&s=5ba8b7720dd81c1954e5680d183ef491" alt="" width="1280" height="362" data-path="images/customization/comments/persistent-banner/persistent-banner-overview.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltPersistentCommentModeWireframe>
            <VeltPersistentCommentModeWireframe.CloseButton />
            <VeltPersistentCommentModeWireframe.Label />
        </VeltPersistentCommentModeWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <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>
    ```
  </Tab>
</Tabs>

## CloseButton

<img src="https://mintcdn.com/velt-mintlify-e6426361/LRJ4ySK8sl63VV8A/images/customization/comments/persistent-banner/persistent-banner-close.png?fit=max&auto=format&n=LRJ4ySK8sl63VV8A&q=85&s=cc7bdc94bf7fb4222d0b5b9d8c9b8868" alt="" width="1280" height="362" data-path="images/customization/comments/persistent-banner/persistent-banner-close.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltPersistentCommentModeWireframe.CloseButton />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-persistent-comment-mode-close-button-wireframe></velt-persistent-comment-mode-close-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## Label

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltPersistentCommentModeWireframe.Label>
            <VeltPersistentCommentModeWireframe.Label.Public />
            <VeltPersistentCommentModeWireframe.Label.Private />
        </VeltPersistentCommentModeWireframe.Label>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <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>
    ```
  </Tab>
</Tabs>

### Label.Public

<img src="https://mintcdn.com/velt-mintlify-e6426361/LRJ4ySK8sl63VV8A/images/customization/comments/persistent-banner/persistent-banner-label-public.png?fit=max&auto=format&n=LRJ4ySK8sl63VV8A&q=85&s=43957e8829bbb49a573f6141bc2d3d25" alt="" width="1280" height="362" data-path="images/customization/comments/persistent-banner/persistent-banner-label-public.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltPersistentCommentModeWireframe.Label.Public />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-persistent-comment-mode-label-public-wireframe></velt-persistent-comment-mode-label-public-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### Label.Private

<img src="https://mintcdn.com/velt-mintlify-e6426361/LRJ4ySK8sl63VV8A/images/customization/comments/persistent-banner/persistent-banner-label-private.png?fit=max&auto=format&n=LRJ4ySK8sl63VV8A&q=85&s=a385947f8b1fd2280db5f8a534f1cc09" alt="" width="1280" height="362" data-path="images/customization/comments/persistent-banner/persistent-banner-label-private.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltPersistentCommentModeWireframe.Label.Private />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-persistent-comment-mode-label-private-wireframe></velt-persistent-comment-mode-label-private-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## 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`

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltComments persistentCommentShadowDom={false}/>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comments persistent-comment-shadow-dom="false"></velt-comments>
    ```
  </Tab>
</Tabs>
