> ## Documentation Index > Fetch the complete documentation index at: https://cometchat-013b37f0.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Call Buttons ## Overview The `Call Button` is a [Component](/ui-kit/ios/components-overview#components) 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 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 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 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 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 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 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 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 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 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 theme={null} let callButtons = CometChatCallButtons(width: 24, height: 24) callButtons.set(controller: UIViewController) // Passing the controller is required ``` ***