> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-react-v7-feature-guides.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Collaborative Whiteboard Bubble

> A self-extracting bubble that renders a collaborative whiteboard card with a banner and an 'Open Whiteboard' button.

<Accordion title="AI Integration Quick Reference">
  | Field          | Value                                                                                                                                                                                                                             |
  | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  | Component      | `CometChatCollaborativeWhiteboardBubble`                                                                                                                                                                                          |
  | Package        | `@cometchat/chat-uikit-react`                                                                                                                                                                                                     |
  | Import         | `import { CometChatCollaborativeWhiteboardBubble } from "@cometchat/chat-uikit-react";`                                                                                                                                           |
  | CSS root class | `.cometchat-collaborative-bubble`                                                                                                                                                                                                 |
  | Primary output | Self-extracting; primary callback `onButtonClick: (url: string) => void` opens the whiteboard URL (defaults to `window.open`).                                                                                                    |
  | Prerequisites  | App wrapped in [`CometChatProvider`](/ui-kit/react/cometchat-provider) with valid credentials + a logged-in user; plus the [Collaborative Whiteboard extension](/fundamentals/collaborative-whiteboard) enabled in the Dashboard. |
  | Stitching      | None — self-extracting from the SDK message.                                                                                                                                                                                      |
  | Full props     | See [Props](#props).                                                                                                                                                                                                              |
</Accordion>

## Overview

`CometChatCollaborativeWhiteboardBubble` renders a collaborative whiteboard card — a banner image, a title, a subtitle, and an "Open Whiteboard" button. It is **self-extracting**: pass the SDK `message` and the bubble reads the board URL from the message's extension metadata (`@injected.extensions.whiteboard.board_url`), so it works standalone. Clicking the button opens the whiteboard (by default in a new window).

<Note>
  **Requires the Collaborative Whiteboard extension enabled in the [CometChat Dashboard](/fundamentals/collaborative-whiteboard).** Whiteboard messages (`extension_whiteboard`) — and the injected `board_url` this bubble reads — are only produced once the extension is turned on for your app. Without it the composer cannot create whiteboards and this bubble never renders. See the [Collaborative Whiteboard guide](/fundamentals/collaborative-whiteboard) to enable it, and the [Plugins overview](/ui-kit/react/plugins/overview#built-in-plugins) for how the UI Kit auto-routes whiteboard messages to this bubble.
</Note>

<Info>
  **Live Preview** — interact with the collaborative whiteboard bubble.

  [Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble--collaborative-whiteboard-message)
</Info>

<iframe src="https://storybook.cometchat.io/react/iframe.html?id=components-bubbles-message-bubble--collaborative-whiteboard-message&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "600px", border: "1px solid #e0e0e0"}} title="CometChat Collaborative Whiteboard Bubble — Default" allow="clipboard-write" />

***

## Usage

```tsx theme={null}
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCollaborativeWhiteboardBubble } from "@cometchat/chat-uikit-react";

function WhiteboardMessage({ message }: { message: CometChat.BaseMessage }) {
  return <CometChatCollaborativeWhiteboardBubble message={message} />;
}
```

***

## Props

### message

The collaborative-whiteboard message. The bubble extracts the URL from its metadata. **Required.**

|          |                         |
| -------- | ----------------------- |
| Type     | `CometChat.BaseMessage` |
| Required | Yes                     |

***

### alignment

Override incoming/outgoing alignment. Defaults to sender-vs-logged-in-user.

|         |                     |
| ------- | ------------------- |
| Type    | `"left" \| "right"` |
| Default | derived             |

***

### onButtonClick

Click handler for the action button. Receives the board URL. Defaults to `window.open`.

|         |                         |
| ------- | ----------------------- |
| Type    | `(url: string) => void` |
| Default | `window.open`           |

***

### disabled

Disable the action button (e.g. for a thread header preview).

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### className

Additional CSS class applied to the root element.

|         |             |
| ------- | ----------- |
| Type    | `string`    |
| Default | `undefined` |

***

## CSS Selectors

| Target              | Selector                                                                                  |
| ------------------- | ----------------------------------------------------------------------------------------- |
| Root                | `.cometchat-collaborative-bubble`                                                         |
| Whiteboard modifier | `.cometchat-collaborative-bubble--whiteboard`                                             |
| Incoming / outgoing | `.cometchat-collaborative-bubble--incoming` / `.cometchat-collaborative-bubble--outgoing` |
| Banner image        | `.cometchat-collaborative-bubble__banner-image`                                           |
| Title               | `.cometchat-collaborative-bubble__body-content-name`                                      |
| Subtitle            | `.cometchat-collaborative-bubble__body-content-description`                               |
| Open button         | `.cometchat-collaborative-bubble__button`                                                 |

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Collaborative Whiteboard Plugin" icon="chalkboard" href="/ui-kit/react/plugins/overview#built-in-plugins">
    Plugin behavior, context menu, and conversation preview
  </Card>

  <Card title="Enable Collaborative Whiteboard (Dashboard)" icon="chalkboard" href="/fundamentals/collaborative-whiteboard">
    Turn on the extension that produces these messages
  </Card>

  <Card title="Collaborative Document Bubble" icon="file-pen" href="/ui-kit/react/components/collaborative-document-bubble">
    Render collaborative document messages
  </Card>

  <Card title="Message Bubble" icon="comment" href="/ui-kit/react/components/message-bubble">
    The wrapper that hosts bubble content
  </Card>

  <Card title="Theming" icon="paintbrush" href="/ui-kit/react/theming">
    Customize colors, fonts, and spacing
  </Card>
</CardGroup>