Incoming Call - CometChat Docs

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" }
  ]
}

Where It Fits

CometChatIncomingCall is an overlay component that auto-detects incoming calls and renders a notification with accept/decline buttons. Place it at the app root level so it appears above all other content.

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 app */}
    </div>
  );
}

Minimal Render

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

function IncomingCallDemo() {
  return <CometChatIncomingCall />;
}

export default IncomingCallDemo;

Root CSS class: .cometchat-incoming-call

Actions and Events

Callback Props

onAccept

Fires when the accept button is clicked.

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

function IncomingCallWithAccept() {
  return (
    <CometChatIncomingCall
      onAccept={(call: CometChat.Call) => {
        console.log("Call accepted:", call);
      }}
    />
  );
}

onDecline

Fires when the decline button is clicked.

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

function IncomingCallWithDecline() {
  return (
    <CometChatIncomingCall
      onDecline={(call: CometChat.Call) => {
        console.log("Call declined:", call);
      }}
    />
  );
}

onError

Fires on internal errors.

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

function IncomingCallWithError() {
  return (
    <CometChatIncomingCall
      onError={(error: CometChat.CometChatException) => {
        console.error("IncomingCall error:", error);
      }}
    />
  );
}

Global UI Events

CometChatCallEvents emits events subscribable from anywhere in the application.

Event	Fires when	Payload
`ccCallRejected`	Incoming call is rejected	`CometChat.Call`
`ccCallAccepted`	Incoming call is accepted	`CometChat.Call`
`ccCallEnded`	Call ends	`CometChat.Call`

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("Accepted:", call)
    );
    const rejectedSub = CometChatCallEvents.ccCallRejected.subscribe(
      (call: CometChat.Call) => console.log("Rejected:", call)
    );

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

SDK Events (Real-Time, Automatic)

The component listens to SDK call events internally for real-time incoming call detection. No manual attachment needed.

Custom View Slots

View slots for CometChatIncomingCall are functions that receive the CometChat.Call object.

Slot	Signature	Replaces
`itemView`	`(call: CometChat.Call) => JSX.Element`	Entire list item
`leadingView`	`(call: CometChat.Call) => JSX.Element`	Avatar / left section
`titleView`	`(call: CometChat.Call) => JSX.Element`	Name / title text
`subtitleView`	`(call: CometChat.Call) => JSX.Element`	Subtitle text
`trailingView`	`(call: CometChat.Call) => JSX.Element`	Right section

leadingView

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

function CustomLeadingIncoming() {
  return (
    <CometChatIncomingCall
      leadingView={(call: CometChat.Call) => (
        <CometChatAvatar
          name={call.getCallInitiator()?.getName()}
          image={call.getCallInitiator()?.getAvatar()}
        />
      )}
    />
  );
}

titleView

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

function CustomTitleIncoming() {
  return (
    <CometChatIncomingCall
      titleView={(call: CometChat.Call) => (
        <div>{call.getCallInitiator()?.getName()}</div>
      )}
    />
  );
}

itemView

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

function CustomItemViewIncoming() {
  return (
    <CometChatIncomingCall
      itemView={(call: CometChat.Call) => (
        <div className="incoming-call__itemview">
          <CometChatAvatar
            name={call.getCallInitiator()?.getName()}
            image={call.getCallInitiator()?.getAvatar()}
          />
          <div>{call.getCallInitiator()?.getName()}</div>
          <div>{"Incoming " + call.getType() + " call"}</div>
        </div>
      )}
    />
  );
}

Common Patterns

Disable ringtone

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

function SilentIncoming() {
  return <CometChatIncomingCall disableSoundForCalls={true} />;
}

Custom ringtone

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

function CustomSoundIncoming() {
  return <CometChatIncomingCall customSoundForCalls="/sounds/ringtone.mp3" />;
}

CSS Architecture

Key Selectors

Target	Selector
Root	`.cometchat-incoming-call`
List item	`.cometchat-incoming-call .cometchat-list-item`
Body title	`.cometchat-incoming-call .cometchat-list-item__body-title`
Button group	`.cometchat-incoming-call__button-group`
Decline button	`.cometchat-incoming-call__button-decline`
Accept button	`.cometchat-incoming-call__button-accept`

