> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-restapi-chatapi-quotedmessages.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Call Buttons

## Overview

The `CometChatCallButtons` is a [Widget](/ui-kit/flutter/v4/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.

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-restapi-chatapi-quotedmessages/g9EvKL8A_OgTlyTB/images/e30627a1-call_buttons_overview_cometchat_screens-c73ca894fb943aed5432063296bed97f.png?fit=max&auto=format&n=g9EvKL8A_OgTlyTB&q=85&s=407596d65de212e97944dc5bd3c5b6e2" alt="Image" width="4498" height="3121" data-path="images/e30627a1-call_buttons_overview_cometchat_screens-c73ca894fb943aed5432063296bed97f.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-restapi-chatapi-quotedmessages/dJHQLoYq6FrpjgE8/images/2e29e463-call_buttons_overview_cometchat_screens-9b1ba3595c212bfecedad1847cec156a.png?fit=max&auto=format&n=dJHQLoYq6FrpjgE8&q=85&s=7846b8048b1cd14e6dc351d4a483fd4b" alt="Image" width="4498" height="3121" data-path="images/2e29e463-call_buttons_overview_cometchat_screens-9b1ba3595c212bfecedad1847cec156a.png" />
  </Tab>
</Tabs>

## Usage

### Integration

You can launch `CometChatCallButtons` directly using `Navigator.push`, or you can define it as a widget within the `build` method of your `State` class.

##### 1. Using Navigator to Launch `CometChatCallButtons`

<Tabs>
  <Tab title="Dart">
    ```dart
    Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatCallButtons()));
    ```
  </Tab>
</Tabs>

##### 2. Embedding `CometChatCallButtons` as a Widget in the build Method

<Tabs>
  <Tab title="Dart">
    ```dart
    import 'package:cometchat_calls_uikit/cometchat_calls_uikit.dart';
    import 'package:flutter/material.dart';

    class CallButtonsExample extends StatefulWidget {
      const CallButtonsExample({super.key});

      @override
      State<CallButtonsExample> createState() => _CallButtonsExampleState();
    }

    class _CallButtonsExampleState extends State<CallButtonsExample> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SafeArea(
            child: Center(
              child: CometChatCallButtons()
            )
          ),
        );
      }
    }
    ```
  </Tab>
</Tabs>

***

### Actions

[Actions](/ui-kit/flutter/v4/components-overview#actions) dictate how a widget functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the widget to fit your specific needs.

##### 1. onVoiceCallClick

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

<Tabs>
  <Tab title="Dart">
    ```dart
    CometChatCallButtons(
      onVoiceCallClick: (BuildContext buildContext, User? user, Group? group) {
        // TODO("Not yet implemented")
      },
    )
    ```
  </Tab>
</Tabs>

***

##### 2. onVideoCallClick

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

<Tabs>
  <Tab title="Dart">
    ```dart
    CometChatCallButtons(
      onVideoCallClick: (BuildContext buildContext, User? user, Group? group) {
        // TODO("Not yet implemented")
      },
    )
    ```
  </Tab>
</Tabs>

***

##### 3. onError

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

<Tabs>
  <Tab title="Dart">
    ```dart
    CometChatCallButtons(
      onError: (e) {
        // TODO("Not yet implemented")
      },
    )
    ```
  </Tab>
</Tabs>

***

### Filters

**Filters** allow you to customize the data displayed in a list within a Widget. 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 widget does not have any exposed filters.

***

### Events

[Events](/ui-kit/flutter/v4/components-overview#events) are emitted by a `Widget`. 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 widget are as follows.

| Event              | Description                                  |
| ------------------ | -------------------------------------------- |
| **ccCallAccepted** | Triggers when the outgoing call is accepted. |
| **ccCallRejected** | Triggers when the outgoing call is rejected. |

<Tabs>
  <Tab title="Dart">
    ```dart
    import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
    import 'package:flutter/material.dart';

    class YourScreen extends StatefulWidget {
      const YourScreen({super.key});

      @override
      State<YourScreen> createState() => _YourScreenState();
    }

    class _YourScreenState extends State<YourScreen> with CometChatCallEventListener {

      @override
      void initState() {
        super.initState();
        CometChatCallEvents.addCallEventsListener("unique_listener_ID", this); // Add the listener
      }

      @override
      void dispose(){
        super.dispose();
        CometChatCallEvents.removeCallEventsListener("unique_listener_ID"); // Remove the listener
      }

      @override
      void ccCallAccepted(Call call) {
        // TODO("Not yet implemented")
      }

      @override
      void ccCallRejected(Call call) {
        // TODO("Not yet implemented")
      }

      @override
      Widget build(BuildContext context) {
        return const Placeholder();
      }

    }
    ```
  </Tab>
</Tabs>

***

## Customization

To fit your app's design requirements, you can customize the appearance of the conversation widget. 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 widget in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the widget.

##### 1. CallButtons Style

You can customize the appearance of the `CometChatCallButtons` Widget by applying the `CallButtonsStyle` to it using the following code snippet.

<Tabs>
  <Tab title="Dart">
    ```dart
    CometChatCallButtons(
      callButtonsStyle: CallButtonsStyle(
        background: Color(0xFFE4EBF5),
        voiceCallIconTint: Colors.green,
        videoCallIconTint: Colors.blue,
        border: Border.all(color: Colors.grey, width: 5),
        borderRadius: 50,
      ),
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-restapi-chatapi-quotedmessages/3LON-EMmS_vrBsw6/images/bb67b677-call_buttons_style_cometchat_screens-0b8315ff59f8b07d0084158e177c96f2.png?fit=max&auto=format&n=3LON-EMmS_vrBsw6&q=85&s=7b4be3a320144eb3bfc99b896b5bb8fe" alt="Image" width="4498" height="3121" data-path="images/bb67b677-call_buttons_style_cometchat_screens-0b8315ff59f8b07d0084158e177c96f2.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-restapi-chatapi-quotedmessages/BLYnyZ3UCBkhhyX6/images/0f6706ca-call_buttons_style_cometchat_screens-cc33e335af0c1db5b0ae0e05e64d26dc.png?fit=max&auto=format&n=BLYnyZ3UCBkhhyX6&q=85&s=2bafe7834941414c9a42c8caa1ac49fe" alt="Image" width="4498" height="3121" data-path="images/0f6706ca-call_buttons_style_cometchat_screens-cc33e335af0c1db5b0ae0e05e64d26dc.png" />
  </Tab>
</Tabs>

List of properties exposed by `CallButtonsStyle`

| **Property**             | Description                                           | Code                        |
| ------------------------ | ----------------------------------------------------- | --------------------------- |
| **Background**           | Sets the background color of the call buttons style.  | `background: Color?`        |
| **Border**               | Sets the border properties of the call buttons style. | `border: BoxBorder?`        |
| **Border Radius**        | Sets the border radius of the call buttons style.     | `borderRadius: double?`     |
| **Gradient**             | Sets the gradient applied to the call buttons style.  | `gradient: Gradient?`       |
| **Height**               | Sets the height of the call buttons style.            | `height: double?`           |
| **Video Call Icon Tint** | Sets the color for the video call icon.               | `videoCallIconTint: Color?` |
| **Voice Call Icon Tint** | Sets the color for the voice call icon.               | `voiceCallIconTint: Color?` |
| **Width**                | Sets the width of the call buttons style.             | `width: double?`            |

***

### Functionality

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

**Example**

Here is the example for reference:

<Tabs>
  <Tab title="Dart">
    ```dart
    CometChatCallButtons(
      voiceCallIconText: "Voice Call",
      hideVideoCall: true,
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-restapi-chatapi-quotedmessages/EGnYjxNk3zPrXSKb/images/1ebe0428-call_buttons_functionality_cometchat_screens-a536c3b346be2f1e23a61c028dd2e3f6.png?fit=max&auto=format&n=EGnYjxNk3zPrXSKb&q=85&s=0c16bb095ef0a7367e28576d9a8cbb66" alt="Image" width="4498" height="3121" data-path="images/1ebe0428-call_buttons_functionality_cometchat_screens-a536c3b346be2f1e23a61c028dd2e3f6.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-restapi-chatapi-quotedmessages/-s_AEnuh4XXBBZM1/images/34ec636c-call_buttons_functionality_cometchat_screens-a05c3bd42ae3b3d34604048a6987bf7d.png?fit=max&auto=format&n=-s_AEnuh4XXBBZM1&q=85&s=dc7faec6cb255c7c5392dc029ae4b531" alt="Image" width="4498" height="3121" data-path="images/34ec636c-call_buttons_functionality_cometchat_screens-a05c3bd42ae3b3d34604048a6987bf7d.png" />
  </Tab>
</Tabs>

Below is a list of customizations along with corresponding code snippets

| **Property**                   | Description                                    | Code                              |
| ------------------------------ | ---------------------------------------------- | --------------------------------- |
| **Hide Video Call**            | Hides the video call button.                   | `hideVideoCall: bool?`            |
| **Hide Voice Call**            | Hides the voice call button.                   | `hideVoiceCall: bool?`            |
| **Video Call Icon**            | Sets the icon for the video call button.       | `videoCallIcon: Icon?`            |
| **Video Call Icon Hover Text** | Sets the hover text for the video call button. | `videoCallIconHoverText: String?` |
| **Video Call Icon Text**       | Sets the text for the video call button.       | `videoCallIconText: String?`      |
| **Voice Call Icon**            | Sets the icon for the voice call button.       | `voiceCallIcon: Icon?`            |
| **Voice Call Icon Hover Text** | Sets the hover text for the voice call button. | `voiceCallIconHoverText: String?` |
| **Voice Call Icon Text**       | Sets the text for the voice call button.       | `voiceCallIconText: String?`      |

***

### Advanced

For advanced-level customization, you can set custom views to the widget. This lets you tailor each aspect of the widget 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 widget.

The `CometChatCallButtons` widget does not provide additional functionalities beyond this level of customization.

***