Active Call

Anatomy

Learn about the individual parts of Active call.

Header anatomy

1. Active call header: Container for the title and time duration, used for the embedded phone controls
2. Heading: Displays the name of the component; the heading is “Active call” when there is an active call
3. Timer: Displays the agent’s total connected time on the call, from the time they accept the call to the moment the call ends; also displays the call recording state
4. Open interaction link: Displays the interaction link when active call is placed in Global Native Call Controls; Agents can tap on this link to open the interaction record associated with the call

Footer anatomy

1. Active call footer: Container for actions
2. Record actions: Actions that control the call recording; a dropdown component is used to list actions (e.g. Pause and Stop recording) when available; a button component is used when there is only one action available.
3. Mute: Mute or unmute the agent’s microphone
4. Hold: Hold or resume caller
5. Keypad: Displays or closes the keypad
6. Transfer menu: Displays or closes the transfer menu
7. Report quality issue: Report or un-report that there’s an issue with this call
8. End call: Ends the call
9. Merge call: Merge phone calls together
10. Leave and transfer: Transfers the call to another agent, ending the call

Subcomponents

See the usage guidelines for Button Iconic.

See the usage guidelines for Button.

See the usage guidelines for Button stateful.

See the usage guidelines for Input.

See the usage guidelines for Timer.

See the usage guidelines for Icon.

See the usage guidelines for Popover.

Usage

Active call is a macroponent that is part of the Interaction Controls Component plugin (com.app_interaction_control). Agents can use Active call to manage phone calls in a unified workspace.

Variants

Learn about the variants of Active call.

Types

Learn about the different types for Active call.

Configurations

Presets and controllers

This component contains a preset configuration that automatically configures properties and event handlers for a component, making the component ready to work when you add it to a page. A preset is designed to suit a specific use case. However, you can override preset property values with a custom configuration if you find it necessary for your design. Preset values that you override aren’t upgraded when updates are available. If you don’t want to use the preset values provided, select the option to configure the component manually. You can apply one preset to a single instance of a component on a page. For more information, see Presets.

A preset is always associated with a controller, which acts as a data resource for the component. Controllers provide the configuration data and event bindings the component needs to function in your experience. By selecting a preset, the required controller is added to the page. By adding a controller to the page, any new applicable components will have that controller's preset. For more information about how controllers work, see Controllers. For instructions on using the data inspector to view the default presets for a component, see View properties and events in the Controller API.

Behavior

Learn how Active call behaves when the display changes or a user interacts with the component.

States

Active call has an action loading state; when a user activates an action, the action may take up to 1 second to load. When actions are loading, the button is temporarily disabled. Users can still perform other actions while some actions are loading. In the example below, one action (Hold) is loading.

Responsive behaviors

Active call is responsive and resizes to fit its container’s width. Note that the component’s height is based on its contents, with a max-height of 362px.

Truncation

If text does not fit inside the native voice controls, the text truncates.

Scrolling

When you place Active call inside a parent container and its content doesn’t fit, the user can scroll vertically only (not horizontally).

Interactions

Learn how Active call responds when a user interacts with it.

Manage recording

Agents can pause, stop, resume, and start the call recording by selecting the desired action from the record actions button or dropdown menu.

Mute/unmute agent’s own microphone

Agents can mute their own microphone to prevent other parties from hearing their audio by selecting the mute button. Select the mute button again to unmute audio.

Mute/unmute other caller’s microphone

Agents can mute the microphone of a selected call recipient by selecting the mute button associated with that caller. Select the mute button again to unmute the caller’s audio.

Hold/unhold other caller(s)

Agents can put all callers on or off hold by selecting the hold button in the footer of the Active call dialog box. Agents can also put specific callers on or off hold by selecting the hold button associated with that caller.

Open/close keypad

Agents can open the keypad to dial a number during an active call by selecting the keypad button. Select the close button in the top right corner of the keypad to close it. See the Keypad component for more information on interacting with the keypad.

Open/close transfer menu

Agents can open the transfer call menu to initiate a transfer request by selecting the transfer menu button. Close the transfer menu by selecting the close button in the upper right corner of the transfer menu, or by selecting the transfer menu footer button again. See the Phone Directory component for information about interacting with the phone directory.

Transfer call

Agents can transfer the caller to another queue, agent, or external number. The following examples demonstrate transferring a call directly to a queue and to another agent.

Consult transfer

Agents can do a consult transfer, which allows them to speak with the new agent before officially transferring the call to them (also known as a warm transfer).

1. Merge calls: Agents can merge two callers into a group call
2. Leave and transfer: Agents can complete the transfer to the requested agent
3. End call for all: Agents can end the call for everyone

Report/unreport a quality issue

Agents can report a quality issue by selecting the report quality issue footer button. Select the button again to unreport the issue.

End call

Agents can end the call, disconnecting all the callers, by selecting the end call footer button. A message displays to inform agents that the phone is not available. This message updates to “The call has ended.”

Remove caller

Agents can remove a specific call recipient from the call by selecting the end call button associated with the desired caller.

Usability

Active call complies with all internationalization and accessibility requirements.

Internationalization

Learn how Active call is used in a platform configured for a right-to-left (RTL) language. Caller names/numbers and footer action buttons display to the right of the component container. Buttons with text labels display in the middle of the button.

Accessibility

Learn how to access the actionable elements of Active call through keyboard interactions and screen readers.

Active call tab order

This is the high-level tab order for Active call.
Note: For tab stop information about sub components of Active call, see the individual component usage guidelines.

Keyboard interactions

Users can interact with Active call using the keyboard.

When the focus is on the end call button:

• Tab or shift + tab: Moves focus between the end call button and any interactive elements, in the standard tab order.
• Spacebar or Enter/return: Disconnects the call and hides the Active call component. Tab focus resets to the first interactive element on the page.

When the focus on the record actions dropdown/record button:

• Tab or shift + tab: Moves focus between the record actions dropdown (or record button) and any interactive elements, in the standard tab order.
• Spacebar or Enter/return:
  • If record actions dropdown: Opens the dropdown menu. Users can use the arrow keys to navigate through the menu and use space or enter to select a dropdown item. Tab focus remains on the record dropdown.
  • If record button: Starts or ends the recording. The tab focus remains on the record button after the state of the recording updates.

When the focus on any of the footer action buttons:

• Tab or shift + tab: Moves focus between the action buttons and any interactive elements, in the standard tab order.
• Spacebar or Enter/return: Performs the action of the footer button. The tab focus remains on the same footer button after the state of the action updates.

Screen readers

When you apply ARIA labels to a component, screen readers announce the controls and content of Active call, in the prescribed tab order.