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

# Outgoing Call

> Overlay component displaying an outgoing voice/video call with recipient info and cancel control.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatOutgoingCall",
    "package": "@cometchat/chat-uikit-react",
    "import": "import { CometChatOutgoingCall } from \"@cometchat/chat-uikit-react\";",
    "cssImport": "import \"@cometchat/chat-uikit-react/css-variables.css\";",
    "description": "Overlay component displaying an outgoing voice/video call with recipient info and cancel control.",
    "cssRootClass": ".cometchat-outgoing-call",
    "primaryOutput": {
      "prop": "onCallCanceled",
      "type": "Function"
    },
    "props": {
      "data": {
        "call": {
          "type": "CometChat.Call",
          "default": "undefined",
          "note": "Must come from CometChat.initiateCall()"
        }
      },
      "callbacks": {
        "onCallCanceled": "Function",
        "onError": "((error: CometChat.CometChatException) => void) | null"
      },
      "sound": {
        "disableSoundForCalls": { "type": "boolean", "default": false },
        "customSoundForCalls": { "type": "string", "default": "built-in" }
      },
      "viewSlots": {
        "titleView": "JSX.Element",
        "subtitleView": "JSX.Element",
        "avatarView": "JSX.Element",
        "cancelButtonView": "JSX.Element"
      }
    },
    "events": [
      {
        "name": "CometChatCallEvents.ccOutgoingCall",
        "payload": "CometChat.Call",
        "description": "Call initiated"
      },
      {
        "name": "CometChatCallEvents.ccCallAccepted",
        "payload": "CometChat.Call",
        "description": "Recipient accepts"
      },
      {
        "name": "CometChatCallEvents.ccCallRejected",
        "payload": "CometChat.Call",
        "description": "Recipient rejects"
      },
      {
        "name": "CometChatCallEvents.ccCallEnded",
        "payload": "CometChat.Call",
        "description": "Call session ends"
      }
    ],
    "sdkListeners": [],
    "compositionExample": {
      "description": "App-level overlay rendered after CometChat.initiateCall()",
      "components": ["CometChatOutgoingCall"],
      "flow": "CometChat.initiateCall() returns CometChat.Call -> pass to call prop -> onCallCanceled ends session"
    }
  }
  ```
</Accordion>

## Where It Fits

`CometChatOutgoingCall` is an overlay component that displays the outgoing call screen with the recipient's name, avatar, and a cancel button. It plays a ringtone while the call is pending. Typically rendered at the app root level after initiating a call via `CometChat.initiateCall()`.

```tsx lines theme={null}
import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatOutgoingCall,
  CometChatUIKitConstants,
} from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function OutgoingCallDemo() {
  const [call, setCall] = useState<CometChat.Call>();

  useEffect(() => {
    const uid = "uid";
    const callObject = new CometChat.Call(
      uid,
      CometChatUIKitConstants.MessageTypes.audio,
      CometChatUIKitConstants.MessageReceiverType.user
    );
    CometChat.initiateCall(callObject)
      .then((c) => setCall(c))
      .catch(console.log);
  }, []);

  return call ? <CometChatOutgoingCall call={call} /> : null;
}

export default OutgoingCallDemo;
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/vk8kXY4T6hhH4l00/images/6a32d947-outgoing_calls_overview_web_screens-9d829a6dda52d748e0dd1eaee44e6884.png?fit=max&auto=format&n=vk8kXY4T6hhH4l00&q=85&s=0893de5700eb38c4f407d2410f50217f" width="1282" height="802" data-path="images/6a32d947-outgoing_calls_overview_web_screens-9d829a6dda52d748e0dd1eaee44e6884.png" />
</Frame>

***

## Minimal Render

```tsx lines theme={null}
import { CometChatOutgoingCall } from "@cometchat/chat-uikit-react";
import "@cometchat/chat-uikit-react/css-variables.css";

function OutgoingCallMinimal() {
  // `call` must be a CometChat.Call object from CometChat.initiateCall()
  return call ? <CometChatOutgoingCall call={call} /> : null;
}
```

Root CSS class: `.cometchat-outgoing-call`

***

## Actions and Events

### Callback Props

#### onCallCanceled

