> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-platform-docs-release.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/v7/integration-react))
* `CometChatProvider` configured with valid credentials
* 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 CometChatProvider

Set the `callingEnabled` prop to `true` on your `CometChatProvider`:

```tsx theme={null}
import { CometChatProvider } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/styles";

function App() {
  return (
    <CometChatProvider
      appId="YOUR_APP_ID"
      region="YOUR_REGION"
      authKey="YOUR_AUTH_KEY"
      callingEnabled={true}
    >
      <MyChatApp />
    </CometChatProvider>
  );
}
```

When `callingEnabled` is `true`, 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 `callingEnabled` is `false` (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` as your chat SDK — no separate configuration is needed. `CometChatProvider` passes these credentials to the Calls SDK automatically when `callingEnabled` is `true`.

If your app uses a dedicated calling app ID (separate from the chat app ID), pass it via the `config` prop:

```tsx theme={null}
<CometChatProvider
  appId="YOUR_CHAT_APP_ID"
  region="us"
  authKey="YOUR_AUTH_KEY"
  callingEnabled={true}
  config={{
    callingAppId: "YOUR_CALLING_APP_ID",
    callingRegion: "us",
  }}
>
  <MyChatApp />
</CometChatProvider>
```

In most cases the chat and calling app IDs are the same, so this extra configuration is not needed.

## Step 4: Add Call Buttons via CometChatMessageHeader

`CometChatMessageHeader` automatically renders voice and video call buttons when `callingEnabled` is `true` on your provider. 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.CallButtons` is a sub-component of `CometChatMessageHeader`. It is not a standalone component — you don't need to import or render it separately.
</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";
import "@cometchat/chat-uikit-react/styles";

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
      appId="YOUR_APP_ID"
      region="YOUR_REGION"
      authKey="YOUR_AUTH_KEY"
      uid="cometchat-uid-1"
      callingEnabled={true}
    >
      <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: Handle incoming and outgoing calls

`CometChatIncomingCall` and `CometChatOutgoingCall` are automatically rendered by the UI Kit when `callingEnabled` is `true`. They listen for SDK call events via `SDKBridgeProvider` and display themselves as overlays when a call is initiated or received.

You do not need to render these components manually — they are managed internally. However, you can customize their behavior with callbacks:

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

function App() {
  return (
    <CometChatProvider
      appId="YOUR_APP_ID"
      region="YOUR_REGION"
      authKey="YOUR_AUTH_KEY"
      callingEnabled={true}
    >
      {/* These override the default auto-rendered call screens */}
      <CometChatIncomingCall
        onAccept={(call) => console.log("Call accepted:", call)}
        onReject={(call) => console.log("Call rejected:", call)}
      />
      <CometChatOutgoingCall
        onCancel={(call) => console.log("Call cancelled:", call)}
      />
      <MyChatApp />
    </CometChatProvider>
  );
}
```

## Summary

| Step | Action                                                               |
| ---- | -------------------------------------------------------------------- |
| 1    | Install `@cometchat/calls-sdk-javascript`                            |
| 2    | Set `callingEnabled={true}` on `CometChatProvider`                   |
| 3    | (Optional) Configure separate calling app settings via `config` prop |
| 4    | Add `CometChatCallButtons` with a `user` or `group` prop             |
| 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/v7/components/message-header) — full props reference including call button visibility
* [Call Logs](/ui-kit/react/v7/components/call-logs) — display call history
* [CometChatProvider](/ui-kit/react/v7/cometchat-provider) — all provider configuration options