​
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.
NameTypeDescription
callCometChat.CallCometChat call object consumed by the component to launch itself.

​
Decline button

The button displayed to allow the user to cancel the outgoing call.
NameTypeDescription
declineButtonTextstringText or label displayed on the decline button within the component.
declineButtonIconURLstringAsset 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.
NameTypeDescription
customViewFunction 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.
NameTypeDescription
disableSoundForCallsbooleanWhen set to true, the component will not produce sound for all outgoing calls.
customSoundForCallsstringmp3 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.
NameTypeDescription
onCloseClickedFunction as PropType<() => void>Override the method that is invoked when user clicks on the close button
onErrorFunction 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
NameTypeDescription
AvatarStyleAvatarStyleStyling properties and values of the Avatar component
outgoingCallStyleOutgoingCallStyleStyling properties of this component
Usage 
//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>