Outgoing Call - CometChat Docs

AI Integration Quick Reference

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

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`

Documentation Index

​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

​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

Props

avatarView

call

cancelButtonView

customSoundForCalls

disableSoundForCalls

onCallCanceled

onError

subtitleView

titleView

Events

CSS Selectors