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

# Collaborative Whiteboard Plugin

> Renders collaborative whiteboard messages with a banner and 'Open Whiteboard' button.

<Accordion title="AI Integration Quick Reference">
  | Field                | Value                                                                               |
  | -------------------- | ----------------------------------------------------------------------------------- |
  | Plugin ID            | `collaborative-whiteboard`                                                          |
  | Package              | `@cometchat/chat-uikit-react`                                                       |
  | Message Types        | `extension_whiteboard`                                                              |
  | Message Categories   | `custom`                                                                            |
  | Included by Default  | Yes                                                                                 |
  | Bubble Component     | `CometChatCollaborativeBubble`                                                      |
  | Conversation Preview | Collaborative Whiteboard                                                            |
  | Context Menu         | React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately |
</Accordion>

## Overview

The Collaborative Whiteboard plugin handles messages of type `extension_whiteboard` in category `custom`. It renders a card with a whiteboard banner image, title, subtitle, and an "Open Whiteboard" button that launches the whiteboard in a new window.

<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: "700px", border: "1px solid #e0e0e0"}} title="Collaborative Whiteboard Bubble — Default" allow="clipboard-write" />

***

## Bubble Rendering

* **Banner image** — themed (light/dark) whiteboard illustration
* **Title** — "Collaborative Whiteboard"
* **Subtitle** — "Open whiteboard to draw together"
* **Button** — "Open Whiteboard" — opens the board URL in a fullscreen popup window
* Lazy-loaded — the bubble component is not included in the initial bundle

The whiteboard URL is extracted from the message's extension metadata at `@injected.extensions.whiteboard.board_url`.

***

## Context Menu Options

Standard media options: React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately.

***

## Conversation Preview

Returns: `Collaborative Whiteboard` (localized via `conversation_subtitle_collaborative_whiteboard` key)

***

## CSS Selectors

| Target       | Selector                                    |
| ------------ | ------------------------------------------- |
| Bubble root  | `.cometchat-collaborative-bubble`           |
| Banner image | `.cometchat-collaborative-bubble__banner`   |
| Title        | `.cometchat-collaborative-bubble__title`    |
| Subtitle     | `.cometchat-collaborative-bubble__subtitle` |
| Open button  | `.cometchat-collaborative-bubble__button`   |