Incoming Call - CometChat Docs

Overview

The 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.

Usage

Integration

CometChatIncomingCall is a custom view controller that offers versatility in its integration. It can be seamlessly launched via button clicks or any user-triggered action, enhancing the overall user experience and facilitating smoother interactions within the application.

Swift

// Create and configure incoming call view controller
let cometChatIncomingCall = CometChatIncomingCall().set(call: call)

// Present full screen
cometChatIncomingCall.modalPresentationStyle = .fullScreen
self.present(cometChatIncomingCall, animated: true)

If you are already using a navigation controller, you can use the pushViewController function instead of presenting the view controller.

Actions

Actions dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.

1. SetOnAcceptClick

The setOnAcceptClick action is typically triggered when the user clicks on the accept button, initiating a predefined action. However, by implementing the following code snippet, you can easily customize or override this default behavior to suit your specific requirements.

Swift

let cometChatIncomingCall = CometChatIncomingCall()
    .set(onAcceptClick: { call, controller in
        // Perform your custom action when call is accepted
    })

2. SetOnCancelClick

The setOnCancelClick action is typically triggered when the user clicks on the reject button, initiating a predefined action. However, by implementing the following code snippet, you can easily customize or override this default behavior to suit your specific requirements.

Swift

let cometChatIncomingCall = CometChatIncomingCall()
    .set(onCancelClick: { call, controller in
        // Perform your custom action when call is rejected
    })

3. OnError

You can customize this behavior by using the provided code snippet to override the On Error and improve error handling.

Swift

let incomingCallConfiguration = IncomingCallConfiguration()
    .set(onError: { error in
        // Perform your custom error handling action
    })

Filters

Filters allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized experience. Filters can be applied using RequestBuilders of Chat SDK. The IncomingCall component does not have any exposed filters.

Events

Events are emitted by a Component. By using events you can extend existing functionality. Being global events, they can be applied in multiple locations and are capable of being added or removed. Events emitted by the Incoming Call component are as follows:

Event	Description
`onIncomingCallAccepted`	Triggers when the logged-in user accepts the incoming call
`onIncomingCallRejected`	Triggers when the logged-in user rejects the incoming call
`onCallEnded`	Triggers when the initiated call successfully ends

Add Listener

// View controller from your project where you want to listen to events
public class ViewController: UIViewController {

    public override func viewDidLoad() {
        super.viewDidLoad()

        // Subscribe to call events
        CometChatCallEvents.addListener("UNIQUE_ID", self as CometChatCallEventListener)
    }
}

// Listener events from call module
extension ViewController: CometChatCallEventListener {

    func onIncomingCallAccepted(call: Call) {
        // Handle accepted call
    }
    
    func onIncomingCallRejected(call: Call) {
        // Handle rejected call
    }

    func onCallEnded(call: Call) {
        // Handle ended call
    }
}

// Emitting Call Events

// Emit when logged in user accepts the incoming call
CometChatCallEvents.emitOnIncomingCallAccepted(call: Call)

// Emit when logged in user rejects the incoming call
CometChatCallEvents.emitOnIncomingCallRejected(call: Call)

// Emit when logged in user ends a call
CometChatCallEvents.emitOnCallEnded(call: Call)

Remove Listener

public override func viewWillDisappear(_ animated: Bool) {
    // Unsubscribe from call events
    CometChatCallEvents.removeListener("LISTENER_ID_USED_FOR_ADDING_THIS_LISTENER")
}

Customization

To fit your app’s design requirements, you can customize the appearance of the conversation component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.

Style

Using Style you can customize the look and feel of the component in your app. These parameters typically control elements such as the color, size, shape, and fonts used within the component.

1. IncomingCall Style

You can customize the appearance of the IncomingCall Component by applying the IncomingCallStyle to it using the following code snippet. Global level styling

Swift

// Create custom avatar style
let customAvatarStyle = AvatarStyle()
customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
customAvatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 8)

