Skip to main content

Documentation Index

Fetch the complete documentation index at: https://cometchat-22654f5b-react-uikit-v7.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

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.