Collaborative Whiteboard Bubble

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` with valid credentials + a logged-in user; plus the Collaborative Whiteboard extension enabled in the Dashboard.
Stitching	None — self-extracting from the SDK message.
Full props	See Props.

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).

Requires the Collaborative Whiteboard extension enabled in the CometChat Dashboard. 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 to enable it, and the Plugins overview for how the UI Kit auto-routes whiteboard messages to this bubble.

Live Preview — interact with the collaborative whiteboard bubble.Open in Storybook ↗

Usage

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

Collaborative Whiteboard Plugin

Plugin behavior, context menu, and conversation preview

Enable Collaborative Whiteboard (Dashboard)

Turn on the extension that produces these messages

Collaborative Document Bubble

Render collaborative document messages

Message Bubble

The wrapper that hosts bubble content

Theming

Customize colors, fonts, and spacing

​Overview

​Usage

​Props

​message

​alignment

​onButtonClick

​disabled

​className

​CSS Selectors

​Next Steps

Collaborative Whiteboard Plugin

Enable Collaborative Whiteboard (Dashboard)

Collaborative Document Bubble

Message Bubble

Theming

Overview

Usage

Props

message

alignment

onButtonClick

disabled

className

CSS Selectors

Next Steps