Welcome to @webex/contact-center, 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/contact-center
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/contact-center';
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.