// Apply global incoming call styles
CometChatIncomingCall.style.nameLabelFont = UIFont(name: "Times-New-Roman", size: 20)
CometChatIncomingCall.style.callLabelFont = UIFont(name: "Times-New-Roman", size: 14)
CometChatIncomingCall.style.acceptButtonCornerRadius = .init(cornerRadius: 8)
CometChatIncomingCall.style.rejectButtonCornerRadius = .init(cornerRadius: 8)
CometChatIncomingCall.avatarStyle = customAvatarStyle

Instance level styling

Swift

// Create custom avatar style
var customAvatarStyle = AvatarStyle()
customAvatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
customAvatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 20)

// Create custom incoming call style
var incomingCallStyle = IncomingCallStyle()
incomingCallStyle.nameLabelFont = UIFont(name: "Times-New-Roman", size: 20)
incomingCallStyle.callLabelFont = UIFont(name: "Times-New-Roman", size: 14)
incomingCallStyle.acceptButtonCornerRadius = .init(cornerRadius: 8)
incomingCallStyle.rejectButtonCornerRadius = .init(cornerRadius: 8)

// Apply styles to instance
let incomingCall = CometChatIncomingCall()
incomingCall.style = incomingCallStyle
incomingCall.avatarStyle = customAvatarStyle

List of properties exposed by IncomingCallStyle:

Property	Description	Code
`overlayBackgroundColor`	Background color for the overlay	`overlayBackgroundColor: UIColor`
`acceptButtonBackgroundColor`	Background color for the accept button	`acceptButtonBackgroundColor: UIColor`
`rejectButtonBackgroundColor`	Background color for the reject button	`rejectButtonBackgroundColor: UIColor`
`acceptButtonTintColor`	Tint color for the accept button	`acceptButtonTintColor: UIColor`
`rejectButtonTintColor`	Tint color for the reject button	`rejectButtonTintColor: UIColor`
`acceptButtonImage`	Icon image for the accept button	`acceptButtonImage: UIImage`
`rejectButtonImage`	Icon image for the reject button	`rejectButtonImage: UIImage`
`acceptButtonCornerRadius`	Sets corner radius for accept button	`acceptButtonCornerRadius: CometChatCornerStyle?`
`rejectButtonCornerRadius`	Sets corner radius for reject button	`rejectButtonCornerRadius: CometChatCornerStyle?`
`acceptButtonBorderWidth`	Sets border width for accept button	`acceptButtonBorderWidth: CGFloat?`
`rejectButtonBorderWidth`	Sets border width for reject button	`rejectButtonBorderWidth: CGFloat?`
`acceptButtonBorderColor`	Sets border color for accept button	`acceptButtonBorderColor: UIColor?`
`rejectButtonBorderColor`	Sets border color for reject button	`rejectButtonBorderColor: UIColor?`
`backgroundColor`	Background color for the call view	`backgroundColor: UIColor`
`cornerRadius`	Corner radius for the view	`cornerRadius: nil`
`borderColor`	Border color for the view	`borderColor: UIColor`
`borderWidth`	Border width for the view	`borderWidth: CGFloat`
`callLabelColor`	Text color for the call label	`callLabelColor: UIColor`
`callLabelFont`	Font for the call label	`callLabelFont: UIFont`
`nameLabelColor`	Text color for the name label	`nameLabelColor: UIColor`
`nameLabelFont`	Font for the name label	`nameLabelFont: UIFont`

Functionality

These are a set of small functional customizations that allow you to fine-tune the overall experience of the component.

Property	Description	Code
`disableSoundForCalls`	Disables sound for incoming calls	`disableSoundForCalls = true`
`setCustomSoundForCalls`	Sets a custom sound for incoming calls	`set(customSoundForCalls: URL)`

Advanced

For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.

SetListItemView

With this function, you can assign a custom view to the incoming call item view.

Swift

cometChatIncomingCall.set(listItemView: { call in
    let customView = CustomListItemView()
    return customView
})

Demonstration:

You can create a CustomListItemView as a custom UIView:

import UIKit

class CustomListItemView: UIView {
    
