> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Incoming Call

> Handle incoming CometChat React UI Kit voice and video calls with caller details, accept, reject, custom sounds, and view slots.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "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" }
    ]
  }
  ```
</Accordion>

## 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.

```tsx lines theme={null}
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>
  );
}
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/KBUX2d7UNeNDowv9/images/e63dbd67-incoming_calls_overview_web_screens-d0434dd2b66b78fe0bff43bdd34435d3.png?fit=max&auto=format&n=KBUX2d7UNeNDowv9&q=85&s=37964550aa9471c5bcc6ee276cd7d95e" width="1282" height="802" data-path="images/e63dbd67-incoming_calls_overview_web_screens-d0434dd2b66b78fe0bff43bdd34435d3.png" />
</Frame>

***

## Minimal Render

```tsx lines theme={null}
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.

```tsx lines theme={null}
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.

```tsx lines theme={null}
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.

```tsx lines theme={null}
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` |

```tsx lines theme={null}
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

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/egNZF-iXldTS9vDi/images/c3e4060d-incoming_call_leading_view_custom_web_screens-75333fe402b7588c590288cd6f825a99.png?fit=max&auto=format&n=egNZF-iXldTS9vDi&q=85&s=0abfeb927c3d7522f823791db7d91872" width="1282" height="802" data-path="images/c3e4060d-incoming_call_leading_view_custom_web_screens-75333fe402b7588c590288cd6f825a99.png" />
</Frame>

```tsx lines theme={null}
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

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/-nSFFcS2LLIkMyn9/images/8d3bfa9b-incoming_call_title_view_custom_web_screens-67b55f5b6fc1ede3f9f55d840ebaa290.png?fit=max&auto=format&n=-nSFFcS2LLIkMyn9&q=85&s=e6cc379b5ccfb80a08cbbdf23fa80116" width="1282" height="802" data-path="images/8d3bfa9b-incoming_call_title_view_custom_web_screens-67b55f5b6fc1ede3f9f55d840ebaa290.png" />
</Frame>

```tsx lines theme={null}
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

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/cTCXebw8IhR7IiJw/images/40f39b71-incoming_call_item_view_custom_web_screens-f8cd3984730f17f99313f1d988439d41.png?fit=max&auto=format&n=cTCXebw8IhR7IiJw&q=85&s=e9ac077e31f2b80fae667a389de78cc4" width="1282" height="802" data-path="images/40f39b71-incoming_call_item_view_custom_web_screens-f8cd3984730f17f99313f1d988439d41.png" />
</Frame>

```tsx lines theme={null}
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

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

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

### Custom ringtone

```tsx lines theme={null}
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

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/qatN8AZO7PJYofUv/images/0256ea4e-incoming_calls_style_web_screens-9d869ffb8755959f5607e9e63d255cdd.png?fit=max&auto=format&n=qatN8AZO7PJYofUv&q=85&s=7dd95e6ba8ea423f8c81e3c1ce345c49" width="1282" height="802" data-path="images/0256ea4e-incoming_calls_style_web_screens-9d869ffb8755959f5607e9e63d255cdd.png" />
</Frame>

```css lines theme={null}
.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;
}
```

***

## 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` |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.