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

# Calling Integration

> Step-by-step guide to integrate voice and video calling into your React app using CometChat UI Kit v7.

## Goal

By the end of this guide you will have voice and video calling working in your React app — including the `CometChatCallButtons` component, incoming call notifications, and outgoing call screens.

## Prerequisites

* A working CometChat React UI Kit v7 setup (completed the [Integration Guide](/ui-kit/react/integration-react))
* `CometChatUIKit.init()` and `login()` completed before rendering
* A CometChat plan that includes calling features enabled in your [dashboard](https://app.cometchat.com)

## Step 1: Install the Calls SDK

The calling feature requires the optional `@cometchat/calls-sdk-javascript` peer dependency:

<CodeGroup>
  ```bash npm theme={null}
  npm install @cometchat/calls-sdk-javascript
  ```

  ```bash yarn theme={null}
  yarn add @cometchat/calls-sdk-javascript
  ```

  ```bash pnpm theme={null}
  pnpm add @cometchat/calls-sdk-javascript
  ```
</CodeGroup>

This package provides the WebRTC layer for voice and video calls. It is loaded lazily by the UI Kit — no additional bundle cost until calling is actually used.

## Step 2: Enable Calling in UIKitSettingsBuilder

Set `.setCallingEnabled(true)` on your `UIKitSettingsBuilder` during initialization:

```tsx title="src/main.tsx" theme={null}
import { CometChatUIKit, UIKitSettingsBuilder } from "@cometchat/chat-uikit-react";

const settings = new UIKitSettingsBuilder()
  .setAppId("YOUR_APP_ID")
  .setRegion("YOUR_REGION")
  .setAuthKey("YOUR_AUTH_KEY")
  .subscribePresenceForAllUsers()
  .setCallingEnabled(true)
  .build();

CometChatUIKit.init(settings).then(async () => {
  await CometChatUIKit.login("cometchat-uid-1");
  // Render your app
});
```

When calling is enabled, the UI Kit:

* Registers the `CallingPlugin` for call-related message rendering
* Lazy-loads call components (`CometChatIncomingCall`, `CometChatOutgoingCall`, `CometChatOngoingCall`) only when needed
* Enables the `CometChatCallButtons` component to initiate calls

When calling is not enabled (the default), call components are not loaded and `CometChatCallButtons` renders nothing.

## Step 3: Configure call settings

The Calls SDK uses the same `appId` and `region` from your `UIKitSettings` — no separate configuration is needed. The UI Kit passes these credentials to the Calls SDK automatically when calling is enabled.

<Note>
  The `config` prop on `CometChatProvider` accepts a `CometChatGlobalConfig` object for UI/behavior flags (`hideReceipts`, `hideUserStatus`, `disableSoundForCalls`, `customSoundForCalls`, `callSettingsBuilder`). It does **not** take a separate calling app ID or region.
</Note>

## Step 4: Add Call Buttons via CometChatMessageHeader

`CometChatMessageHeader` automatically renders voice and video call buttons when calling is enabled. No extra configuration needed — just render the header with a `user` or `group`:

```tsx theme={null}
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";

function ChatPanel({ user }: { user: CometChat.User }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
      <CometChatMessageHeader user={user} />
      <CometChatMessageList user={user} />
      <CometChatMessageComposer user={user} />
    </div>
  );
}
```

The header shows call buttons by default. To hide them, use `hideVoiceCallButton` or `hideVideoCallButton`:

```tsx theme={null}
<CometChatMessageHeader user={user} hideVoiceCallButton />
```

For group calls, pass the `group` prop instead:

```tsx theme={null}
<CometChatMessageHeader group={group} />
```

<Note>
  `CometChatMessageHeader` renders its call buttons automatically (via the `CometChatMessageHeader.CallButtons` sub-component) — you don't import or render that sub-component separately. If you need call buttons **outside** the header, use the standalone [`CometChatCallButtons`](/ui-kit/react/components/call-buttons) component.
</Note>

## Step 5: Verify with a voice call

With the setup complete, test a voice call:

1. Open your app with two different users in separate browser tabs
2. Click the **voice call** button (phone icon) in the chat header
3. The caller sees the `CometChatOutgoingCall` screen with a "Calling..." indicator
4. The receiver sees the `CometChatIncomingCall` overlay with accept/reject buttons
5. Once accepted, both users enter the `CometChatOngoingCall` view with live audio

```tsx theme={null}
import { useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatProvider,
  CometChatConversations,
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";

export default function App() {
  const [user, setUser] = useState<CometChat.User | null>(null);

  const handleConversationClick = (conversation: CometChat.Conversation) => {
    const conversationWith = conversation.getConversationWith();
    if (conversationWith instanceof CometChat.User) {
      setUser(conversationWith);
    }
  };

  return (
    <CometChatProvider>
      <div style={{ display: "flex", height: "100vh" }}>
        <div style={{ width: "360px", borderRight: "1px solid #eee" }}>
          <CometChatConversations onItemClick={handleConversationClick} />
        </div>
        <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
          {user && (
            <>
              <CometChatMessageHeader user={user} />
              <CometChatMessageList user={user} />
              <CometChatMessageComposer user={user} />
            </>
          )}
        </div>
      </div>
    </CometChatProvider>
  );
}
```

## Step 6: Verify with a video call

Video calls work identically — click the **video call** button (camera icon) instead. The `CometChatOngoingCall` component renders a full video interface with:

* Local and remote video streams
* Mute/unmute audio toggle
* Camera on/off toggle
* End call button

No additional configuration is needed to switch between audio-only and video calls. The call type is determined by which button the user clicks.

## Step 7: Render CometChatIncomingCall

`CometChatIncomingCall` must be rendered in your app — it is NOT auto-rendered by the UI Kit. Place it at the root level of your authenticated layout so it can display the incoming call overlay from anywhere:

```tsx theme={null}
import {
  CometChatProvider,
  CometChatIncomingCall,
  CometChatConversations,
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatMessageComposer,
} from "@cometchat/chat-uikit-react";

export default function App() {
  const [user, setUser] = useState<CometChat.User | null>(null);

  const handleConversationClick = (conversation: CometChat.Conversation) => {
    const conversationWith = conversation.getConversationWith();
    if (conversationWith instanceof CometChat.User) {
      setUser(conversationWith);
    }
  };

  return (
    <CometChatProvider>
      <div style={{ display: "flex", height: "100vh" }}>
        <div style={{ width: "360px", borderRight: "1px solid #eee" }}>
          <CometChatConversations onItemClick={handleConversationClick} />
        </div>
        <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
          {user && (
            <>
              <CometChatMessageHeader user={user} />
              <CometChatMessageList user={user} />
              <CometChatMessageComposer user={user} />
            </>
          )}
        </div>
      </div>

      {/* Incoming call overlay — renders at root level, listens for call events */}
      <CometChatIncomingCall />
    </CometChatProvider>
  );
}
```

`CometChatIncomingCall` listens for incoming call events and displays an accept/reject overlay. When the user accepts, it transitions to the `CometChatOngoingCall` screen internally. You can customize its behavior with callbacks:

```tsx theme={null}
<CometChatIncomingCall
  onAccept={(call) => console.log("Call accepted:", call)}
  onDecline={(call) => console.log("Call declined:", call)}
/>
```

`CometChatOutgoingCall` is rendered automatically by the `CometChatCallButtons` component when the user initiates a call — you do not need to place it manually.

## Summary

| Step | Action                                                                      |
| ---- | --------------------------------------------------------------------------- |
| 1    | Install `@cometchat/calls-sdk-javascript`                                   |
| 2    | Set `.setCallingEnabled(true)` on `UIKitSettingsBuilder`                    |
| 3    | (Optional) Configure call behavior via `config` prop on `CometChatProvider` |
| 4    | Call buttons appear in `CometChatMessageHeader` automatically               |
| 5    | Test voice calls between two users                                          |
| 6    | Test video calls between two users                                          |
| 7    | (Optional) Customize incoming/outgoing call handlers                        |

## Next Steps

* [Message Header](/ui-kit/react/components/message-header) — full props reference including call button visibility
* [Call Logs](/ui-kit/react/components/call-logs) — display call history
* [CometChatProvider](/ui-kit/react/cometchat-provider) — all provider configuration options