    private let avatarView: UILabel = {
        let label = UILabel()
        label.backgroundColor = UIColor.systemPurple
        label.textColor = .white
        label.font = UIFont.boldSystemFont(ofSize: 18)
        label.textAlignment = .center
        label.layer.cornerRadius = 20
        label.clipsToBounds = true
        return label
    }()
    
    private let callTypeLabel: UILabel = {
        let label = UILabel()
        label.text = "Voice Call"
        label.textColor = .darkGray
        label.font = UIFont.systemFont(ofSize: 14)
        return label
    }()
    
    private let userNameLabel: UILabel = {
        let label = UILabel()
        label.text = "George Allen"
        label.font = UIFont.boldSystemFont(ofSize: 16)
        return label
    }()
    
    private let endCallButton: UIButton = {
        let button = UIButton()
        button.setImage(UIImage(systemName: "phone.down.fill"), for: .normal)
        button.tintColor = .red
        button.backgroundColor = .white
        button.layer.cornerRadius = 18
        return button
    }()
    
    private let acceptCallButton: UIButton = {
        let button = UIButton()
        button.setImage(UIImage(systemName: "phone.fill"), for: .normal)
        button.tintColor = .white
        button.backgroundColor = UIColor.systemPurple
        button.layer.cornerRadius = 18
        return button
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupView() {
        backgroundColor = UIColor.systemPurple.withAlphaComponent(0.1)
        layer.cornerRadius = 20
        
        addSubview(avatarView)
        addSubview(callTypeLabel)
        addSubview(userNameLabel)
        addSubview(endCallButton)
        addSubview(acceptCallButton)
        
        avatarView.translatesAutoresizingMaskIntoConstraints = false
        callTypeLabel.translatesAutoresizingMaskIntoConstraints = false
        userNameLabel.translatesAutoresizingMaskIntoConstraints = false
        endCallButton.translatesAutoresizingMaskIntoConstraints = false
        acceptCallButton.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            avatarView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 12),
            avatarView.centerYAnchor.constraint(equalTo: centerYAnchor),
            avatarView.widthAnchor.constraint(equalToConstant: 40),
            avatarView.heightAnchor.constraint(equalToConstant: 40),
            
            callTypeLabel.topAnchor.constraint(equalTo: topAnchor, constant: 8),
            callTypeLabel.leadingAnchor.constraint(equalTo: avatarView.trailingAnchor, constant: 8),
            
            userNameLabel.topAnchor.constraint(equalTo: callTypeLabel.bottomAnchor, constant: 2),
            userNameLabel.leadingAnchor.constraint(equalTo: avatarView.trailingAnchor, constant: 8),
            
            endCallButton.trailingAnchor.constraint(equalTo: acceptCallButton.leadingAnchor, constant: -8),
            endCallButton.centerYAnchor.constraint(equalTo: centerYAnchor),
            endCallButton.widthAnchor.constraint(equalToConstant: 36),
            endCallButton.heightAnchor.constraint(equalToConstant: 36),
            
            acceptCallButton.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -12),
            acceptCallButton.centerYAnchor.constraint(equalTo: centerYAnchor),
            acceptCallButton.widthAnchor.constraint(equalToConstant: 36),
            acceptCallButton.heightAnchor.constraint(equalToConstant: 36)
        ])
    }
}

SetLeadingView

You can modify the leading view of an Incoming call component using the property below.

Swift

cometChatIncomingCall.set(leadingView: { call in
    let view = CustomLeadingView()
    return view
})

Demonstration:

You can create a CustomLeadingView as a custom UIView:

Swift

import UIKit

class CustomLeadingView: UIView {
    
    private let starIconView: UIImageView = {
        let imageView = UIImageView(image: UIImage(systemName: "star.fill"))
        imageView.tintColor = UIColor.systemPurple
        imageView.backgroundColor = .white
        imageView.layer.cornerRadius = 20
        imageView.contentMode = .center
        return imageView
    }()
    
