Version: v5

Call Buttons

Overview

The Call Button is a Component provides users with the ability to make calls, access call-related functionalities, and control call settings. Clicking this button typically triggers the call to be placed to the desired recipient.

Usage

Integration

Since CometChatCallButton is a custom view, it offers flexibility in integration. It can be easily added to any view or embedded within other components, enhancing user interactions and providing seamless access to call functionalities.

Swift

let user =  User(uid: "your-uid", name: "")

let cometChatCallButton = CometChatCallButtons(width: 2, height: 4)
cometChatCallButton.set(user: user)
container.addSubview(cometChatCallButton)

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

The setOnVoiceCallClick action is usually invoked when a voice call is initiated, executing predefined actions. However, by utilizing the provided code snippet, you can effortlessly tailor or override this default behavior to suit your unique requirements.

Swift

let cometChatCallButton = CometChatCallButtons(width: 2, height: 4)
.set(onVoiceCallClick: { user, group in
//Perform Your Action
})

2. SetOnVideoCallClick

The setOnVideoCallClick action is typically triggered when a video call is initiated, executing default actions. However, with the provided code snippet, you have the flexibility to easily customize or override this default behavior according to your specific preferences or requirements.

Swift

let cometChatCallButton = CometChatCallButtons(width: 2, height: 4)
.set(onVideoCallClick: { user, group in
//Perform Your Action
  
})

3. SetOnError

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

Swift

let cometChatCallButton = CometChatCallButtons(width: 2, height: 4)
    .set(onError: { error in
    //Perform Your 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. Filters can be applied using RequestBuilders of Chat SDK.

The CallButton component does not have any exposed filters.

Events

Events are emitted by a 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.

Events emitted by the Call buttons component is as follows.

Event	Description
onOutgoingCallAccepted	Triggers when the outgoing call is accepted.
onOutgoingCallRejected	Triggers when the outgoing call is rejected.

Add Listener

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

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

       // Subscribing for the listener to listen events from user module
        CometChatCallEvents.addListener("UNIQUE_ID", self as CometChatCallEventListener)
    }

}
 // Listener events from user module
extension  ViewController: CometChatCallEventListener {

    func onOutgoingCallAccepted(call: Call) {
        // Do Stuff
    }

    func onOutgoingCallRejected(call: Call){
        // Do Stuff
    }

    func onCallEnded(call: Call) {
        // Do Stuff
    }
}

Emitting Group Events
//emit this when the other user accepts the call
CometChatCallEvents.emitOnOutgoingCallAccepted(call: Call)

//emit this when the other user rejects a call
CometChatCallEvents.emitOnOutgoingCallRejected(call: Call)

//emit this when logged in user cancels a call
CometChatCallEvents.emitOnCallEnded(call: Call)

Remove Listener

