> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-10684810.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-10684810/4uu9dAPTSHnS9ZxC/images/customization/comments/persistent-banner/persistent-banner-overview.png?fit=max&auto=format&n=4uu9dAPTSHnS9ZxC&q=85&s=589a7ab7ec515f555bb5961e658252c8" 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-10684810/4uu9dAPTSHnS9ZxC/images/customization/comments/persistent-banner/persistent-banner-close.png?fit=max&auto=format&n=4uu9dAPTSHnS9ZxC&q=85&s=62c33195464e715f6ee62723aeeefcb4" 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-10684810/4uu9dAPTSHnS9ZxC/images/customization/comments/persistent-banner/persistent-banner-label-public.png?fit=max&auto=format&n=4uu9dAPTSHnS9ZxC&q=85&s=efa837543430bf285a18a2477ba9e9e5" 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-10684810/4uu9dAPTSHnS9ZxC/images/customization/comments/persistent-banner/persistent-banner-label-private.png?fit=max&auto=format&n=4uu9dAPTSHnS9ZxC&q=85&s=5e776bf30d184cc26bbb1d38ebb1c59b" 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>
