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:
- Call Recipient Information: The component displays information about the recipient of the call, such as the recipient's name, profile picture, or contact details.
- Call Controls: The component includes button to cancel the outgoing call.
- 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>