> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-uikit-sdk-card-mess.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Call Features

> Add CometChat Angular UI Kit call features for voice and video calls, call logs, ongoing calls, incoming calls, and call buttons.

## Overview

CometChat Calls integrates 1:1 and group audio/video calling into the Angular UIKit. Install the Calls SDK and the UIKit auto-detects it, enabling call components.

<Note>
  Ensure `CometChatUIKit.init()` has completed and the user is logged in before using call features.
</Note>

## Integration

Install the Calls SDK:

```bash theme={null}
npm install @cometchat/calls-sdk-javascript
```

Then enable calling in your `UIKitSettingsBuilder`:

```typescript theme={null}
const settings = new UIKitSettingsBuilder()
  .setAppId('APP_ID')
  .setRegion('REGION')
  .setAuthKey('AUTH_KEY')
  .setCallingEnabled(true)
  .build();
```

<Warning>
  Both steps are required. Installing the Calls SDK alone is not enough — you must also call `.setCallingEnabled(true)` on the builder. Without it, call buttons remain hidden and the Calls SDK is not initialized.
</Warning>

When enabled, [cometchat-call-buttons](/ui-kit/angular/components/cometchat-call-buttons) renders in [cometchat-message-header](/ui-kit/angular/components/cometchat-message-header) and the trailing call button appears in [cometchat-call-logs](/ui-kit/angular/components/cometchat-call-logs).

### Custom Call App Settings

By default the UIKit builds `CallAppSettings` from your `appId` and `region`. If you need custom configuration (e.g. a different region for the Calls SDK or additional settings), pass your own `CallAppSettings`:

```typescript theme={null}
import { CometChatUIKitCalls } from '@cometchat/calls-sdk-javascript';

const callAppSettings = new CometChatUIKitCalls.CallAppSettingsBuilder()
  .setAppId('APP_ID')
  .setRegion('REGION')
  .build();

const settings = new UIKitSettingsBuilder()
  .setAppId('APP_ID')
  .setRegion('REGION')
  .setAuthKey('AUTH_KEY')
  .setCallingEnabled(true)
  .setCallAppSettings(callAppSettings)
  .build();
```

<Info>
  `setCallAppSettings` is optional. When omitted, the UIKit automatically creates settings from the `appId` and `region` you already provided.
</Info>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-uikit-sdk-card-mess/065UUIvmN1bUUbXz/images/cf123e9d-calling_call_buttons_web_screens-a0a134d7d742a761689aaebe2d6e71c2.png?fit=max&auto=format&n=065UUIvmN1bUUbXz&q=85&s=89b9a4ffaa2051cde67dd034f322edf6" width="1282" height="802" data-path="images/cf123e9d-calling_call_buttons_web_screens-a0a134d7d742a761689aaebe2d6e71c2.png" />
</Frame>

## Features

### Incoming Call

The [cometchat-incoming-call](/ui-kit/angular/components/cometchat-incoming-call) component displays a call screen when a call is received, showing caller info with accept/reject options.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-uikit-sdk-card-mess/dL2e578XDWDZCoRb/images/816facad-calling_incoming_call_web_screens-b969721c9da4153958fb08c3b7d7ec3c.png?fit=max&auto=format&n=dL2e578XDWDZCoRb&q=85&s=a37a0f0b6860a41a55b17b2fa8db197b" width="1282" height="802" data-path="images/816facad-calling_incoming_call_web_screens-b969721c9da4153958fb08c3b7d7ec3c.png" />
</Frame>

### Outgoing Call

The [cometchat-outgoing-call](/ui-kit/angular/components/cometchat-outgoing-call) component displays an outgoing call screen with recipient info and call status. Transitions to the ongoing call screen when the receiver accepts.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-uikit-sdk-card-mess/yKNmn6kEF-TLiUzP/images/444a971e-calling_outgoing_call_web_screens-ace6b41a91fe1a23b9e1aaf99e51793e.png?fit=max&auto=format&n=yKNmn6kEF-TLiUzP&q=85&s=c3f3776fffb6571534217d8640f57d65" width="1282" height="802" data-path="images/444a971e-calling_outgoing_call_web_screens-ace6b41a91fe1a23b9e1aaf99e51793e.png" />
</Frame>

### Call Logs

The [cometchat-call-logs](/ui-kit/angular/components/cometchat-call-logs) component displays call history — caller, time, and duration.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-uikit-sdk-card-mess/BtUXGKezOinvy5I_/images/68a2bfe8-calling_call_log_web_screens-e16bee4ca9212ac07ca2d21b8a5374bc.png?fit=max&auto=format&n=BtUXGKezOinvy5I_&q=85&s=4fe00f381799bc6abff557e7563fed6c" width="1282" height="802" data-path="images/68a2bfe8-calling_call_log_web_screens-e16bee4ca9212ac07ca2d21b8a5374bc.png" />
</Frame>

## Next Steps

<CardGroup cols={2}>
  <Card title="Call Buttons" icon="phone-flip" href="/ui-kit/angular/components/cometchat-call-buttons">
    Audio and video call buttons
  </Card>

  <Card title="Incoming Call" icon="phone-arrow-down-left" href="/ui-kit/angular/components/cometchat-incoming-call">
    Incoming call notifications and UI
  </Card>

  <Card title="Call Logs" icon="clock-rotate-left" href="/ui-kit/angular/components/cometchat-call-logs">
    Call history and details
  </Card>

  <Card title="Core Features" icon="comments" href="/ui-kit/angular/core-features">
    Core chat features
  </Card>
</CardGroup>