> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Call Buttons
> Add CometChat iOS UI Kit call buttons for voice and video calls with user or group targets, click callbacks, and error handling.
The `CometChatCallButtons` 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.
```json theme={null}
{
"component": "CometChatCallButtons",
"package": "CometChatUIKitSwift",
"import": "import CometChatUIKitSwift\nimport CometChatSDK",
"description": "Provides voice and video call buttons for initiating calls with users or groups",
"inherits": "UIView",
"primaryOutput": {
"callback": "onVoiceCallClick",
"type": "(User?, Group?) -> Void"
},
"props": {
"data": {
"user": { "type": "User?", "default": "nil" },
"group": { "type": "Group?", "default": "nil" }
},
"callbacks": {
"onVoiceCallClick": "(User?, Group?) -> Void",
"onVideoCallClick": "(User?, Group?) -> Void",
"onError": "(CometChatException) -> Void"
},
"visibility": {
"hideVoiceCallButton": { "type": "Bool", "default": false },
"hideVideoCallButton": { "type": "Bool", "default": false }
}
},
"events": [
{ "name": "onOutgoingCallAccepted", "payload": "Call", "description": "Fires when outgoing call is accepted" },
{ "name": "onOutgoingCallRejected", "payload": "Call", "description": "Fires when outgoing call is rejected" }
],
"sdkListeners": [],
"compositionExample": {
"description": "CallButtons is typically used in MessageHeader or as standalone call controls",
"components": ["CometChatCallButtons", "CometChatOutgoingCall"],
"flow": "User taps call button → OutgoingCall screen appears → Call connects or is rejected"
}
}
```
| Field | Value |
| --------- | ---------------------- |
| Component | `CometChatCallButtons` |
| Package | `CometChatUIKitSwift` |
| Inherits | `UIView` |
***
## 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 lines theme={null}
let user = User(uid: "your-uid", name: "")
let cometChatCallButton = CometChatCallButtons(width: 24, height: 24)
cometChatCallButton.set(user: user)
container.addSubview(cometChatCallButton)
```
***
### Actions
[Actions](/ui-kit/ios/components-overview#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 lines theme={null}
let cometChatCallButton = CometChatCallButtons(width: 24, height: 24)
.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 lines theme={null}
let cometChatCallButton = CometChatCallButtons(width: 24, height: 24)
.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 lines theme={null}
let cometChatCallButton = CometChatCallButtons(width: 24, height: 24)
.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](/ui-kit/ios/components-overview#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. |
```swift lines theme={null}
// 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
}
}
```
```swift Emitting Group Events theme={null}
//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)
```
***
```swift View Controller theme={null}
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 lines theme={null}
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 lines theme={null}
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](/ui-kit/ios/components-overview#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 lines theme={null}
// Create an object of OutgoingCallConfiguration
let outgoingCallConfiguration = OutgoingCallConfiguration()
```
All exposed properties of `OutgoingCallConfiguration` can be found under [Outgoing Call](/ui-kit/ios/outgoing-call). Properties marked with the 🛑 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 lines theme={null}
let outgoingCallConfiguration = OutgoingCallConfiguration()
.disable(soundForCalls: true)
let cometChatCallButton = CometChatCallButtons(width: 24, height: 24)
cometChatCallButton.set(outgoingCallConfiguration: outgoingCallConfiguration)
cometChatCallButton.set(user: user)
```
***
To ensure that the `CallButtons` is properly configured, passing the controller is mandatory.
* Swift
```swift lines theme={null}
let callButtons = CometChatCallButtons(width: 24, height: 24)
callButtons.set(controller: UIViewController) // Passing the controller is required
```
***
## Props
All props are optional.
***
### user
The user for 1-on-1 call buttons. Pass either `user` or `group`, not both.
| | |
| ------- | ------- |
| Type | `User?` |
| Default | `nil` |
***
### group
The group for group call buttons. Pass either `user` or `group`, not both.
| | |
| ------- | -------- |
| Type | `Group?` |
| Default | `nil` |
***
### hideVoiceCallButton
Hides the voice call button.
| | |
| ------- | ------- |
| Type | `Bool` |
| Default | `false` |
***
### hideVideoCallButton
Hides the video call button.
| | |
| ------- | ------- |
| Type | `Bool` |
| Default | `false` |
***
### outgoingCallConfiguration
Configuration object for the internal `CometChatOutgoingCall` sub-component.
| | |
| ------- | ----------------------------- |
| Type | `OutgoingCallConfiguration` |
| Default | `OutgoingCallConfiguration()` |
***
### customSoundForCalls
Custom sound file URL for calls.
| | |
| ------- | ------ |
| Type | `URL?` |
| Default | `nil` |
***
## Events
Events emitted by the Call Buttons component:
| Event | Description |
| ------------------------ | ------------------------------------------- |
| `onOutgoingCallAccepted` | Triggers when the outgoing call is accepted |
| `onOutgoingCallRejected` | Triggers when the outgoing call is rejected |
| `onCallEnded` | Triggers when the call ends |
***
## Common Patterns
### Add Call Buttons to Message Header
Integrate call buttons into a custom message header:
```swift lines theme={null}
class CustomMessageHeader: UIView {
private var callButtons: CometChatCallButtons!
func configure(with user: User) {
callButtons = CometChatCallButtons(width: 24, height: 24)
callButtons.set(user: user)
callButtons.set(controller: parentViewController)
// Add to header view
addSubview(callButtons)
// Set up constraints...
}
}
```
### Voice-Only Call Button
Show only the voice call button for audio-focused apps:
```swift lines theme={null}
let callButtons = CometChatCallButtons(width: 24, height: 24)
callButtons.set(user: user)
callButtons.hideVideoCallButton = true
callButtons.set(controller: self)
```
### Custom Call Initiation with Confirmation
Show confirmation before starting a call:
```swift lines theme={null}
let callButtons = CometChatCallButtons(width: 24, height: 24)
callButtons.set(user: user)
callButtons.set(onVoiceCallClick: { [weak self] user, group in
let alert = UIAlertController(
title: "Start Voice Call",
message: "Call \(user?.name ?? group?.name ?? "")?",
preferredStyle: .alert
)
alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
alert.addAction(UIAlertAction(title: "Call", style: .default) { _ in
// Initiate the call
self?.initiateVoiceCall(to: user, group: group)
})
self?.present(alert, animated: true)
})
```
### Group Video Call Button
Configure call buttons for group video calls:
```swift lines theme={null}
let callButtons = CometChatCallButtons(width: 24, height: 24)
callButtons.set(group: group)
callButtons.hideVoiceCallButton = true // Groups often use video calls
callButtons.set(controller: self)
// Custom call settings for group calls
callButtons.set(callSettingBuilder: { callType, participants in
return CallSettingsBuilder()
.setDefaultLayout(true)
.setShowRecordingButton(true)
})
```
***
## Related Components
Display incoming call interface
Display outgoing call interface
Display call history
***