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 Quick Start)
• CometChatProvider configured with valid credentials
• A CometChat plan that includes calling features enabled in your dashboard

Step 1: Install the Calls SDK

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

npm

npm install @cometchat/calls-sdk-javascript

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:

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:

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

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:

<CometChatMessageHeader user={user} hideVoiceCallButton />

For group calls, pass the group prop instead:

<CometChatMessageHeader group={group} />

CometChatMessageHeader.CallButtons is a sub-component of CometChatMessageHeader. It is not a standalone component — you don’t need to import or render it separately.

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

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:

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 — full props reference including call button visibility
• Call Logs — display call history
• CometChatProvider — all provider configuration options