Collaborative Whiteboard Bubble

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

AI Integration Quick Reference

{
  "component": "CometChatCollaborativeWhiteboardBubble",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatCollaborativeWhiteboardBubble } from \"@cometchat/chat-uikit-react\";",
  "description": "Self-extracting collaborative whiteboard bubble. Extracts the board URL from the message metadata and opens it on click.",
  "cssRootClass": ".cometchat-collaborative-bubble",
  "selfExtracting": true,
  "props": {
    "data": {
      "message": { "type": "CometChat.BaseMessage", "required": true, "note": "Drives extraction of the board URL." },
      "alignment": { "type": "\"left\" | \"right\"", "note": "Defaults to sender-vs-logged-in-user." },
      "onButtonClick": { "type": "(url: string) => void", "note": "Defaults to window.open." },
      "disabled": { "type": "boolean", "default": false },
      "className": { "type": "string" }
    }
  }
}

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

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

Collaborative Document Bubble

Render collaborative document messages

Message Bubble

The wrapper that hosts bubble content

Theming

Customize colors, fonts, and spacing