Outgoing Call - CometChat Docs

AI Agent Component Spec

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

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().

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;

Minimal Render

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.

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.

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`

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.

TypeScript
CSS

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;
}

.outgoing-call__title {
  color: #141414;
  text-align: center;
  font: 500 24px Roboto;
}

subtitleView

Replace the “Calling…” text.

TypeScript
CSS

const getSubtitleView = (call: CometChat.Call) => (
  <div className="outgoing-call__subtitle">
    <div className="outgoing-call__subtitle-icon" />
    {"Calling..."}
  </div>
);

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

.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;
}

avatarView

Replace the recipient avatar.

TypeScript
CSS

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;
}

.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;
}

cancelButtonView

Replace the cancel call button.

TypeScript
CSS

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;
}

.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;
}

Common Patterns

Cancel and end the call session

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

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

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

Silent outgoing call (no ringtone)

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:

Global tokens (e.g., --cometchat-primary-color, --cometchat-error-color) set on the .cometchat root wrapper.
Component CSS (.cometchat-outgoing-call) consumes these tokens via var() with fallback values.
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

.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; }`

Accessibility

The component renders a modal-like overlay. The cancel button is keyboard-focusable and activates on Enter/Space. The recipient name and “Calling…” subtitle are rendered as text content accessible to screen readers. The avatar includes the recipient name as alt text via CometChatAvatar.

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`

​Where It Fits

​Minimal Render

​Actions and Events

​Callback Props

​onCallCanceled

​onError

​Global UI Events

​SDK Events (Real-Time, Automatic)

​Custom View Slots

​titleView

​subtitleView

​avatarView

​cancelButtonView

​Common Patterns

​Cancel and end the call session

​Custom ringtone

​Silent outgoing call (no ringtone)

​CSS Architecture

​Key Selectors

​Example: Themed outgoing call

​Customization Matrix

​Accessibility

​Props

​avatarView

​call

​cancelButtonView

​customSoundForCalls

​disableSoundForCalls

​onCallCanceled

​onError

​subtitleView

​titleView

​Events

​CSS Selectors

Where It Fits

Minimal Render

Actions and Events

Callback Props

onCallCanceled

onError

Global UI Events

SDK Events (Real-Time, Automatic)

Custom View Slots

titleView

subtitleView

avatarView

cancelButtonView

Common Patterns

Cancel and end the call session

Custom ringtone

Silent outgoing call (no ringtone)

CSS Architecture

Key Selectors

Example: Themed outgoing call

Customization Matrix

Accessibility

Props

avatarView

call

cancelButtonView

customSoundForCalls

disableSoundForCalls

onCallCanceled

onError

subtitleView

titleView

Events

CSS Selectors