Handle Incoming Calls

Display incoming call notifications with accept/decline controls using CometChatIncomingCall

AI Agent Component Spec

{
  "component": "CometChatIncomingCall",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatIncomingCall } from \"@cometchat/chat-uikit-react\";",
  "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
  "description": "Visual notification for incoming voice/video calls with accept and decline controls.",
  "cssRootClass": ".cometchat-incoming-call",
  "props": {
    "data": {
      "call": { "type": "any", "default": "auto-detected" },
      "callSettingsBuilder": { "type": "(call: CometChat.Call) => CallSettingsBuilder", "default": "undefined" }
    },
    "callbacks": {
      "onAccept": "(call: CometChat.Call) => void",
      "onDecline": "(call: CometChat.Call) => void",
      "onError": "((error: CometChat.CometChatException) => void) | null"
    },
    "sound": {
      "disableSoundForCalls": { "type": "boolean", "default": false },
      "customSoundForCalls": { "type": "string", "default": "undefined" }
    },
    "viewSlots": {
      "itemView": "(call: CometChat.Call) => JSX.Element",
      "leadingView": "(call: CometChat.Call) => JSX.Element",
      "titleView": "(call: CometChat.Call) => JSX.Element",
      "subtitleView": "(call: CometChat.Call) => JSX.Element",
      "trailingView": "(call: CometChat.Call) => JSX.Element"
    }
  },
  "events": [
    { "name": "CometChatCallEvents.ccCallRejected", "payload": "CometChat.Call" },
    { "name": "CometChatCallEvents.ccCallAccepted", "payload": "CometChat.Call" },
    { "name": "CometChatCallEvents.ccCallEnded", "payload": "CometChat.Call" }
  ]
}

Overview

The incoming call component displays a notification overlay when someone calls your user. It auto-detects incoming calls and shows accept/decline buttons with caller information. Place it at your app’s root level so it appears above all other content.

Time estimate: 10 minutes
Difficulty: Beginner

Prerequisites

• React.js integration completed
• Voice/Video calling guide reviewed
• CometChat Calls SDK initialized

Steps

Step 1: Add the incoming call component

Place CometChatIncomingCall at your app root. It automatically listens for incoming calls:

import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function App() {
  return (
    <div style={{ position: "relative", height: "100vh" }}>
      <CometChatIncomingCall />
      {/* rest of your app */}
    </div>
  );
}

Step 2: Handle accept and decline actions

Add callbacks to respond when the user accepts or declines:

import { CometChatIncomingCall } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function IncomingCallHandler() {
  return (
    <CometChatIncomingCall
      onAccept={(call: CometChat.Call) => {
        console.log("Call accepted:", call.getSessionId());
        // Navigate to call screen or handle call session
      }}
      onDecline={(call: CometChat.Call) => {
        console.log("Call declined:", call.getSessionId());
      }}
      onError={(error: CometChat.CometChatException) => {
        console.error("Call error:", error);
      }}
    />
  );
}

Step 3: Subscribe to call events globally

Listen for call events anywhere in your app:

import { useEffect } from "react";
import { CometChatCallEvents } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function useCallEvents() {
  useEffect(() => {
    const acceptedSub = CometChatCallEvents.ccCallAccepted.subscribe(
      (call: CometChat.Call) => console.log("Call accepted:", call)
    );
    const rejectedSub = CometChatCallEvents.ccCallRejected.subscribe(
      (call: CometChat.Call) => console.log("Call rejected:", call)
    );
    const endedSub = CometChatCallEvents.ccCallEnded.subscribe(
      (call: CometChat.Call) => console.log("Call ended:", call)
    );

    return () => {
      acceptedSub?.unsubscribe();
      rejectedSub?.unsubscribe();
      endedSub?.unsubscribe();
    };
  }, []);
}

Step 4: Customize the ringtone

Use a custom sound or disable the ringtone entirely:

// Custom ringtone
<CometChatIncomingCall customSoundForCalls="/sounds/ringtone.mp3" />

// Silent mode
<CometChatIncomingCall disableSoundForCalls={true} />

Step 5: Customize the UI with view slots

Replace parts of the incoming call notification:

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAvatar, CometChatIncomingCall } from "@cometchat/chat-uikit-react";

function CustomIncomingCall() {
  return (
    <CometChatIncomingCall
      leadingView={(call: CometChat.Call) => (
        <CometChatAvatar
          name={call.getCallInitiator()?.getName()}
          image={call.getCallInitiator()?.getAvatar()}
        />
      )}
      titleView={(call: CometChat.Call) => (
        <div style={{ fontWeight: "bold" }}>
          {call.getCallInitiator()?.getName()}
        </div>
      )}
      subtitleView={(call: CometChat.Call) => (
        <div style={{ color: "#666" }}>
          {call.getType() === "audio" ? "📞 Voice Call" : "📹 Video Call"}
        </div>
      )}
    />
  );
}

Complete Example

import { useEffect } from "react";
import { CometChatIncomingCall, CometChatCallEvents } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import "@cometchat/chat-uikit-react/css-variables.css";

function App() {
  // Subscribe to call events
  useEffect(() => {
    const acceptedSub = CometChatCallEvents.ccCallAccepted.subscribe(
      (call: CometChat.Call) => {
        console.log("Navigating to call screen...");
        // Handle call session
      }
    );

    return () => acceptedSub?.unsubscribe();
  }, []);

  return (
    <div style={{ position: "relative", height: "100vh" }}>
      <CometChatIncomingCall
        onAccept={(call) => console.log("Accepted:", call.getSessionId())}
        onDecline={(call) => console.log("Declined:", call.getSessionId())}
        onError={(error) => console.error("Error:", error)}
      />
      {/* Your app content */}
    </div>
  );
}

export default App;

Advanced: Custom call settings

Configure the call session when accepted:

import { CometChatIncomingCall, CometChatUIKitCalls } from "@cometchat/chat-uikit-react";

<CometChatIncomingCall
  callSettingsBuilder={(call) =>
    new CometChatUIKitCalls.CallSettingsBuilder()
      .enableDefaultLayout(true)
      .setIsAudioOnlyCall(call.getType() === "audio")
  }
/>

Common Issues

The component must be placed at the app root level with position: relative on the parent container for the overlay to display correctly.

Issue	Solution
Notification not showing	Ensure component is at app root level
No ringtone playing	Check browser autoplay policies, user must interact first
Call events not firing	Verify CometChat SDK is initialized

Next Steps

Outgoing Calls

Display outgoing call screens

Call Buttons

Add call initiation buttons

Related Guides

Voice/Video Calling

Call Logs

Events