CallControlCAD extends basic call control functionality with advanced features for complex call scenarios. It includes:

1. All standard call controls (hold, resume, end, wrap-up)
2. Consult functionality
3. Call transfer capabilities
4. Three-party and Multi-party conference capabilities
5. Call Associated Data (CAD) display

Look and feel:

anchorImport

import { CallControlCAD } from '@webex/cc-widgets';

anchorProps

anchorUsage Example

Widget

<CallControlCAD
  onHoldResume={handleHoldResume}
  onEnd={handleEnd}
  onWrapUp={handleWrapUp}
  onRecordingToggle={onRecordingToggle}
  onToggleMute={onToggleMute}
  callControlClassName="custom-call-control"
  callControlConsultClassName="custom-consult-control"
/>

Callback

const handleHoldResume = ({ isHeld, task }) => {
  console.log('Hold/Resume action triggered in CAD', { isHeld, task });
};

const handleEnd = ({ task }) => {
  console.log('Call ended in CAD', { task });
};

const handleWrapUp = ({ task, wrapUpReason }) => {
  console.log('Wrap-up initiated in CAD:', { task, wrapUpReason });
};

const onRecordingToggle = ({ isRecording, task }) => {
  console.log('Recording toggled', { isRecording, task });
};

const onToggleMute = ({ isMuted, task }) => {
  console.log('onToggleMute invoked', { isMuted, task });
};

Custom Styles

.custom-call-control,
.custom-consult-control {
  padding: 20px;
  border: rgba(204, 204, 204, 0.5) 1px solid;
  box-shadow: 0 0 10px rgba(204, 204, 204, 0.5);
  border-radius: 5px;
  margin: 20px;
}

anchorFeatures

Standard Call Controls

• Hold/Resume: Place calls on hold and resume them
• End Call: Terminate the current call
• Wrap-Up: Complete after-call work with disposition codes
• Recording Toggle: Allows agents to pause and resume recording

Advanced Features

Consult

Consult with a supervisor or another agent before transferring:

• Initiate consult call while keeping original caller on hold
• Discuss customer situation privately
• Return to original call or proceed with transfer

Transfer

Transfer calls to other agents, queues, or external numbers:

• Blind Transfer: Transfer immediately without consultation
• Consult-Transfer: Consult first, then transfer
• Transfer to specific agents or skill groups

Conference

The conference feature allows agents to create multi-party calls by bringing together multiple participants.

Conference Types:

• Three-Party Conference: Agent, original caller, and one additional participant
• Multi-Party Conference: Agent and multiple participants in a single call session

Conference Capabilities:

• Initiate conference after establishing a consult call
• Add multiple participants to an ongoing call sequentially
• End conference or exit as an individual participant

anchorCall Workflows

Consult-Transfer Workflow

1. Agent receives call
2. Agent clicks Consult and chooses another agent, queue, a contact from the address book, or dials a PSTN number
3. Consult call is established (original caller on hold)
4. Agent discusses with consultant
5. Agent clicks Transfer to complete

Blind Transfer Workflow

1. Agent receives call
2. Agent chooses a transfer destination such as another agent, queue, a contact from the address book, or dials a PSTN number
3. Agent clicks Transfer
4. Call is immediately transferred

Conference Workflow

Three-Party Conference:

1. Agent receives call from customer
2. Agent clicks Consult and selects another agent, queue, or dials a number
3. Consult call is established (original caller on hold)
4. Agent clicks Conference to join all parties
5. Three-way call is active with agent, customer, and consultant

Multi-Party Conference:

1. Agent has an active call or conference in progress
2. Agent can add additional participants by repeating the consult process
3. Each new participant joins the existing conference
4. All parties can communicate simultaneously
5. Agent can exit or end the conference

anchorConfiguration Notes

• The component requires an active call to display controls
• The store must be initialized with a valid access token
• Agent must be logged in with a station
• Transfer destinations must be configured in the contact center system
• Make sure to wrap the component with ThemeProvider and IconProvider from Momentum Design
• callControlClassName and callControlConsultClassName classes and defining styles for it are required for proper UI

anchorKnown Issues

• Styling issues may occur with certain CSS frameworks - use custom class names to override
• DNIS value should be displayed alongside phone number in some configurations