> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-react-v7-feature-guides.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Call Bubble

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

<Accordion title="AI Integration Quick Reference">
  | Field          | Value                                                                                                                                                                                                       |
  | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  | Component      | `CometChatCallBubble`                                                                                                                                                                                       |
  | Package        | `@cometchat/chat-uikit-react`                                                                                                                                                                               |
  | Import         | `import { CometChatCallBubble } from "@cometchat/chat-uikit-react";`                                                                                                                                        |
  | CSS root class | `.cometchat-call-bubble`                                                                                                                                                                                    |
  | Primary output | Self-extracting call bubble; `onJoinClick: (sessionId: string) => void` starts the call on Join                                                                                                             |
  | Prerequisites  | App wrapped in [`CometChatProvider`](/ui-kit/react/cometchat-provider) with valid credentials + a logged-in user; see [Calling Integration](/ui-kit/react/calling-integration) to start/join a call session |
  | Stitching      | Wire `onJoinClick` to start the call (see [Calling Integration](/ui-kit/react/calling-integration))                                                                                                         |
  | Full props     | See [Props](#props)                                                                                                                                                                                         |
</Accordion>

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

<Info>
  **Live Preview** — interact with the call bubble.

  [Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-call-bubble--audio-call-outgoing)
</Info>

<iframe src="https://storybook.cometchat.io/react/iframe.html?id=components-bubbles-call-bubble--audio-call-outgoing&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "300px", border: "1px solid #e0e0e0"}} title="CometChat Call Bubble — Outgoing" allow="clipboard-write" />

***

## Usage

```tsx theme={null}
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. Empty by default — you must start or join the call session yourself.

<Note>
  See [Calling Integration](/ui-kit/react/calling-integration) for how to start or join a call session.
</Note>

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

<CardGroup cols={2}>
  <Card title="Call Action Bubble" icon="phone" href="/ui-kit/react/components/call-action-bubble">
    Call status system messages (missed, ended, etc.)
  </Card>

  <Card title="Call Logs" icon="clock-rotate-left" href="/ui-kit/react/components/call-logs">
    Browse call history and re-initiate calls
  </Card>

  <Card title="Message Bubble" icon="comment" href="/ui-kit/react/components/message-bubble">
    The wrapper that hosts bubble content
  </Card>

  <Card title="Theming" icon="paintbrush" href="/ui-kit/react/theming">
    Customize colors, fonts, and spacing
  </Card>
</CardGroup>