Call Bubble

A self-extracting bubble for direct-call / meeting messages, with a call icon, title, timestamp, and a Join button.

AI Integration Quick Reference

{
  "component": "CometChatCallBubble",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatCallBubble } from \"@cometchat/chat-uikit-react\";",
  "description": "Self-extracting call bubble for meeting / direct-call custom messages. Derives the call type, session ID, title, icon, and timestamp from the message.",
  "cssRootClass": ".cometchat-call-bubble",
  "selfExtracting": true,
  "props": {
    "data": {
      "message": { "type": "CometChat.BaseMessage", "required": true, "note": "The meeting/direct-call message; drives extraction." },
      "alignment": { "type": "\"left\" | \"right\"", "note": "Defaults to sender-vs-logged-in-user." },
      "onJoinClick": { "type": "(sessionId: string) => void" },
      "className": { "type": "string" }
    }
  }
}

Overview

CometChatCallBubble renders a direct-call / meeting message — a call icon, a title, a timestamp subtitle, and a Join button. It is self-extracting: pass the SDK message and the bubble derives the call type, session ID, title, icon, and timestamp itself, so it works standalone. Use onJoinClick to start the call when the user taps Join.

Live Preview — interact with the call bubble.

Open in Storybook ↗

---

Usage

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatCallBubble } from "@cometchat/chat-uikit-react";

function MeetingMessage({ message }: { message: CometChat.BaseMessage }) {
  return (
    <CometChatCallBubble
      message={message}
      onJoinClick={(sessionId) => {
        // Start / join the call session
      }}
    />
  );
}

---

Props

message

The meeting / direct-call custom message. The bubble extracts the call type, session ID, title, icon, and timestamp from it. Required.

Type	CometChat.BaseMessage
Required	Yes

---

alignment

Override incoming/outgoing alignment. Defaults to sender-vs-logged-in-user.

Type	"left" | "right"
Default	derived

---

onJoinClick

Callback when the Join button is clicked. Receives the session ID.

Type	(sessionId: string) => void
Default	undefined

---

className

Additional CSS class applied to the root element.

Type	string
Default	undefined

---

CSS Selectors

Target	Selector
Root	.cometchat-call-bubble
Incoming / outgoing	.cometchat-call-bubble-incoming / .cometchat-call-bubble-outgoing
Icon wrapper	.cometchat-call-bubble__icon-wrapper
Title	.cometchat-call-bubble__body-content-title
Subtitle	.cometchat-call-bubble__body-content-subtitle
Join button	.cometchat-call-bubble__button

---

Next Steps

Call Action Bubble

Call status system messages (missed, ended, etc.)

Call Logs

Browse call history and re-initiate calls

Message Bubble

The wrapper that hosts bubble content

Theming

Customize colors, fonts, and spacing