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

# Persistent Comment Mode Banner

> The persistent comment mode banner that appears when persistent mode is enabled and user is adding a comment.

<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-40d8baa1/8TNhG6EKumP9W1bY/images/customization/comments/persistent-banner/persistent-banner-overview.png?fit=max&auto=format&n=8TNhG6EKumP9W1bY&q=85&s=16739f5f0c4de27cdb42e9179785aeac" 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-40d8baa1/8TNhG6EKumP9W1bY/images/customization/comments/persistent-banner/persistent-banner-close.png?fit=max&auto=format&n=8TNhG6EKumP9W1bY&q=85&s=af2c39db76644ddcf21146856b01a9f5" 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-40d8baa1/8TNhG6EKumP9W1bY/images/customization/comments/persistent-banner/persistent-banner-label-public.png?fit=max&auto=format&n=8TNhG6EKumP9W1bY&q=85&s=41aec72cc8a1b230a22330c2f98f6994" 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-40d8baa1/8TNhG6EKumP9W1bY/images/customization/comments/persistent-banner/persistent-banner-label-private.png?fit=max&auto=format&n=8TNhG6EKumP9W1bY&q=85&s=3093f915000c99841d699c74ae9ce07e" 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>