Fires when the cancel button is clicked. Pauses the ringtone internally before invoking the callback.

```tsx lines theme={null}
import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatOutgoingCall,
  CometChatUIKitConstants,
} from "@cometchat/chat-uikit-react";

function OutgoingCallWithCancel() {
  const [call, setCall] = useState<CometChat.Call>();

  useEffect(() => {
    const uid = "uid";
    const callObject = new CometChat.Call(
      uid,
      CometChatUIKitConstants.MessageTypes.audio,
      CometChatUIKitConstants.MessageReceiverType.user
    );
    CometChat.initiateCall(callObject)
      .then((c) => setCall(c))
      .catch(console.log);
  }, []);

  const cancelCall = () => {
    CometChat.endCall(call!.getSessionId()).then(() => setCall(undefined));
  };

  return call ? (
    <CometChatOutgoingCall call={call} onCallCanceled={cancelCall} />
  ) : null;
}
```

#### onError

Fires on internal errors.

```tsx lines theme={null}
import { CometChatOutgoingCall } from "@cometchat/chat-uikit-react";
import { CometChat } from "@cometchat/chat-sdk-javascript";

function OutgoingCallWithError() {
  return (
    <CometChatOutgoingCall
      call={call}
      onError={(error: CometChat.CometChatException) => {
        console.error("OutgoingCall error:", error);
      }}
    />
  );
}
```

### Global UI Events

`CometChatCallEvents` emits call lifecycle events subscribable from anywhere. Subscribe in a `useEffect` and unsubscribe on cleanup.

| Event            | Fires when                     | Payload          |
| ---------------- | ------------------------------ | ---------------- |
| `ccOutgoingCall` | A call is initiated            | `CometChat.Call` |
| `ccCallAccepted` | The recipient accepts the call | `CometChat.Call` |
| `ccCallRejected` | The recipient rejects the call | `CometChat.Call` |
| `ccCallEnded`    | The call session 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("Call accepted:", call.getSessionId());
      }
    );
    const rejectedSub = CometChatCallEvents.ccCallRejected.subscribe(
      (call: CometChat.Call) => {
        console.log("Call rejected:", call.getSessionId());
      }
    );
    const endedSub = CometChatCallEvents.ccCallEnded.subscribe(
      (call: CometChat.Call) => {
        console.log("Call ended:", call.getSessionId());
      }
    );

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

### SDK Events (Real-Time, Automatic)

The component internally manages call sound playback. It plays the outgoing call ringtone on mount (unless `disableSoundForCalls={true}`) and pauses it on unmount or cancel. No SDK call listeners are attached by the component itself — call status updates are handled by the parent application.

***

## Custom View Slots

All view slots on `CometChatOutgoingCall` are `JSX.Element` (not functions). They do not receive parameters — pass call data via closure if needed.

| Slot               | Type          | Replaces           |
| ------------------ | ------------- | ------------------ |
| `titleView`        | `JSX.Element` | Recipient name     |
| `subtitleView`     | `JSX.Element` | "Calling..." text  |
| `avatarView`       | `JSX.Element` | Recipient avatar   |
| `cancelButtonView` | `JSX.Element` | Cancel call button |

### titleView