    private let label: UILabel = {
        let label = UILabel()
        label.text = "PRO USER"
        label.font = UIFont.boldSystemFont(ofSize: 14)
        label.textColor = .white
        label.textAlignment = .center
        return label
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupView() {
        backgroundColor = UIColor.systemPurple
        layer.cornerRadius = 10
        
        addSubview(starIconView)
        addSubview(label)
        
        starIconView.translatesAutoresizingMaskIntoConstraints = false
        label.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            starIconView.centerXAnchor.constraint(equalTo: centerXAnchor),
            starIconView.topAnchor.constraint(equalTo: topAnchor, constant: 8),
            starIconView.widthAnchor.constraint(equalToConstant: 40),
            starIconView.heightAnchor.constraint(equalToConstant: 40),
            
            label.topAnchor.constraint(equalTo: starIconView.bottomAnchor, constant: 8),
            label.centerXAnchor.constraint(equalTo: centerXAnchor),
            label.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -8)
        ])
    }
}

SetTitleView

You can customize the title view of an incoming call component using the property below.

Swift

cometChatIncomingCall.set(titleView: { call in
    let view = CustomTitleView()
    return view
})

Demonstration:

You can create a CustomTitleView as a custom UIView which we will inflate in setTitleView():

Swift

import UIKit

class CustomTitleView: UIView {
    
    private let titleLabel: UILabel = {
        let label = UILabel()
        label.text = "Voice Call"
        label.textColor = .darkGray
        label.font = UIFont.systemFont(ofSize: 16)
        return label
    }()
    
    private let tagView: UIView = {
        let view = UIView()
        view.backgroundColor = .systemGreen
        view.layer.cornerRadius = 12
        return view
    }()
    
    private let starIconView: UIImageView = {
        let imageView = UIImageView(image: UIImage(systemName: "star.fill"))
        imageView.tintColor = .white
        return imageView
    }()
    
    private let tagLabel: UILabel = {
        let label = UILabel()
        label.text = "Important"
        label.textColor = .white
        label.font = UIFont.boldSystemFont(ofSize: 14)
        return label
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupView() {
        addSubview(titleLabel)
        addSubview(tagView)
        tagView.addSubview(starIconView)
        tagView.addSubview(tagLabel)
        
        titleLabel.translatesAutoresizingMaskIntoConstraints = false
        tagView.translatesAutoresizingMaskIntoConstraints = false
        starIconView.translatesAutoresizingMaskIntoConstraints = false
        tagLabel.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            titleLabel.leadingAnchor.constraint(equalTo: leadingAnchor),
            titleLabel.centerYAnchor.constraint(equalTo: centerYAnchor),
            
            tagView.leadingAnchor.constraint(equalTo: titleLabel.trailingAnchor, constant: 8),
            tagView.centerYAnchor.constraint(equalTo: centerYAnchor),
            tagView.heightAnchor.constraint(equalToConstant: 24),
            tagView.widthAnchor.constraint(equalToConstant: 100),
            
            starIconView.leadingAnchor.constraint(equalTo: tagView.leadingAnchor, constant: 8),
            starIconView.centerYAnchor.constraint(equalTo: tagView.centerYAnchor),
            starIconView.widthAnchor.constraint(equalToConstant: 16),
            starIconView.heightAnchor.constraint(equalToConstant: 16),
            
            tagLabel.leadingAnchor.constraint(equalTo: starIconView.trailingAnchor, constant: 4),
            tagLabel.centerYAnchor.constraint(equalTo: tagView.centerYAnchor)
        ])
    }
}

Outgoing Call - Display outgoing call interface
Ongoing Call - Display active call interface
Call Logs - Display call history

​Overview

​Usage

​Integration

​Actions

​1. SetOnAcceptClick

​2. SetOnCancelClick

​3. OnError

​Filters

​Events

​Customization

​Style

​1. IncomingCall Style

​Functionality

​Advanced

​SetListItemView

​SetLeadingView

​SetTitleView

​Related Components

Overview

Usage

Integration

Actions

1. SetOnAcceptClick

2. SetOnCancelClick

3. OnError

Filters

Events

Customization

Style

1. IncomingCall Style

Functionality

Advanced

SetListItemView

SetLeadingView

SetTitleView

Related Components