Incoming Call

Incoming Call — CometChat documentation.

The incoming call component is displayed when the user receives an incoming call, such as a voice call, video call. It serves as a visual representation of an incoming call and provides options for the user to answer or decline 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.

title

Heading text for the component

Name	Type	Description
title	string	Heading text of the component

Custom view

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

Name	Type	Description
subtitleView	Function as PropType<(call: CometChat.Call) => ViewType>	User-defined React component to customise the secondary text shown in the 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 incoming / outgoing messages.
customSoundForCalls	string	mp3 file asset of your choice to play for all incoming calls.

Function callback

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

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

Custom text

Customise the text or label displayed on the button

Name	Type	Description
acceptButtonText	string	Text or label displayed on the accept button within the component.
declineButtonText	string	Text or label displayed on the decline button 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
ListItemStyle	listItemStyle	Styling properties and values of the List item component
IncomingCallStyle	IncomingCallStyle	Styling properties of this component

Usage

Vue

//overriding style properties of the incomning call component
const incomingCallStyle:IncomingCallStyle = new IncomingCallStyle({
width: "320px",
height: "110px",
titleTextFont: "700 28px Inter",
titleTextColor: "black",
});

<CometChatIncomingCall :incomingCallStyle="incomingCallStyle"></CometChatIncomingCall>

---