Example: Brand-themed incoming call

.cometchat-incoming-call {
  border-radius: 18.5px;
  border: 1.542px solid #aa9ee8;
  background: #fff;
}

.cometchat-incoming-call__button-decline .cometchat-button__text {
  color: #f44649;
}

.cometchat-incoming-call__button-accept .cometchat-button {
  background-color: #6852d6;
}

Accessibility

The accept and decline buttons are keyboard-focusable and activate on Enter/Space. The caller name and call type are exposed as text content. The component renders as an absolutely positioned overlay.

Props

All props are optional.

call

Sets a specific call object for the incoming call display.


Type	`any`
Default	Auto-detected

callSettingsBuilder

Custom call settings builder for the call session.


Type	`(call: CometChat.Call) => typeof CometChatUIKitCalls.CallSettingsBuilder`
Default	`undefined`

customSoundForCalls

Custom sound file URL for incoming calls.


Type	`string`
Default	`undefined`

disableSoundForCalls

Disables the incoming call ringtone.


Type	`boolean`
Default	`false`

itemView

Custom renderer for the entire list item.


Type	`(call: CometChat.Call) => JSX.Element`
Default	`undefined`

leadingView

Custom renderer for the avatar / left section.


Type	`(call: CometChat.Call) => JSX.Element`
Default	`undefined`

onAccept

Callback fired when the accept button is clicked.


Type	`(call: CometChat.Call) => void`
Default	`undefined`

onDecline

Callback fired when the decline button is clicked.


Type	`(call: CometChat.Call) => void`
Default	`undefined`

onError

Callback fired when the component encounters an error.


Type	`((error: CometChat.CometChatException) => void) \| null`
Default	`undefined`

subtitleView

Custom renderer for the subtitle text.


Type	`(call: CometChat.Call) => JSX.Element`
Default	`undefined`

titleView

Custom renderer for the name / title text.


Type	`(call: CometChat.Call) => JSX.Element`
Default	`undefined`

trailingView

Custom renderer for the right section.


Type	`(call: CometChat.Call) => JSX.Element`
Default	`undefined`

Events

Event	Payload	Fires when
`CometChatCallEvents.ccCallRejected`	`CometChat.Call`	Call rejected
`CometChatCallEvents.ccCallAccepted`	`CometChat.Call`	Call accepted
`CometChatCallEvents.ccCallEnded`	`CometChat.Call`	Call ended

CSS Selectors

Target	Selector
Root	`.cometchat-incoming-call`
List item	`.cometchat-incoming-call .cometchat-list-item`
Body title	`.cometchat-incoming-call .cometchat-list-item__body-title`
Title container	`.cometchat-incoming-call .cometchat-list-item__title-container`
Trailing view	`.cometchat-incoming-call .cometchat-list-item__trailing-view`
Button group	`.cometchat-incoming-call__button-group`
Decline button	`.cometchat-incoming-call__button-decline`
Accept button	`.cometchat-incoming-call__button-accept`

​Where It Fits

​Minimal Render

​Actions and Events

​Callback Props

​onAccept

​onDecline

​onError

​Global UI Events

​SDK Events (Real-Time, Automatic)

​Custom View Slots

​leadingView

​titleView

​itemView

​Common Patterns

​Disable ringtone

​Custom ringtone

​CSS Architecture

​Key Selectors

​Example: Brand-themed incoming call

​Accessibility

​Props

​call

​callSettingsBuilder

​customSoundForCalls

​disableSoundForCalls

​itemView

​leadingView

​onAccept

​onDecline

​onError

​subtitleView

​titleView

​trailingView

​Events

​CSS Selectors

Where It Fits

Minimal Render

Actions and Events

Callback Props

onAccept

onDecline

onError

Global UI Events

SDK Events (Real-Time, Automatic)

Custom View Slots

leadingView

titleView

itemView

Common Patterns

Disable ringtone

Custom ringtone

CSS Architecture

Key Selectors

Example: Brand-themed incoming call

Accessibility

Props

call

callSettingsBuilder

customSoundForCalls

disableSoundForCalls

itemView

leadingView

onAccept

onDecline

onError

subtitleView

titleView

trailingView

Events

CSS Selectors