Outgoing Call

Overview

The outgoing call component is displayed when a user initiates an outgoing call, such as a voice call or a video call. It provides a visual representation of the outgoing call and offers options for the user to manage the call.

Elements found in the outgoing call component includes:

1. Call Recipient Information: The component displays information about the recipient of the call, such as the recipient’s name, profile picture, or contact details.
2. Call Controls: The component includes button to cancel the outgoing call.
3. Call Status: The component may display the call status, such as calling, to provide feedback to the user about the progress of the call.

Properties

Call Information

Details associated with the call.

Name	Type	Description
call	CometChat.Call	CometChat call object consumed by the component to launch itself.

Decline button

The button displayed to allow the user to cancel the outgoing call.

Name	Type	Description
declineButtonText	string	Text or label displayed on the decline button within the component.
declineButtonIconURL	string	Asset URL for the icon displayed on the decline button

Custom view

UI component created and customised by the developer to meet your design or functional requirements.

Name	Type	Description
customView	Function as PropType<(call: CometChat.Call) => ViewType>	User-defined Vue component to customise the card view of the outgoing component.

Sound

This refers to the action of activating or allowing the audio or sound capabilities of the component.

Name	Type	Description
disableSoundForCalls	boolean	When set to true, the component will not produce sound for all outgoing calls.
customSoundForCalls	string	mp3 file asset of your choice to play for all outgoing calls.

Function callback

Functions that can be invoked by the user in response to a specific event or condition.

Name	Type	Description
onCloseClicked	Function as PropType<() => void>	Override the method that is invoked when user clicks on the close button
onError	Function as PropType<(error: CometChat.CometChatException) => void>	Override the method that is invoked when an error is encountered within the component

Style

Styling properties and values of all the involved components

Name	Type	Description
AvatarStyle	AvatarStyle	Styling properties and values of the Avatar component
outgoingCallStyle	OutgoingCallStyle	Styling properties of this component

Usage

Vue

//applying custom style for the outgoing call component
const outgoingCallStyle:OutgoingCallStyle = new OutgoingCallStyle({
width: "320px",
height: "110px",
titleTextFont: "700 28px Inter",
titleTextColor: "black",
});

<CometChatOutgoingCall :outgoingCallStyle:="outgoingCallStyle"></CometChatOutgoingCall>

---