Replace the recipient name.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/CrArf1QwUPg5EvCC/images/294edd18-outgoing_calls_title_view_web_screens-bc3f5853236e03acb85aa532fd69706b.png?fit=max&auto=format&n=CrArf1QwUPg5EvCC&q=85&s=c20e93d659fe50fb986a60c3bda4c76b" width="1282" height="802" data-path="images/294edd18-outgoing_calls_title_view_web_screens-bc3f5853236e03acb85aa532fd69706b.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx lines theme={null}
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import {
      CometChatOutgoingCall,
      CometChatUIKitConstants,
    } from "@cometchat/chat-uikit-react";

    function OutgoingCallCustomTitle() {
      // assume `call` is a CometChat.Call from CometChat.initiateCall()
      const getTitleView = (call: CometChat.Call) => (
        <div className="outgoing-call__title">
          {call.getCallInitiator().getName()} {" <> "}{" "}
          {call.getCallReceiver().getName()}
        </div>
      );

      return call ? (
        <CometChatOutgoingCall call={call} titleView={getTitleView(call)} />
      ) : null;
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={null}
    .outgoing-call__title {
      color: #141414;
      text-align: center;
      font: 500 24px Roboto;
    }
    ```
  </Tab>
</Tabs>

### subtitleView

Replace the "Calling..." text.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/Xbd1mrZiWe1Pd3HE/images/904cc985-outgoing_calls_subtitle_view_web_screens-ca75b11cc49d9955e040c37f05853a34.png?fit=max&auto=format&n=Xbd1mrZiWe1Pd3HE&q=85&s=e05ffd420f8a2848a7f7575b470f6a91" width="1282" height="802" data-path="images/904cc985-outgoing_calls_subtitle_view_web_screens-ca75b11cc49d9955e040c37f05853a34.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx lines theme={null}
    const getSubtitleView = (call: CometChat.Call) => (
      <div className="outgoing-call__subtitle">
        <div className="outgoing-call__subtitle-icon" />
        {"Calling..."}
      </div>
    );

    <CometChatOutgoingCall call={call} subtitleView={getSubtitleView(call)} />;
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={null}
    .outgoing-call__subtitle {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: 8px;
      color: #727272;
      text-align: center;
      font: 400 16px Roboto;
    }

    .outgoing-call__subtitle-icon {
      -webkit-mask: url("<relative path to your icon svg>") center center no-repeat;
      background: #a1a1a1;
      height: 24px;
      width: 24px;
    }
    ```
  </Tab>
</Tabs>

### avatarView

Replace the recipient avatar.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/4xujL4pc0yDqaECl/images/d242dfe4-outgoing_calls_avatar_view_web_screens-e4517aa9fc688283808448070a0d3c78.png?fit=max&auto=format&n=4xujL4pc0yDqaECl&q=85&s=f8ec7b473cd057282685006994caf37d" width="1282" height="802" data-path="images/d242dfe4-outgoing_calls_avatar_view_web_screens-e4517aa9fc688283808448070a0d3c78.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx lines theme={null}
    import {
      CometChatAvatar,
      CometChatOutgoingCall,
    } from "@cometchat/chat-uikit-react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";

    function OutgoingCallCustomAvatar() {
      const getAvatarView = (call: CometChat.Call) => (
        <div className="outgoing-call__avatar">
          <CometChatAvatar
            name={call?.getCallReceiver()?.getName()}
            image={(call?.getCallReceiver() as CometChat.User)?.getAvatar()}
          />
          <div className="outgoing-call__avatar-status" />
        </div>
      );

      return call ? (
        <CometChatOutgoingCall call={call} avatarView={getAvatarView(call)} />
      ) : null;
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={null}
    .outgoing-call__avatar .cometchat-avatar,
    .outgoing-call__avatar .cometchat-avatar__image {
      width: 160px;
      height: 160px;
      border-radius: 20px;
    }

    .outgoing-call__avatar-status {
      background-image: url("<relative path to your status icon>");
      height: 44px;
      width: 44px;
      background-size: contain;
      position: relative;
      top: -45px;
      right: -60px;
    }
    ```
  </Tab>
</Tabs>

### cancelButtonView

Replace the cancel call button.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/oaJbJ0bOxG69pJ1L/images/8b42e216-outgoing_calls_cancel_button_view_web_screens-d1571c92e058d7098b70a0a8ef2d6c54.png?fit=max&auto=format&n=oaJbJ0bOxG69pJ1L&q=85&s=1e4979bf50332aa84a7de81c9930be60" width="1282" height="802" data-path="images/8b42e216-outgoing_calls_cancel_button_view_web_screens-d1571c92e058d7098b70a0a8ef2d6c54.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx lines theme={null}
    function OutgoingCallCustomCancel() {
      const getCancelButtonView = (call: CometChat.Call) => (
        <div className="outgoing-call__cancel-button-wrapper">
          <div className="outgoing-call__cancel-button">
            <div className="outgoing-call__cancel-button-icon" />
            {"End Call"}
          </div>
        </div>
      );

      return call ? (
        <CometChatOutgoingCall
          call={call}
          cancelButtonView={getCancelButtonView(call)}
        />
      ) : null;
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css lines theme={null}
    .outgoing-call__cancel-button-wrapper {
      height: 64px;
      display: flex;
      justify-content: center;
      cursor: pointer;
    }

    .outgoing-call__cancel-button {
      display: flex;
      width: 330px;
      padding: 12px 30px;
      justify-content: center;
      align-items: center;
      gap: 12px;
      border-radius: 12px;
      background-color: #f44649;
      color: #fff;
      font: 500 20px Roboto;
    }

    .outgoing-call__cancel-button-icon {
      -webkit-mask: url("<relative path to your icon svg>") center center no-repeat;
      background: #e8e8e8;
      height: 32px;
      width: 32px;
    }
    ```
  </Tab>
</Tabs>

***

## Common Patterns

### Cancel and end the call session

```tsx lines theme={null}
import { useState, useEffect } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatOutgoingCall,
  CometChatUIKitConstants,
} from "@cometchat/chat-uikit-react";

function OutgoingCallWithEndSession() {
  const [call, setCall] = useState<CometChat.Call>();

  useEffect(() => {
    const uid = "uid";
    const callObject = new CometChat.Call(
      uid,
      CometChatUIKitConstants.MessageTypes.audio,
      CometChatUIKitConstants.MessageReceiverType.user
    );
    CometChat.initiateCall(callObject)
      .then((c) => setCall(c))
      .catch(console.log);
  }, []);

  const handleCancel = () => {
    if (call) {
      CometChat.endCall(call.getSessionId()).then(() => setCall(undefined));
    }
  };

  return call ? (
    <CometChatOutgoingCall call={call} onCallCanceled={handleCancel} />
  ) : null;
}
```

### Custom ringtone

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

function OutgoingCallCustomSound() {
  return (
    <CometChatOutgoingCall
      call={call}
      customSoundForCalls="/sounds/custom-ringtone.mp3"
    />
  );
}
```

### Silent outgoing call (no ringtone)

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

function SilentOutgoingCall() {
  return (
    <CometChatOutgoingCall call={call} disableSoundForCalls={true} />
  );
}
```

***

## CSS Architecture

The component uses CSS custom properties (design tokens) defined in `@cometchat/chat-uikit-react/css-variables.css`. The cascade:

1. Global tokens (e.g., `--cometchat-primary-color`, `--cometchat-error-color`) set on the `.cometchat` root wrapper.
2. Component CSS (`.cometchat-outgoing-call`) consumes these tokens via `var()` with fallback values.
3. Overrides target `.cometchat-outgoing-call` descendant selectors in a global stylesheet.

### Key Selectors

| Target                | Selector                                                                     |
| --------------------- | ---------------------------------------------------------------------------- |
| Root                  | `.cometchat-outgoing-call`                                                   |
| Title container       | `.cometchat-outgoing-call__title-container`                                  |
| Title text            | `.cometchat-outgoing-call__title`                                            |
| Subtitle text         | `.cometchat-outgoing-call__subtitle`                                         |
| Avatar container      | `.cometchat-outgoing-call__avatar`                                           |
| Avatar image          | `.cometchat-outgoing-call__avatar .cometchat-avatar`                         |
| Avatar text           | `.cometchat-outgoing-call__avatar .cometchat-avatar__text`                   |
| Cancel button wrapper | `.cometchat-outgoing-call__button`                                           |
| Cancel button         | `.cometchat-outgoing-call__button .cometchat-button`                         |
| Cancel button icon    | `.cometchat-outgoing-call__button .cometchat-button .cometchat-button__icon` |

### Example: Themed outgoing call

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b/7-hZ4AEh99NJJtEC/images/9ad3f928-outgoing_calls_style_web_screens-ed46fc9b93c86be7a2f4d300db54631f.png?fit=max&auto=format&n=7-hZ4AEh99NJJtEC&q=85&s=7c3e7e259906325f695856e8ddcf77a7" width="1282" height="802" data-path="images/9ad3f928-outgoing_calls_style_web_screens-ed46fc9b93c86be7a2f4d300db54631f.png" />
</Frame>

```css lines theme={null}
.cometchat-outgoing-call__avatar .cometchat-avatar {
  border-radius: 16px;
  background: #fbaa75;
}

.cometchat-outgoing-call__button .cometchat-button {
  border-radius: 8px;
  background: #f44649;
}

.cometchat-outgoing-call .cometchat-outgoing-call__title {
  text-align: center;
  font: 400 32px/38px "Times New Roman";
}
```

### Customization Matrix

| What to change                | Where           | Property/API                            | Example                                           |
| ----------------------------- | --------------- | --------------------------------------- | ------------------------------------------------- |
| Handle cancel action          | Component props | `onCallCanceled`                        | `onCallCanceled={() => endCall()}`                |
| Disable ringtone              | Component props | `disableSoundForCalls`                  | `disableSoundForCalls={true}`                     |
| Custom ringtone               | Component props | `customSoundForCalls`                   | `customSoundForCalls="/sounds/ring.mp3"`          |
| Replace UI sections           | Component props | View slot props                         | `titleView={<div>Custom</div>}`                   |
| Change colors, fonts, spacing | Global CSS      | Target `.cometchat-outgoing-call` class | `.cometchat-outgoing-call__title { color: red; }` |

***

## Props

All props are optional unless noted. Sorted alphabetically.

### avatarView

Custom JSX replacing the recipient avatar.

|         |                 |
| ------- | --------------- |
| Type    | `JSX.Element`   |
| Default | Built-in avatar |

***

### call

The outgoing call object from `CometChat.initiateCall()`.

|         |                  |
| ------- | ---------------- |
| Type    | `CometChat.Call` |
| Default | `undefined`      |

Component renders nothing when `call` is not provided.

***

### cancelButtonView

Custom JSX replacing the cancel call button.

|         |                        |
| ------- | ---------------------- |
| Type    | `JSX.Element`          |
| Default | Built-in cancel button |

***

### customSoundForCalls

URL to a custom audio file for the outgoing call ringtone.

|         |                   |
| ------- | ----------------- |
| Type    | `string`          |
| Default | Built-in ringtone |

***

### disableSoundForCalls

Disables the outgoing call ringtone.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### onCallCanceled

Callback fired when the cancel button is clicked.

|         |             |
| ------- | ----------- |
| Type    | `Function`  |
| Default | `undefined` |

***

### onError

Callback fired when the component encounters an error.

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

***

### subtitleView

Custom JSX replacing the "Calling..." subtitle text.

|         |                   |
| ------- | ----------------- |
| Type    | `JSX.Element`     |
| Default | Built-in subtitle |

***

### titleView

Custom JSX replacing the recipient name.

|         |                |
| ------- | -------------- |
| Type    | `JSX.Element`  |
| Default | Built-in title |

***

## Events

| Event                                | Payload          | Fires when        |
| ------------------------------------ | ---------------- | ----------------- |
| `CometChatCallEvents.ccOutgoingCall` | `CometChat.Call` | Call initiated    |
| `CometChatCallEvents.ccCallAccepted` | `CometChat.Call` | Recipient accepts |
| `CometChatCallEvents.ccCallRejected` | `CometChat.Call` | Recipient rejects |
| `CometChatCallEvents.ccCallEnded`    | `CometChat.Call` | Call session ends |

All events are `Subject<CometChat.Call>` from RxJS. Subscribe with `.subscribe()`, unsubscribe with the returned subscription's `.unsubscribe()`.

***

## CSS Selectors

| Target                | Selector                                                                     |
| --------------------- | ---------------------------------------------------------------------------- |
| Root                  | `.cometchat-outgoing-call`                                                   |
| Title container       | `.cometchat-outgoing-call__title-container`                                  |
| Title text            | `.cometchat-outgoing-call__title`                                            |
| Subtitle text         | `.cometchat-outgoing-call__subtitle`                                         |
| Avatar container      | `.cometchat-outgoing-call__avatar`                                           |
| Avatar image          | `.cometchat-outgoing-call__avatar .cometchat-avatar`                         |
| Avatar text           | `.cometchat-outgoing-call__avatar .cometchat-avatar__text`                   |
| Cancel button wrapper | `.cometchat-outgoing-call__button`                                           |
| Cancel button         | `.cometchat-outgoing-call__button .cometchat-button`                         |
| Cancel button icon    | `.cometchat-outgoing-call__button .cometchat-button .cometchat-button__icon` |