> ## 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 Log Details

## Overview

The `CometChatCallLogDetails` is a [Widget](/ui-kit/flutter/v4/components-overview#components) that displays all the information related to a call. This widget displays information like user/group information, participants of the call, recordings of the call (if available) & history of all the previous calls. Also, it has buttons to start a new call.

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-013b37f0/ZhmN92ESUq6AiAGV/images/ab151270-call_logs_details_overview_cometchat_screens-07c840380ae6bc4e4bc2a7e15f9ab7e8.png?fit=max&auto=format&n=ZhmN92ESUq6AiAGV&q=85&s=70205d5d969e18d9605d3ab21e2a2691" alt="Image" width="4498" height="3121" data-path="images/ab151270-call_logs_details_overview_cometchat_screens-07c840380ae6bc4e4bc2a7e15f9ab7e8.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-013b37f0/7ukcXXCqdNW8D4Ro/images/1ff8dd83-call_logs_details_overview_cometchat_screens-1a55ae1478f5c30600d520f24bdd062f.png?fit=max&auto=format&n=7ukcXXCqdNW8D4Ro&q=85&s=01afc6509d44357a108bac77c46536f2" alt="Image" width="4498" height="3121" data-path="images/1ff8dd83-call_logs_details_overview_cometchat_screens-1a55ae1478f5c30600d520f24bdd062f.png" />
  </Tab>
</Tabs>

You can launch `CometChatCallLogDetails` 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 `CometChatCallLogDetails`

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    Navigator.push(context, MaterialPageRoute(builder: (context) => CometChatCallLogDetails(callLog: callLogObject))); // Call Log object is required to launch the CometChatCallLogDetails widget.
    ```
  </Tab>
</Tabs>

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

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

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

      @override
      State<CallLogDetailsExample> createState() => _CallLogDetailsExampleState();
    }

    class _CallLogDetailsExampleState extends State<CallLogDetailsExample> {

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SafeArea(
            child: Center(
              child: CometChatCallLogDetails(
                callLog: callLogObject
              ) // Call Log object is required to launch the CometChatCallLogDetails widget.
            )
          ),
        );
      }
    }
    ```
  </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. 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 theme={null}
    CometChatCallLogDetails(
      callLog: callLogObject,
      onError: (e) {
        // TODO("Not yet implemented")
      },
    )
    ```
  </Tab>
</Tabs>

***

##### 2. onBack

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

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogDetails(
      callLog: callLogObject,
      onBack: () {
        // 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 `CometChatCallLogDetails` 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.

The `CometChatCallLogDetails` widget does not have any exposed events.

***

## 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. CallLogDetails Style

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

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogDetails(
      callLog: callLogObject,
      detailStyle: const CallLogDetailsStyle(
        background: Color(0xFFE4EBF5),
        titleStyle: TextStyle(
          color: Colors.red,
          fontSize: 20,
          fontWeight: FontWeight.bold,
        ),
        separatorDateStyle: TextStyle(
          color: Colors.blue,
          fontSize: 14,
          fontWeight: FontWeight.bold,
        ),
        timeStyle: TextStyle(
          color: Colors.orange,
          fontSize: 12,
          fontWeight: FontWeight.bold,
        ),
        durationStyle: TextStyle(
          color: Colors.purple,
          fontSize: 10,
          fontWeight: FontWeight.bold,
        ),
        countStyle: TextStyle(
          color: Colors.yellow,
          fontSize: 8,
          fontWeight: FontWeight.bold,
        ),
        callStatusStyle: TextStyle(
          color: Colors.pink,
          fontSize: 10,
          fontWeight: FontWeight.bold,
        ),
        arrowIconTint: Colors.green,
      )
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-013b37f0/Oejiic_cET5SpCTq/images/fefbf0b7-call_logs_details_style_cometchat_screens-66930607b4689dee397f63f4f08e4b39.png?fit=max&auto=format&n=Oejiic_cET5SpCTq&q=85&s=d25bfce5d5fb208f643514a5796fedd6" alt="Image" width="4498" height="3121" data-path="images/fefbf0b7-call_logs_details_style_cometchat_screens-66930607b4689dee397f63f4f08e4b39.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-013b37f0/pkXPFA9z6doveCm5/images/ec701158-call_logs_details_style_cometchat_screens-96016f8d7c7ceab8d44e5b979ac5e64e.png?fit=max&auto=format&n=pkXPFA9z6doveCm5&q=85&s=9c233061567fe1aeb30904fd7edfdc9a" alt="Image" width="4498" height="3121" data-path="images/ec701158-call_logs_details_style_cometchat_screens-96016f8d7c7ceab8d44e5b979ac5e64e.png" />
  </Tab>
</Tabs>

List of properties exposed by `CallLogDetailsStyle`

| **Property**             | **Description**                             | **Code**                         |
| ------------------------ | ------------------------------------------- | -------------------------------- |
| **Arrow Icon Tint**      | Sets the color for the arrow icon.          | `arrowIconTint: Color?`          |
| **Background**           | Sets the background color.                  | `background: Color?`             |
| **Back Icon Tint**       | Sets the color for the back icon.           | `backIconTint: Color?`           |
| **Border**               | Sets the border.                            | `border: BoxBorder?`             |
| **Call Status Style**    | Sets the style for the call status text.    | `callStatusStyle: TextStyle?`    |
| **Count Style**          | Sets the style for the count text.          | `countStyle: TextStyle?`         |
| **Duration Style**       | Sets the style for the duration text.       | `durationStyle: TextStyle?`      |
| **Gradient**             | Sets the background gradient.               | `gradient: Gradient?`            |
| **Height**               | Sets the height of the widget.              | `height: double?`                |
| **Name Style**           | Sets the style for the name text.           | `nameStyle: TextStyle?`          |
| **Separator Date Style** | Sets the style for the separator date text. | `separatorDateStyle: TextStyle?` |
| **Time Style**           | Sets the style for the time text.           | `timeStyle: TextStyle?`          |
| **Title Style**          | Sets the style for the title text.          | `titleStyle: TextStyle?`         |
| **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 widget.               | `width: double?`                 |

***

##### 2. Avatar Styles

To apply customized styles to the `Avatar` widget in the `CometChatCallLogDetails` Widget, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/flutter/v4/avatar#avatarstyle)

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogDetails(
      callLog: callLogObject,
      avatarStyle: AvatarStyle(
          border: Border.all(width: 5),
          borderRadius: 20,
          background: Colors.red
      ),
    )
    ```
  </Tab>
</Tabs>

***

### 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 theme={null}
    CometChatCallLogDetails(
      callLog: callLogObject,
      datePattern: DateFormat("dd/MM/yyyy").format(DateTime.fromMillisecondsSinceEpoch(callLogObject!.startedAt!*1000)),
      separatorDatePattern: DateFormat("dd/MM/yyyy").format(DateTime.fromMillisecondsSinceEpoch(callLogObject!.endedAt!*1000)),
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-013b37f0/Dx3YUCFQDRLEoIQ3/images/dae5eacf-call_logs_details_functionality_cometchat_screens-c02f994cd79d06ce912f7072abfe9bd7.png?fit=max&auto=format&n=Dx3YUCFQDRLEoIQ3&q=85&s=4641ee4c21c0eb33a29de147d1676b89" alt="Image" width="4498" height="3121" data-path="images/dae5eacf-call_logs_details_functionality_cometchat_screens-c02f994cd79d06ce912f7072abfe9bd7.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-013b37f0/W54GlgzLKYQgwAbS/images/d9eae8db-call_logs_details_functionality_cometchat_screens-6d66f1cc33fc2fb322fe5011eb7dbb06.png?fit=max&auto=format&n=W54GlgzLKYQgwAbS&q=85&s=1354662867a7ef68fd6b1c77147fa1f7" alt="Image" width="4498" height="3121" data-path="images/d9eae8db-call_logs_details_functionality_cometchat_screens-6d66f1cc33fc2fb322fe5011eb7dbb06.png" />
  </Tab>
</Tabs>

Below is a list of customizations along with corresponding code snippets

| **Property**               | **Description**                             | **Code**                        |
| -------------------------- | ------------------------------------------- | ------------------------------- |
| **Arrow Icon**             | Sets the arrow icon.                        | `arrowIcon: Widget?`            |
| **Back Button**            | Sets the back button widget.                | `backButton: Widget?`           |
| **Date Pattern**           | Sets the date pattern.                      | `datePattern: String?`          |
| **Separator Date Pattern** | Sets the separator date pattern.            | `separatorDatePattern: String?` |
| **Show Back Button**       | Determines whether to show the back button. | `showBackButton: bool`          |
| **Theme**                  | Sets the theme.                             | `theme: ThemeData?`             |
| **Title**                  | Sets the title.                             | `title: String?`                |

***

### Advanced

For advanced-level customization, you can set custom widgets 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 widgets, layouts, and UI elements and then incorporate those into the widget.

#### CustomProfile View

You can customize your Profile widget to meet your specific preferences and needs.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogDetails(
      callLog: callLogObject,
      customProfileView: const Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.person, color: Color(0xFF6851D6), size: 50,),
          SizedBox(width: 20,),
          Text("User Name"),
        ],
      ),
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-013b37f0/IZ1rzMD0yphZc4Xc/images/df8cb4b0-call_logs_details_custom_profile_view_cometchat_screens-961cc4adc92647764e5fcb791a93ea2a.png?fit=max&auto=format&n=IZ1rzMD0yphZc4Xc&q=85&s=d9241b3acfa8562db63d721e10149926" alt="Image" width="4498" height="3121" data-path="images/df8cb4b0-call_logs_details_custom_profile_view_cometchat_screens-961cc4adc92647764e5fcb791a93ea2a.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-013b37f0/wmExTb2jx2mL9tyJ/images/aed7d0e7-call_logs_details_custom_profile_view_cometchat_screens-354283e098267b7909abba7065449572.png?fit=max&auto=format&n=wmExTb2jx2mL9tyJ&q=85&s=ce9870df4d505c1f037e95dc074bd2f7" alt="Image" width="4498" height="3121" data-path="images/aed7d0e7-call_logs_details_custom_profile_view_cometchat_screens-354283e098267b7909abba7065449572.png" />
  </Tab>
