Incoming call
is a Component that serves as a visual representation when the user receives an incoming call, such as a voice call or video call, providing options to answer or decline the call.
Incoming Call
is comprised of the following base components:
Components | Description |
---|---|
cometchat-list-item | This component’s view consists of avatar, status indicator , title, and subtitle. The fields are then mapped with the SDK’s user, group class. |
cometchat-icon | This component displays an icon. It currently supports only svg icons |
cometchat-label | This component provides descriptive information about the associated UI element. |
cometchat-button | This component represents a button with optional icon and text. |
cometchat-avatar | This component component displays an image or user’s avatar with fallback to the first two letters of the username |
onAccept
is triggered when you click the accept button of the Incoming Call
component. You can override this action using the following code snippet.
onDecline
is triggered when you click the Decline button of the Incoming Call
component. You can override this action using the following code snippet.
Component
. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders
of Chat SDK.
The Incoming Call
component does not have any exposed filters.
Component
. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.
The list of events emitted by the Incoming Call component is as follows.
Event | Description |
---|---|
ccCallRejected | This event is triggered when the initiated call is rejected by the receiver. |
ccCallAccepted | This event is triggered when the initiated call is accepted by the receiver. |
ccCallEnded | This event is triggered when the initiated call successfully ends. |
CometChatCallEvents
Listener’s
CometChatCallEvents
Listener’s
IncomingCallStyle
object to the Incoming Call
component.
IncomingCallStyle
.
Property | Description | Code |
---|---|---|
border | Used to set border | border?: string, |
borderRadius | Used to set border radius | borderRadius?: string; |
background | Used to set background colour | background?: string; |
height | Used to set height | height?: string; |
width | Used to set width | width?: string; |
titleTextFont | Used to set title text font | titleTextFont?: string, |
titleTextColor | Used to set title text color | titleTextColor?: string; |
subtitleTextFont | Used to set subtitle text font | subtitleTextFont?: string; |
subtitleTextColor | Used to set subtitle text color | subtitleTextColor?: string; |
acceptButtonTextFont | Used to set accept button text font | acceptButtonTextFont?: string; |
acceptButtonTextColor | Used to set accept button text color | acceptButtonTextColor?: string; |
acceptButtonBackground | Used to set accept button background color | acceptButtonBackground?: string; |
acceptButtonBorderRadius | Used to set accept button border radius | acceptButtonBorderRadius?: string; |
acceptButtonBorder | Used to set accept button border | acceptButtonBorder?: string; |
declineButtonTextFont | Used to set decline button text font | declineButtonTextFont?: string; |
declineButtonTextColor | Used to set decline button text color | declineButtonTextColor?: string; |
declineButtonBackground | Used to set decline button background color | declineButtonBackground?: string; |
declineButtonBorderRadius | Used to set decline button border radius | declineButtonBorderRadius?: string; |
declineButtonBorder | Used to set decline button border | declineButtonBorder?: string; |
Avatar
component within the Incoming Call
Component, you can use the following code snippet. For more information you can refer Avatar Styles.
List Item
component within the Incoming Call
Component, you can use the following code snippet. For more information, you can refer ListItem Styles.
Incoming Call
component.
Property | Description | Code |
---|---|---|
acceptButtonText | Used to set custom accept button text | [acceptButtonText]="'Your Custom Accept Button Text'" |
declineButtonText | Used to set custom decline button text | [declineButtonText]="'Your Decline Button Text'" |
customSoundForCalls | Used to set custom sound for incoming calls | [customSoundForCalls]="customSoundForCalls" |
disableSoundForCalls | Used to disable/enable the sound of incoming calls, by default it is set to false | [disableSoundForCalls]="true" |
call | CometChat call object consumed by the component to launch itself | [call]="callObject" |
subtitleView
property, you can modify the SubtitleView to meet your specific needs.
Example
Default:
CallScreenConfiguration
object.
The OngoingCallConfiguration
provides access to all the Action, Filters, Styles, Functionality, and Advanced properties of the OngoingCall component.
Please note that the Properties marked with the 🛑 symbol are not accessible within the Configuration Object.Example
ongoingCallConfiguration
.