> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Incoming Call

> Visual notification for incoming voice/video calls with accept and decline controls.

<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/-YC7tOebleeoFejE/images/e63dbd67-incoming_calls_overview_web_screens-d0434dd2b66b78fe0bff43bdd34435d3.png?fit=max&auto=format&n=-YC7tOebleeoFejE&q=85&s=186ff36000a5162e2eea126a4b20d653" 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/tI1D0nyKUVcz2LEZ/images/c3e4060d-incoming_call_leading_view_custom_web_screens-75333fe402b7588c590288cd6f825a99.png?fit=max&auto=format&n=tI1D0nyKUVcz2LEZ&q=85&s=368862aa8c67a64695d8138a5779c7a1" 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/Xbd1mrZiWe1Pd3HE/images/8d3bfa9b-incoming_call_title_view_custom_web_screens-67b55f5b6fc1ede3f9f55d840ebaa290.png?fit=max&auto=format&n=Xbd1mrZiWe1Pd3HE&q=85&s=996add956fca8763d0fd881a2e509514" 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/QxoaCZzLrVi321Ps/images/40f39b71-incoming_call_item_view_custom_web_screens-f8cd3984730f17f99313f1d988439d41.png?fit=max&auto=format&n=QxoaCZzLrVi321Ps&q=85&s=d82e0f777fef2d1ea250ebe21e97dae4" 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/8ODUflBxloB1jkgP/images/0256ea4e-incoming_calls_style_web_screens-9d869ffb8755959f5607e9e63d255cdd.png?fit=max&auto=format&n=8ODUflBxloB1jkgP&q=85&s=f91ef6a900ef1ed97bfc4a7833b11f98" 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`                        |