Incoming Call
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>