</Tabs>

***

#### Template and Options

##### 1. Options

The `CometChatCallLogDetailsOption` is the class providing structure for options to be shown.

<Tabs>
  <Tab title="Dart">
    ```dart Option theme={null}
    CometChatCallLogDetailsOption option1 = CometChatCallLogDetailsOption(
        id: "templateId1",
        onClick: (callLog, section, state) {},
        tail: const Icon(
        Icons.add_alert,
        color: Colors.pink,
        ),
        title: "Option 1",
        titleStyle: TextStyle(
            backgroundColor: Colors.lightBlue.shade200,
            fontWeight: FontWeight.bold
        ),
        icon: AssetConstants.heart,
        packageName: UIConstants.packageName
    ); // Created custom option
    ```
  </Tab>
</Tabs>

List of Functionality used to customize the appearance of the `CometChatCallLogDetailsOption` widget.

| **Property**     | **Description**                            | **Code**                    |
| ---------------- | ------------------------------------------ | --------------------------- |
| **Custom View**  | Sets a custom view widget.                 | `customView: Widget?`       |
| **On Click**     | Callback function to be executed on click. | `onClick: void Function()?` |
| **Tail**         | Sets the tail widget.                      | `tail: Widget?`             |
| **ID**           | Unique identifier for the option.          | `id: String`                |
| **Height**       | Sets the height of the option.             | `height: double?`           |
| **Title**        | Sets the title text.                       | `title: String?`            |
| **Icon**         | Sets the icon URL.                         | `icon: String?`             |
| **Package Name** | Sets the package name for the icon.        | `packageName: String?`      |
| **Title Style**  | Sets the text style for the title.         | `titleStyle: TextStyle?`    |

