Collaborative Whiteboard Bubble

Renders collaborative whiteboard messages with a banner image, title, subtitle, and an action button to open the whiteboard.

Where It Fits

The collaborative whiteboard bubble uses the same CometChatCollaborativeBubble shared component as the document bubble, with iconType="whiteboard" and whiteboard-specific banner images and localization strings.

See Collaborative Document Bubble for the full API reference — the props and CSS selectors are identical.

import { CometChatCollaborativeBubble } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";
import bannerLight from "./assets/Collaborative_Whiteboard_Light.png";

function WhiteboardMessage({ url }) {
  return (
    <CometChatCollaborativeBubble
      url={url}
      variant="outgoing"
      title="Collaborative Whiteboard"
      subtitle="Open whiteboard to draw together"
      buttonText="Open Whiteboard"
      iconType="whiteboard"
      bannerImageUrl={bannerLight}
      onButtonClick={(boardUrl) => window.open(boardUrl, "", "fullscreen=yes")}
    />
  );
}

Key Difference from Document

The whiteboard plugin appends &username= to the URL before opening, so the user’s name appears on the whiteboard canvas. This is handled by the plugin’s onButtonClick callback, not by the bubble component itself.