Skip to main content
FieldValue
Packages@cometchat/chat-uikit-react + @cometchat/calls-sdk-javascript (npm install @cometchat/calls-sdk-javascript)
Required setupCall .setCallingEnabled(true) on UIKitSettingsBuilder during init — Calls SDK must also be installed
Call featuresIncoming Call, Outgoing Call, Call Logs, Call Buttons (in Message Header)
Key componentsCometChatMessageHeaderMessage Header (includes call buttons), CometChatIncomingCallIncoming Call, CometChatOutgoingCallOutgoing Call, CometChatCallLogsCall Logs
EnablingSet .setCallingEnabled(true) on UIKitSettingsBuilder to activate call UI components
CSS class prefix.cometchat-

Overview

CometChat Calls integrates 1:1 and group audio/video calling into the React UI Kit. Install the Calls SDK and enable calling via .setCallingEnabled(true) on UIKitSettingsBuilder to activate call components.
Ensure you have called CometChatUIKit.init() with .setCallingEnabled(true) and CometChatUIKit.login() before rendering. See React.js Integration.

Integration

Install the Calls SDK and enable calling:
npm install @cometchat/calls-sdk-javascript
Then set .setCallingEnabled(true) on your UIKitSettingsBuilder:
const settings = new UIKitSettingsBuilder()
  .setAppId("YOUR_APP_ID")
  .setRegion("YOUR_REGION")
  .setAuthKey("YOUR_AUTH_KEY")
  .setCallingEnabled(true)
  .build();

await CometChatUIKit.init(settings);
await CometChatUIKit.login("cometchat-uid-1");
Call buttons render inside MessageHeader when calling is enabled.

Features

Incoming Call

The Incoming Call component displays a call screen when a call is received, showing caller info with accept/reject options.

Outgoing Call

The Outgoing Call component displays an outgoing call screen with recipient info and call status. Transitions to the ongoing call screen when the receiver accepts.

Call Logs

The Call Logs component displays call history — caller, time, and duration.

Next Steps

Message Header

Message header with integrated call buttons

Incoming Call

Incoming call notifications and UI

Call Logs

Call history and details

Core Features

Core chat features