View Controller
public override func viewWillDisappear(_ animated: Bool) {
      // Uncubscribing for the listener to listen events from user module
      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. CallButtons Style

You can customize the appearance of the CallButtons Component by applying the CallButtonStyle to it using the following code snippet.

Global level styling

Swift

CometChatCallButtons.style.audioCallButtonBackground = UIColor(hex: "#EDEAFA")
CometChatCallButtons.style.audioCallIconTint = UIColor(hex: "#6852D6")
CometChatCallButtons.style.videoCallButtonBackground = UIColor(hex: "#EDEAFA")
CometChatCallButtons.style.videoCallIconTint = UIColor(hex: "#6852D6")

Instance level styling

Swift

let callButtonStyle = CallButtonStyle()
callButtonStyle.audioCallButtonBackground = UIColor(hex: "#EDEAFA")
callButtonStyle.audioCallIconTint = UIColor(hex: "#6852D6")
callButtonStyle.videoCallButtonBackground = UIColor(hex: "#EDEAFA")
callButtonStyle.videoCallIconTint = UIColor(hex: "#6852D6")
        
let callButton = CometChatCallButtons(width: 10, height: 10)
callButton.style = callButtonStyle

List of properties exposed by ButtonStyle

Property	Description	Code
Video Call Icon Tint	Tint color for the video call icon.	`CometChatCallButtons.style.videoCallIconTint = CometChatTheme.iconColorPrimary`
Video Call Text Font	Font for the video call button text.	`CometChatCallButtons.style.videoCallTextFont = CometChatTypography.Body.regular`
Video Call Text Color	Color for the video call button text.	`CometChatCallButtons.style.videoCallTextColor = CometChatTheme.iconColorPrimary`
Video Call Button Background	Background color for the video call button.	`CometChatCallButtons.style.videoCallButtonBackground = .clear`
Video Call Corner Radius	Corner radius for the video call button.	`CometChatCallButtons.style.videoCallButtonCornerRadius = CometChatCornerStyle?`
Video Call Border Width	Border width for the video call button.	`CometChatCallButtons.style.videoCallButtonBorder = 0`
Video Call Border Color	Border color for the video call button.	`CometChatCallButtons.style.videoCallButtonBorderColor = .clear`
Video Call Icon	Icon for the video call button.	`CometChatCallButtons.style.videoCallIcon = UIImage(systemName: "video")`
Audio Call Icon Tint	Tint color for the audio call icon.	`CometChatCallButtons.style.audioCallIconTint = CometChatTheme.iconColorPrimary`
Audio Call Text Font	Font for the audio call button text.	`CometChatCallButtons.style.audioCallTextFont = CometChatTypography.Body.regular`
Audio Call Text Color	Color for the audio call button text.	`CometChatCallButtons.style.audioCallTextColor = CometChatTheme.iconColorPrimary`
Audio Call Button Background	Background color for the audio call button.	`CometChatCallButtons.style.audioCallButtonBackground = .clear`
Audio Call Corner Radius	Corner radius for the audio call button.	`CometChatCallButtons.style.audioCallButtonCornerRadius = CometChatCornerStyle?`
Audio Call Border Width	Border width for the audio call button.	`CometChatCallButtons.style.audioCallButtonBorder = 0`
Audio Call Border Color	Border color for the audio call button.	`CometChatCallButtons.style.audioCallButtonBorderColor = .clear`
Audio Call Icon	Icon for the audio call button.	`CometChatCallButtons.style.audioCallIcon = UIImage(systemName: "phone")`

Functionality

These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.

Below is a list of customizations along with corresponding code snippets

Property	Description	Code
hideVideoCallButton	Hides the video call button	`hideVoiceCallButton = true`
hideVoiceCallButton	Hides the voice call button	`hideVoiceCallButton = true`
set(user:User)	Sets the User object for CometChatCallButtons.	`.set(user:User)`
set(group:Group)	Sets the Group object for CometChatCallButtons.	`.set(group:Group)`
set(outgoingCallConfiguration:)	Sets the configuration for outgoing calls.	`setOutgoingCallConfiguration(config)`
set(customSoundForCalls:)	Sets a custom sound for incoming and outgoing calls.	`set(customSoundForCalls: URL)`
set(callSettingBuilder:)	Function to build call settings based on call type and participants.	`.set(callSettingBuilder { callType, participants in ... })`

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.

The Call Buttons component does not provide additional functionalities beyond this level of customization.

Configurations

Configurations offer the ability to customize the properties of each individual component within a Composite Component.

Configurations expose properties that are available in its individual components.

Outgoing Call

You can customize the properties of the Outgoing Call component by making use of the OutgoingCallConfiguration. You can accomplish this by employing the OutgoingCallConfiguration as demonstrated below:

Swift

// Create an object of  OutgoingCallConfiguration
let outgoingCallConfiguration = OutgoingCallConfiguration()

All exposed properties of OutgoingCallConfiguration can be found under Outgoing Call. Properties marked with the report symbol are not accessible within the Configuration Object.

Example

Let's say you want to change the style of the Outgoing Call subcomponent and, in addition, you only want to disable soundForCalls.

You can modify the style using the OutgoingCallStyle property, disable sound for calls using .disable(soundForCalls: bool) property.

Swift

let outgoingCallConfiguration = OutgoingCallConfiguration()
.disable(soundForCalls: true)

let cometChatCallButton = CometChatCallButtons(width: 2, height: 4)
cometChatCallButton.set(outgoingCallConfiguration: outgoingCallConfiguration)
cometChatCallButton.set(user: user)

Chat & Calling

Extend

UI Kits

SDKs

Widgets

APIs

Overview​

Usage​

Integration​

Actions​

1. SetOnVoiceCallClick​

2. SetOnVideoCallClick​

3. SetOnError​

Filters​

Events​

Customization​

Style​

1. CallButtons Style​

Functionality​

Advanced​

Configurations​

Outgoing Call​