> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Outgoing Call

> Outgoing Call — CometChat documentation.

## Overview

The outgoing call component is displayed when a user initiates an outgoing call, such as a voice call or a video call. It provides a visual representation of the outgoing call and offers options for the user to manage the call.

Elements found in the outgoing call component includes:

1. Call Recipient Information: The component displays information about the recipient of the call, such as the recipient's name, profile picture, or contact details.
2. Call Controls: The component includes button to cancel the outgoing call.
3. Call Status: The component may display the call status, such as calling, to provide feedback to the user about the progress of the call.

## Properties

### Call Information

Details associated with the call.

| Name | Type           | Description                                                       |
| ---- | -------------- | ----------------------------------------------------------------- |
| call | CometChat.Call | CometChat call object consumed by the component to launch itself. |

### Decline button

The button displayed to allow the user to cancel the outgoing call.

| Name                 | Type   | Description                                                         |
| -------------------- | ------ | ------------------------------------------------------------------- |
| declineButtonText    | string | Text or label displayed on the decline button within the component. |
| declineButtonIconURL | string | Asset URL for the icon displayed on the decline button              |

### Custom view

UI component created and customised by the developer to meet your design or functional requirements.

| Name       | Type                                                      | Description                                                                      |
| ---------- | --------------------------------------------------------- | -------------------------------------------------------------------------------- |
| customView | Function as PropType\<(call: CometChat.Call) => ViewType> | User-defined Vue component to customise the card view of the outgoing component. |

### Sound

This refers to the action of activating or allowing the audio or sound capabilities of the component.

| Name                 | Type    | Description                                                                    |
| -------------------- | ------- | ------------------------------------------------------------------------------ |
| disableSoundForCalls | boolean | When set to true, the component will not produce sound for all outgoing calls. |
| customSoundForCalls  | string  | mp3 file asset of your choice to play for all outgoing calls.                  |

### Function callback

Functions that can be invoked by the user in response to a specific event or condition.

| Name           | Type                                                                 | Description                                                                           |
| -------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| onCloseClicked | Function as PropType\<() => void>                                    | Override the method that is invoked when user clicks on the close button              |
| onError        | Function as PropType\<(error: CometChat.CometChatException) => void> | Override the method that is invoked when an error is encountered within the component |

### Style

Styling properties and values of all the involved components

| Name              | Type                                               | Description                                           |
| ----------------- | -------------------------------------------------- | ----------------------------------------------------- |
| AvatarStyle       | AvatarStyle                                        | Styling properties and values of the Avatar component |
| outgoingCallStyle | [OutgoingCallStyle](/web-shared/outgoingcallstyle) | Styling properties of this component                  |

Usage

<Tabs>
  <Tab title="Vue">
    ```js theme={null}
    //applying custom style for the outgoing call component
    const outgoingCallStyle:OutgoingCallStyle = new OutgoingCallStyle({
    width: "320px",
    height: "110px",
    titleTextFont: "700 28px Inter",
    titleTextColor: "black",
    });

    <CometChatOutgoingCall :outgoingCallStyle:="outgoingCallStyle"></CometChatOutgoingCall>
    ```
  </Tab>
</Tabs>

***