##### 2. Template

The `CometChatCallLogDetailsTemplate` defines the structure for sections of options available in the `CometChatCallLogDetails`

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogDetailsTemplate template = CometChatCallLogDetailsTemplate(
        id: "templateId2",
        hideItemSeparator: false,
        hideSectionSeparator: false,
        itemSeparatorColor: Colors.deepOrange,
        sectionSeparatorColor: Colors.pink,
        title: "Custom Template",
        titleStyle: const TextStyle(
            backgroundColor: Colors.yellow,
            fontWeight: FontWeight.bold
        ),
        options: (callLog, context, theme) => [option1, option2] // Added the options here
    ); // Created Template
    ```
  </Tab>
</Tabs>

List of Functionality exposed by `CometChatCallLogDetailsTemplate`

| **Property**                | **Description**                            | **Code**                                        |
| --------------------------- | ------------------------------------------ | ----------------------------------------------- |
| **ID**                      | Unique identifier for the template.        | `id: String`                                    |
| **Options**                 | List of options available in the template. | `options: List<CometChatCallLogDetailsOption>?` |
| **Title**                   | Title text for the template.               | `title: String?`                                |
| **Title Style**             | Text style for the title.                  | `titleStyle: TextStyle?`                        |
| **Section Separator Color** | Color for the section separator.           | `sectionSeparatorColor: Color?`                 |
| **Hide Section Separator**  | Flag to hide the section separator.        | `hideSectionSeparator: bool?`                   |
| **Item Separator Color**    | Color for the item separator.              | `itemSeparatorColor: Color?`                    |
| **Hide Item Separator**     | Flag to hide the item separator.           | `hideItemSeparator: bool?`                      |

**Example**

Here is the complete example for reference:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogDetails(
      callLog: callLogObject,
      data: (callLog) {
        CometChatCallLogDetailsOption option1 = CometChatCallLogDetailsOption(
            id: "templateId1",
            onClick: (callLog, section, state) {},
            tail: const Icon(
              Icons.add_alert,
              color: Colors.pink,
            ),
            title: "Option 1",
            titleStyle: TextStyle(
                backgroundColor: Colors.lightBlue.shade200,
                fontWeight: FontWeight.bold
            ),
            icon: AssetConstants.heart,
            packageName: UIConstants.packageName
        ); // Created custom option 1

        CometChatCallLogDetailsOption option2 = CometChatCallLogDetailsOption(
            id: "OPTION_ID_2",
            onClick: (callLog, section, state) {},
            tail: const Icon(
              Icons.account_balance_wallet,
              color: Colors.pink,
            ),
            title: "Option 2",
            titleStyle: TextStyle(
                backgroundColor: Colors.lightBlue.shade200,
                fontWeight: FontWeight.bold
            ),
            icon: AssetConstants.heart,
            packageName: UIConstants.packageName
        ); // Created custom option 2

        CometChatCallLogDetailsTemplate template = CometChatCallLogDetailsTemplate(
            id: "templateId2",
            hideItemSeparator: false,
            hideSectionSeparator: false,
            itemSeparatorColor: Colors.deepOrange,
            sectionSeparatorColor: Colors.pink,
            title: "Custom Template",
            titleStyle: const TextStyle(
                backgroundColor: Colors.yellow,
                fontWeight: FontWeight.bold
            ),
            options: (callLog, context, theme) => [option1, option2] // Added the options here
        ); // Created Template

        return [template]; // Return the template as a list
      },
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-013b37f0/en-qdWUpyc0gQJjA/images/614a243f-call_logs_details_template_and_options_cometchat_screens-6f16682c9f7cba5da1da12f54ca1c731.png?fit=max&auto=format&n=en-qdWUpyc0gQJjA&q=85&s=76ecfb001390820d2318535bf6125432" alt="Image" width="4498" height="3121" data-path="images/614a243f-call_logs_details_template_and_options_cometchat_screens-6f16682c9f7cba5da1da12f54ca1c731.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-013b37f0/vw_0NXjZvDpFf83K/images/b371d3aa-call_logs_details_template_and_options_cometchat_screens-f64125216eb1fb54a2e0ed0291a224a6.png?fit=max&auto=format&n=vw_0NXjZvDpFf83K&q=85&s=c68646818f3ff167e411e7666d1415bf" alt="Image" width="4498" height="3121" data-path="images/b371d3aa-call_logs_details_template_and_options_cometchat_screens-f64125216eb1fb54a2e0ed0291a224a6.png" />
  </Tab>
</Tabs>

***

## Configurations

[Configurations](/ui-kit/flutter/v4/components-overview#configurations) offer the ability to customize the properties of each widget within a Composite Widget.

`CometChatCallLogDetails` has `Call Log History`, `Call Log Recordings` and `Call Log Participants` widget. Hence, each of these widgets will have its individual `Configuration`.

* `Configurations` expose properties that are available in its individual widgets.

#### Call Log History

You can customize the properties of the Call Log History widget by making use of the `callLogHistoryConfiguration`. You can accomplish this by employing the `callLogHistoryConfiguration` props as demonstrated below:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogDetails(
        callLog: callLogObject,
        callLogHistoryConfiguration: CallLogHistoryConfiguration(
            title: "Your Title",
            callLogHistoryStyle: CallLogHistoryStyle(
              background: Color(0xFFE4EBF5),
            )
        )
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-013b37f0/wmExTb2jx2mL9tyJ/images/af735cb7-call_logs_details_call_logs_history_config_cometchat_screens-02aa061104c3ab6176940e1a41d38f14.png?fit=max&auto=format&n=wmExTb2jx2mL9tyJ&q=85&s=cd2422e28a73422bf4a9e8da8f4b489e" alt="Image" width="4498" height="3121" data-path="images/af735cb7-call_logs_details_call_logs_history_config_cometchat_screens-02aa061104c3ab6176940e1a41d38f14.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-013b37f0/IZ1rzMD0yphZc4Xc/images/df115c59-call_logs_details_call_logs_history_config_cometchat_screens-87a48a16698cd110590b3e32c9cabd91.png?fit=max&auto=format&n=IZ1rzMD0yphZc4Xc&q=85&s=dbbcb67a41072ddb36bf103acef31677" alt="Image" width="4498" height="3121" data-path="images/df115c59-call_logs_details_call_logs_history_config_cometchat_screens-87a48a16698cd110590b3e32c9cabd91.png" />
  </Tab>
</Tabs>

All exposed properties of `CallLogHistoryConfiguration` can be found under [Call Log History](/ui-kit/flutter/v4/call-log-history#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object.

***

#### Call Log Recordings

You can customize the properties of the Call Log Recordings widget by making use of the `callLogRecordingsConfiguration`. You can accomplish this by employing the `callLogRecordingsConfiguration` props as demonstrated below:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogDetails(
        callLog: callLogObject,
        recordingsConfiguration: CallLogRecordingsConfiguration(
            title: "Your Title",
            recordingsStyle: CallLogRecordingsStyle(
              background: Color(0xFFE4EBF5),
            )
        )
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-013b37f0/Czw6a3oEz4RIW75k/images/e2053ad5-call_logs_details_recording_config_cometchat_screens-4109351f6db3a2ec406702b0c7c4f67b.png?fit=max&auto=format&n=Czw6a3oEz4RIW75k&q=85&s=0d59a2aa8d06980703c45716639fa3e8" alt="Image" width="4498" height="3121" data-path="images/e2053ad5-call_logs_details_recording_config_cometchat_screens-4109351f6db3a2ec406702b0c7c4f67b.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-013b37f0/GhYys0LCUFYC4zjz/images/8a613812-call_logs_details_recording_config_cometchat_screens-17f3e23070be575f9ff0d199ac3a0561.png?fit=max&auto=format&n=GhYys0LCUFYC4zjz&q=85&s=dadab29f58d28dbc3cf0948dc834a4de" alt="Image" width="4498" height="3121" data-path="images/8a613812-call_logs_details_recording_config_cometchat_screens-17f3e23070be575f9ff0d199ac3a0561.png" />
  </Tab>
</Tabs>

All exposed properties of `CallLogRecordingsConfiguration` can be found under [Call Log Recordings](/ui-kit/flutter/v4/call-log-recording#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object.

***

#### Call Log Participants

You can customize the properties of the Call Log Participants widget by making use of the `callLogParticipantsConfiguration`. You can accomplish this by employing the `callLogParticipantsConfiguration` props as demonstrated below:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatCallLogDetails(
      callLog: callLogObject,
      participantsConfiguration: CallLogParticipantsConfiguration(
        title: "Your Title",
        listItemStyle: const ListItemStyle(
          background: Color(0xFFE4EBF5)
        )
      )
    )
    ```
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-013b37f0/cjVyusI_GGBVqQQt/images/1c7be03b-call_logs_details_participants_config_cometchat_screens-44563c51f730b6d70a15f7b907cedbed.png?fit=max&auto=format&n=cjVyusI_GGBVqQQt&q=85&s=592c8ae28a830deafdcabac177c847a7" alt="Image" width="4498" height="3121" data-path="images/1c7be03b-call_logs_details_participants_config_cometchat_screens-44563c51f730b6d70a15f7b907cedbed.png" />
  </Tab>

  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-013b37f0/i8B2UGtrYRnZmMmw/images/f64c20dd-call_logs_details_participants_config_cometchat_screens-aceae51bc69d118fe0742d0b99148b14.png?fit=max&auto=format&n=i8B2UGtrYRnZmMmw&q=85&s=9ba42f2efef7faaa147a0ddd91770e4c" alt="Image" width="4498" height="3121" data-path="images/f64c20dd-call_logs_details_participants_config_cometchat_screens-aceae51bc69d118fe0742d0b99148b14.png" />
  </Tab>
</Tabs>

All exposed properties of `CallLogParticipantsConfiguration` can be found under [Call Log Participants](/ui-kit/flutter/v4/call-log-participants#functionality). Properties marked with the 🛑 symbol are not accessible within the Configuration Object.

***