Welcome to @webex/plugin-cc, a plugin for the Webex JS SDK. This package enables integration with Webex Contact Center, providing APIs for agent management, task handling, and real-time communications.
npm install @webex/plugin-cc
Initialize the Contact Center plugin with the Webex SDK. The config
parameter is optional, but you can pass any of the following options for cc
:
import Webex from '@webex/plugin-cc';
const config = {
credentials: {
access_token: 'your-access-token', // Required for authentication
},
logger: {
level: 'debug', // Enhanced logging for development
bufferLogLevel: 'log' // Log level for uploaded logs
},
cc: {
// Agent session management
allowMultiLogin: false, // Prevent multiple agent sessions
allowAutomatedRelogin: true, // Auto reconnect on disconnection
// Connection settings
clientType: 'WebexCCSDK', // Identify client type
isKeepAliveEnabled: false, // Websocket keep-alive
force: true, // Force connection parameters
// Metrics configuration
metrics: {
clientName: 'WEBEX_JS_SDK',
clientType: 'WebexCCSDK'
}
}
};
const webex = Webex.init({ config }); // config is optional
const cc = webex.cc;
webex.once('ready', () => {
// Safe to use cc and other plugins here
});
The ContactCenter class is your primary interface for agent operations. Key capabilities include:
Session Management:
Agent Operations:
Task Management:
Example workflow:
// Initialize agent session
async function initializeAgent() {
try {
// 1. Register with contact center
const profile = await cc.register();
// 2. Login with browser-based calling
await cc.stationLogin({
teamId: profile.teams[0].teamId,
loginOption: 'BROWSER'
});
// 3. Set availability state
await cc.setAgentState({
state: 'Available',
auxCodeId: '0'
});
console.log('Agent initialized and ready');
} catch (error) {
console.error('Initialization failed:', error);
}
}
The Task class represents an interaction (call, chat, etc.) and provides methods for:
Media Control:
Call Flow:
Task Completion:
Example task handling:
// Set up task event handlers
cc.on('task:incoming', async (task) => {
try {
// 1. Accept the task
await task.accept();
// 2. Set up media handling (for voice)
task.on('task:media', (track) => {
const audio = document.getElementById('remote-audio');
audio.srcObject = new MediaStream([track]);
});
// 3. Handle task states
task.on('task:hold', () => {
console.log('Task placed on hold');
});
task.on('task:end', async () => {
if (task.data.wrapUpRequired) {
await task.wrapup({
auxCodeId: 'RESOLVED',
wrapUpReason: 'Customer issue resolved'
});
}
});
} catch (error) {
console.error('Task handling failed:', error);
}
});
Option | Type | Default | Description |
---|---|---|---|
credentials.access_token |
string |
Required | Webex authentication token |
logger.level |
string |
'info' |
Log level ('debug' , 'info' , 'warn' , 'error' ) |
logger.bufferLogLevel |
string |
'log' |
Buffered logging level for diagnostics |
cc.allowMultiLogin |
boolean |
false |
Allow multiple concurrent logins |
cc.allowAutomatedRelogin |
boolean |
true |
Auto-reconnect on connection loss |
cc.clientType |
string |
'WebexCCSDK' |
Client identifier |
cc.isKeepAliveEnabled |
boolean |
false |
Enable websocket keep-alive |
cc.force |
boolean |
true |
Force connection parameters |
cc.metrics.clientName |
string |
'WEBEX_JS_SDK' |
Client name for metrics |
cc.metrics.clientType |
string |
'WebexCCSDK' |
Client type for metrics |
The SDK uses an event-driven model to notify about various state changes:
agent:stateChange
- Agent's state has changed (Available, Idle, etc.)agent:stateChangeSuccess
- Agent state change was successfulagent:stateChangeFailed
- Agent state change failedagent:stationLoginSuccess
- Agent login was successfulagent:stationLoginFailed
- Agent login failedagent:logoutSuccess
- Agent logout was successfulagent:logoutFailed
- Agent logout failedagent:dnRegistered
- Agent's device number registeredagent:multiLogin
- Multiple logins detectedagent:reloginSuccess
- Agent relogin was successfultask:incoming
- New task is being offeredtask:assigned
- Task assigned to agenttask:unassigned
- Task unassigned from agenttask:media
- Media track received (voice, etc.)task:hold
- Task placed on holdtask:unhold
- Task resumed from holdtask:end
- Task completedtask:ended
- Task/call has endedtask:wrapup
- Task in wrap-up statetask:wrappedup
- Task wrap-up completedtask:rejected
- Task was rejectedtask:hydrate
- Task data has been updatedtask:offerContact
- Contact offered to agenttask:consultEnd
- Consultation endedtask:consultQueueCancelled
- Queue consultation cancelledtask:consultQueueFailed
- Queue consultation failedtask:consultAccepted
- Consultation acceptedtask:consulting
- Consulting in progresstask:consultCreated
- Consultation createdtask:offerConsult
- Consultation offeredtask:established
- Task/call has been connectedtask:error
- An error occurred during task handlingtask:ringing
- Task/call is ringingtask:recordingPaused
- Recording pausedtask:recordingPauseFailed
- Failed to pause recordingtask:recordingResumed
- Recording resumedtask:recordingResumeFailed
- Failed to resume recordingtask:media
- Media track receivedtask:hold
- Task placed on holdtask:unhold
- Task resumedFor issues and feature requests, please visit the GitHub repository.
For access token generation and authentication details, refer to the Webex Developer Portal.