This document explains how to embed the agent Workbench into your third-party system. This integration lets you use features, such as single sign-on (SSO) and call handling, directly within your system. You can also use listeners in the software development kit (SDK) to implement screen pops for incoming calls. Your frontend engineers are required to perform the following tasks. This document is updated in tandem with the SDK. Check this page for the latest information.
Frontend resources
After you update the frontend resource version, perform a full test in your local environment before you publish to the production environment.
UI version
<!-- IM SDK style file. Do not load this file if you do not use the IM plugin. -->
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/code/npm/@ali/cc-im-sdk/{version-im-sdk}/index.css">
<!-- Softphone SDK style file for PC. Load this file even if you use the IM plugin. -->
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/cloudcallcenter/web-workbench-sdk/{version-workbench}/ui.min.css">
<!-- Softphone SDK style file for mobile. Load only one of the two files. Do not load both. -->
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/cloudcallcenter/web-workbench-sdk/{version-workbench}/ui-mobile.min.css">
<!-- IM SDK JS file. Do not load this file if you do not use the IM plugin. -->
<script src="//g.alicdn.com/code/npm/@ali/cc-im-sdk/{version-im-sdk}/index.js"></script>
<!-- Softphone SDK JS file. Load this file even if you use the IM plugin. -->
<script src="//g.alicdn.com/cloudcallcenter/web-workbench-sdk/{version-workbench}/ui.min.js"></script>Core version
<!-- Softphone SDK JS file -->
<script src="//g.alicdn.com/cloudcallcenter/web-workbench-sdk/{version-workbench}/core.min.js"></script>Place the UI version script resources before the </body> tag. Do not place them in the head tag because the script operates on document.body after it loads.
For the static resources, replace {version-im-sdk} and {version-workbench} with the corresponding version numbers. The latest version numbers are as follows:
version-im-sdk ==> 1.8.1
version-workbench ==> 3.8.1
Note: To use the IM SDK plugin, you must use the UI version and load both cc-im-sdk and web-workbench-sdk in the specified order.
Differences between the UI and core versions
UI version (ui.min.js): Provides a user interface and core logic. This version requires you to load CSS and JS resources.
Core version (core.min.js): Provides core logic without a user interface. This version is suitable for businesses that want to create a custom UI and requires you to load only one JS resource.
Do not load both versions of the JS resources at the same time. If you do, the window.CCCWorkbenchSDK global variable will be overwritten by the last loaded script, which will cause unexpected issues.
Initialize the SDK
Before you integrate the SDK, you must complete the following tasks:
Use Chrome 72 or a later version. We recommend using the latest version.
The business system where you embed the SDK must use the HTTPS protocol. This is because Chrome versions 47 and later prohibit HTTP from accessing the system microphone, which prevents calls from functioning correctly.
If you use the SDK in an iframe tag, you must add the `allow="microphone; camera; autoplay"` attribute to the iframe tag. This attribute allows the iframe to access the system microphone, camera, and autoplay permissions for audio and video.
Initialize the SDK:
if (window.workbench) {
// Do not initialize again.
return;
}
window.workbench = new window.CCCWorkbenchSDK({
dom: 'workbench-container', // Required for the UI version. Initialize after the DOM element with id="workbench-container" is loaded.
instanceId: 'xxxxxx', // Enter the actual instance ID.
exportErrorOfApi: true,
afterCallRule: 15, // Post-call processing duration.
ajaxPath: '/api', // Change this based on the backend API address.
logger: {
builtinEnabled: false,
},
imConfig: {
getContainer() {
return document.getElementById('im-container');
},
},
onInit() {
console.log('onInit');
// window.workbench.register() // After initialization, automatically register and go online.
},
onRegister(event) {
console.log('onRegister', event);
},
onLogIn(event) {
console.log('onLogIn', event);
},
onBreak(event) {
console.log('onBreak', event);
},
onChangeInvisibility(event) {
console.log('onChangeInvisibility', event);
},
onReady() {
console.log('onReady');
},
onCallComing(event) {
console.log('onCallComing', event);
},
onCallDialing(event) {
console.log('onCallDialing', event);
},
onCallEstablish(event) {
console.log('onCallEstablish', event);
},
onCallRelease(event) {
console.log('onCallRelease', event);
},
onDeviceTypeChange(event) {
console.log('onDeviceTypeChange', event);
},
onErrorNotify(event) {
console.log('onErrorNotify', event);
},
onHangUp(event) {
console.log('onHangUp', event);
},
onLogOut() {
console.log('onLogOut');
},
onSelectOutboundNumber(event) {
console.log('onSelectOutboundNumber', event);
},
onStatusChange(event) {
console.log('onStatusChange', event);
},
onWorkModeChange(event) {
console.log('onWorkModeChange', event);
},
onBeforeCallDialing(payload) {
console.log('onBeforeCallDialing', payload);
payload.callback(); // Must be called.
},
onBeforeCallHangup(payload) {
console.log('onBeforeCallHangup', payload);
payload.callback();
},
onAgentStats(event) {
console.log('onAgentStats', event);
},
onSelectCurrentCallRecord(event) {
console.log('onSelectCurrentCallRecord', event);
},
onAfterEarlyMediaRecognized(event) {
console.log('onAfterEarlyMediaRecognized', event);
},
onSignedSkillGroupChange(signedSkillGroupList) {
console.log('onSignedSkillGroupChange', signedSkillGroupList);
},
onBeingMonitored(event) {
console.log('onBeingMonitored', event);
},
onIvrTrackingAISummary(event) {
console.log('onIvrTrackingAISummary', event);
},
});Required config parameters
Parameter | Description | Type |
instanceId | The string between workbench/ and
| string |
dom | The ID of the element to mount. (Required only for the UI version). | string |
Optional config parameters
UI version-specific parameters
Parameter | Description | Type | Default value |
header | Specifies whether to display the header (the "Cloud Contact Center" name). | boolean |
|
width | The width of the SDK panel. To ensure a complete UI display, the minimum width is 310 px. | string | number |
|
height | The height of the SDK panel. To ensure a complete UI display, the minimum height is 540 px. | string | number |
|
visible | Specifies whether to display the SDK panel. | boolean |
|
mainContentVisible | Specifies whether to display the full content of the SDK panel. If you set this to | boolean |
|
offlineImage | The URL of the static image to display when the agent is offline. | string | System default |
breakImage | The URL of the static image to display when the agent is on a break. | string | System default |
containerStyle | Custom styles for the outer container. | - | |
functionSwitch | The feature switches on the panel (show or hide). Some settings also need to be enabled in the Workbench. | See the type description below | |
reducePanelContainer | The container for the minimized panel. The panel is rendered in this container. | Function() => HTMLElement | Rendered by default in the ID tag of the dom parameter |
defaultLastSelectedCallerNumber | Specifies whether to select the last used outbound number by default when the agent goes offline and then online again. | boolean |
|
exportErrorOfApi | Specifies whether to display a toast notification with the error message, "ApiName", "ErrorCode", and "RequestId" when an API operation fails. This helps with backend troubleshooting. The default value is "false". You can decide whether to display the toast notification for errors as needed. | boolean |
|
prettyPhoneNumber | Specifies whether to format phone numbers for display. For example, | boolean |
|
WorkbenchUIFunctionSwitch
Parameter | Description | Type | Default value |
showToggleStatus | Displays the status switch operation in the upper-left corner, including the display on the left when minimized. | boolean |
|
breakAction | Displays the Break operation in the status switch menu in the upper-left corner. | boolean |
|
offlineAction | Displays the Offline operation in the status switch menu in the upper-left corner. | boolean |
|
invisibilityAction | Displays the Invisibility operation in the status switch menu in the upper-left corner. | boolean |
|
adjustVolumeSetting | Displays the Adjust Volume operation in the Settings menu in the upper-right corner. | boolean |
|
deviceDetectSetting | Displays the Device Detection operation in the Settings menu in the upper-right corner. | boolean |
|
accessModeSetting | Displays the Access Mode operation in the Settings menu in the upper-right corner. | boolean |
|
accessPointSetting | Displays the Agent Endpoint operation in the Settings menu in the upper-right corner. This takes effect only when "isEnableSwitchAdapter: true" is set. | boolean |
|
showFlashSmsConfig | Displays the Flash SMS Configuration operation in the Settings menu in the upper-right corner. This configuration takes effect only if a flash SMS carrier is configured. | boolean |
|
allowStartConference | Allows agents to start a conference. | boolean |
|
allowMonitoring | Allows agents to start monitoring. After this option is enabled, administrator or group leader permissions are still required. Agents with only agent permissions cannot start monitoring even if this is set. | boolean |
|
allowCallOutbound | Allows agents to make outbound calls. | boolean |
|
allowViewRecord | Allows agents to view Call Records. | boolean |
|
allowViewMyWork | Allows agents to view My Work. | boolean |
|
reducePanel | Displays the Minimize button in the upper-right corner of the interface. | boolean |
|
closeable | Displays the Close button in the upper-right corner of the panel. | boolean |
|
showSpeechToText | Displays the speech-to-text button. Note This feature must also be enabled in the Cloud Contact Center console. Go to Voice Service > Settings > Intelligent Settings. | boolean |
|
allowCreateTicket | Allows agents to create tickets. | boolean |
|
allowCreateSessionSummary | Allows agents to create session summaries. | boolean |
|
aiAssistantConfig | aiAssistantConfig: {object} Configuration that allows agents to use the AI assistant. aiAssistantConfig.summary: {boolean} Specifies whether to allow the AI assistant for session summaries and tags. aiAssistantConfig.ticket: {boolean} Specifies whether to allow the AI assistant for tickets. Note This feature must also be enabled in the Cloud Contact Center console. Go to Voice Service > Settings > Intelligent Settings. | object |
|
allowTransfer | allowTransfer: {boolean | object} Allows agents to initiate a transfer. allowTransfer: {boolean} Specifies whether to allow all transfer methods. allowTransfer.initiateAttendedTransfer: {boolean} Specifies whether to allow attended transfers. allowTransfer.blindTransfer: {boolean} Specifies whether to allow blind transfers. | boolean | object |
|
General configurations
General configurations apply to both the UI and core versions.
Parameter | Description | Type | Default value |
regionId | The cluster where the Cloud Contact Center server is deployed. Unless otherwise specified, the value is | string | "cn-shanghai" |
afterCallRule | The time in seconds after which an agent enters the idle state after a call ends. The default value is 15. Set this to "manual" to require the agent to manually switch from post-call processing to idle. By default, the value set in the cloud customer service system is used. | number | 'manual' | Workbench configuration |
autoAnswerCall | The time in seconds after which an incoming call is automatically answered. By default, the value set in the cloud customer service system is used. | number | Workbench configuration |
useLocalStorageToCall | Specifies whether to allow making outbound calls from multiple browser tabs. | boolean |
|
pollFrequenceWithoutWS | The frequency at which the PollUserStatus operation is called to pull the agent status when the WebSocket connection for the agent status fails. The default value is 1000 ms. Cloud Contact Center uses a dual-channel approach (WebSocket push and REST API pull) to ensure the real-time accuracy of agent status. | number |
|
pollFrequenceWithWS | The frequency at which the PollUserStatus operation is called to pull the agent status when the WebSocket connection is successful. This serves as a fallback policy and heartbeat. The default value is 10000 ms. | number |
|
pollSaveWebRtcInfoFrequence | The polling frequency for the SaveWebRtcInfo operation. The default value is 10000 ms. | number |
|
disableSaveStats | The default value is false, which means collecting call recording data is not disabled. This collects agent-side call recording data for voice troubleshooting and network analysis when issues occur. We strongly recommend that you do not disable this feature. If disabled, it is difficult for engineers to troubleshoot issues. | boolean |
|
customizedNotification | Specifies whether to support custom desktop notifications for incoming calls. By default, the desktop notifications configured in Cloud Contact Center are displayed. The default value is | boolean |
|
isEnableSwitchAdapter | To improve the audio quality of agent calls, multiple leased lines for endpoints have been added. The default value is | boolean |
|
allowCalleeEncryption | Specifies whether to allow the callee number to be encrypted for transmission. The type of the callee parameter in the call method is not restricted. | boolean |
|
isMonitoredWithoutPerception | Specifies whether the agent is monitored without their knowledge. If set to | boolean |
|
ringingToneSrc | A custom ringtone for incoming calls. The value is the | string | System default |
isOutboundNotReceivedToBeProcessed | Specifies whether to proceed to post-call processing even if an outbound call is not answered. Currently, if a call is not connected, the status changes to post-call processing and then immediately to idle. | boolean |
|
videoCallConfig | Configurations related to video agents. | See the type description below | |
imConfig | Configurations for the IM chat plugin. Requires loading the IM SDK resources. | See the type description below | |
transferDisplayedCustomerNumber | Specifies whether to display the customer's number when transferring to an external number. | boolean |
|
logger | Log configuration: logger.builtinEnabled: {boolean} Enables built-in logging, which prints logs to the browser's debug console. logger.level: {number} The log level. 0: error, 1: warn, 2: log, 3: debug. logger.connector: {(level: string, category: string, label: string | undefined, content: any) => void} A factory function that processes all logs. | object | - |
API address and request parameter settings for server-side API operations
The request URL is: `${ajaxOrigin}${ajaxPath}?${ajaxApiParamName}=${apiName}&product=CloudCallCenter&version=2020-07-01®ion=${regionId}`.
Parameter | Description | Type | Default value |
ajaxOrigin | The request source. By default, requests are sent to the current origin. | string | location.origin |
ajaxPath | The URI of the request. | string | "/data/api.json" |
ssePath | The request path for the SSE API. | string | "/sseApi" |
ajaxApiParamName | The name used to distinguish the action. | string | "action" |
ajaxMethod | The request method. Valid values: post, get. | "post" | "get" | "post" |
ajaxOtherParams | Other custom parameters at the same level as the request. | object | - |
ajaxHeaders | The request headers. | object | {'Content-Type': 'application/x-www-form-urlencoded'} |
withCredentials | Specifies whether to use credentials and allow cookies for cross-origin requests. | boolean | false |
apiAxiosFunc | Lets you write your own method to request API operations. The method must return a promise object, and the returned data must be in the same format as the data returned by Cloud Contact Center public cloud API operations. Note: Cloud Contact Center internally uses the axios request library. The default data structure of the returned result is: If you do not use axios, make sure the returned data has this structure, which has an extra data wrapper around the value returned in the HTTP request. | function | - |
VideoCallConfig
Parameter | Description | Type | Default value |
enable | Specifies whether to enable video calls. | boolean |
|
customVideoNode | A custom component to display video: customVideoNode.localVideo: {HTMLVideoElement} The local video DOM. customVideoNode.remoteVideo: {HTMLVideoElement} The remote video DOM. This parameter is required for the no-UI version. The video DOM needs the autoplay attribute to enable autoplay. The localVideo needs the muted attribute to mute the sound and prevent echo. | object | - |
disabledResize | Disables resizing of the video window. | boolean |
|
defaultEnableCamera | Enables the camera by default. | boolean |
|
getContainer | By default, the pop-up window is inserted under document.body.div. You can customize the container for the pop-up window. | () => HTMLElement | - |
defaultSize | The default width and height of the video window: defaultSize.width: {number} The width. defaultSize.height: {number} The height. | object |
|
cacheSize | Specifies whether to cache the last adjusted size of the video window. | boolean |
|
minConstraints | The minimum width and height constraints for window resizing [width, height]. | [number, number] |
|
maxConstraints | The maximum width and height constraints for window resizing [width, height]. | [number, number] |
|
isFixed | Specifies whether to use the | boolean |
|
defaultPosition | The default position on the screen. If not set, it defaults to the center of the screen. If caching is configured, the cached position is used (requires cachePosition=true). defaultPosition.x: {number}. defaultPosition.y: {number}. | object | Center of the screen |
disabledDrag | Specifies whether to disable dragging and moving the video window. | boolean |
|
cachePosition | Specifies whether to cache the last adjusted position. The video pop-up for the next incoming call will appear at the last position by default. | object |
|
setIncomingCallPrompt | Sets the prompt for incoming calls. Default: "xxx invites you to a video call". | (details: { callContext: object }) => string | - |
containerBackground | The background CSS property of the container. | string |
|
operationControl | Operation control buttons: operationControl.microphone: {boolean} Indicates whether the microphone is muted. operationControl.camera: {boolean} Turn the camera on or off. operationControl.fullscreen: {boolean} Specifies whether to enable full screen. | object |
|
IMConfig
Parameter | Description | Type | Default value |
getContainer | The display container for the IM plugin (required). | () => HTMLElement | - |
user | Custom agent information. By default, the profile picture and nickname parameters from Cloud Contact Center > My Workbench > Settings are used. user.nickname: {string} The name. user.avatarUrl: {string} The profile picture. | object | System configuration |
onConvChange | The event triggered when the active session changes. If the value is null, there is no active session. Signature: Function(conv: object | null) => void Parameter: conv: {object} The session information. | Function | - |
onConvInvite | The session invitation event. Signature: Function(event: object) => void Parameter: event: {object} Additional session information. | Function | - |
onConvCancelInvite | The event to cancel a session invitation. Signature: Function(event: object) => void Parameter: event: {object} Additional session information. | Function | - |
onConvReleased | The session end event. Signature: Function(event: object) => void Parameter: event: {object} Additional session information. | Function | - |
onMessageAdd | The event for a new message. Signature: Function(message: object) => void Parameter: message: {object} The message details. | Funciton | - |
onClaimQueueAdd | The event for a new message in the queue. Signature: Function(claimQueueList: array) => void Parameter: claimQueueList: {Array<object>} The list of new sessions to be claimed. | Function | - |
Hook functions
Parameter | Description |
onInit | Triggered when the SDK object is instantiated. Signature: Function() => void |
onRegister | Triggered when the SIP service registration is successful. Signature: Function(event: object) => void Parameter: event: {object} The logon information data returned by the GetLoginDetails operation. |
onLogIn | Triggered when an agent signs in or goes online. Signature: Function(event: object) => void Parameter: event.chooseSkillGroupList: {array} The list of skill groups selected when going online. |
onLogOut | Triggered when an agent logs out. Signature: Function() => void |
onBreak | Triggered when an agent takes a break. Signature: Function(event: object) => void Parameter: event.breakReason: {string} The reason for the break. |
onReady | Triggered when an agent is idle. |
onChangeInvisibility | Toggles the invisible status. Signature: Function(invisibility: boolean) => void Parameter: invisibility: {boolean} `true` indicates that the current status is invisible. `false` indicates that the current status is not invisible. |
onCallComing | Triggered on an incoming call. Signature: Function(event: object) => void Parameters: event.caller: {string} The caller number. event.callee: {string} The callee number. event.jobId: {string} The current call ID. event.callType: {string} The call type. For more information, see the parameter type in Poll agent status. event.callContext: {object} The details of the current call. For more information, see the data type returned by the PollUserStatus operation. |
onBeforeCallDialing | Triggered before the call method is invoked. If you configure this hook function, you must execute the callback method. Otherwise, the call will not be made. Signature: Function(event: object) => void Parameters: event.callee: {string} The callee number. event.userId: {string} The agent ID. event.callback: {Function(callee?: string) => void} The callback function to be executed after the condition is met. You can pass the modified `callee`. If not passed, `event.callee` is used. |
onCallDialing | Triggered when an outbound call is made and the phone is ringing. Signature: Function(event: object) => void Parameters: event.caller: {string} The caller number. event.callee: {string} The callee number. event.jobId: {string} The current call ID. event.callType: {string} The call type. For more information, see the parameter type in Poll agent status. event.callContext: {object} The details of the current call. For more information, see the data type returned by the PollUserStatus operation. |
onCallEstablish | Triggered when a call connection is established. Signature: Function(event: object) => void Parameter: event.callContext: {object} The details of the current call. For more information, see the data type returned by the PollUserStatus operation. |
onBeforeCallHangup | Triggered before the `hangUp` method is invoked. If you configure this hook function, you must execute the `callback` method. Otherwise, the call will not be hung up. Signature: Function(event: object) => void Parameters: event.jobId: {string} The current call ID. event.channelId: {string} The channel ID of this agent call. event.userId: {string} The agent ID. event.callback: {Function(jobId?: string, channelId?: string) => void} The callback function to be executed after the condition is met. |
onHangUp | Triggered when a call is hung up. Signature: Function(type: string) => void Parameter: type:{string} The type of hang-up event. The following types are available:
|
onCallRelease | Triggered when a call ends. Signature: Function(event: object) => void Parameter: event.CallContext: {object} The details of the current call. For more information, see the data type returned by the PollUserStatus operation. |
onErrorNotify | Triggered for some error messages. You can get the error information. During the development phase, we recommend that you print the parameters in this hook function to get error information. Signature: Function(event: object) => void Parameters: event.apiCode: {string} If it is an API operation error, this is the error code of the API operation, which is the code returned by the operation. event.errorCode: {string} If it is an API operation error, this is the action name of the operation. Otherwise, it is a system-defined error code. event.errorMsg: {any} The detailed error message. event.errorMsgTip: {string} The error message prompt. event.requestId: {string} If it is an API operation error, this is the requestId parameter of the operation. |
onStatusChange | This function is triggered by any status change. You can use this function to listen for changes in the current status value. For the meaning of status codes, see Status code table and descriptions in this topic. Signature: Function(event: object) => void Parameters: event.code: {number} The current status code. event.lastCode: {number} The previous status code. event.callContext: {object} The details of the current call. For more information, see the data type returned by the PollUserStatus operation. |
onWorkModeChange | Agents have two default work modes: on-site and off-site. If an agent has a SIP phone configured, there is also an office phone mode. Signature: Function(workMode: string) => void Parameter: workMode: {string} The work mode.
|
onDeviceTypeChange | If an agent has a SIP phone configured and goes online through the browser, they can choose which device to use: WebRTC softphone or SIP phone. Signature: Function(deviceType: number) => void Parameter: deviceType: {number} The device type.
|
onGetStatsData | Obtains voice quality data. Signature: Function(event: object) => void Parameters: event: {object} event.jobId: {string} The ID of the current call. event.callId: {string} The call ID of the current call. event.connid: {string} The call sequence ID of the current call. event.sender: {RTCStatsReport} For parameter types, see RTCRtpSender.getStats(). event.receiver: {RTCStatsReport} For parameter types, see RTCRtpReceiver.getStats(). event.moss: {Array<number>} The voice quality score. During a call, one score is added per second (not added when muted). |
onAfterEarlyMediaRecognized | Triggered when there is an early media recognition tone. Signature: Function(event: object) => void Parameters: event: {object} event.earlyMediaState: {string} The status. event.earlyMediaText: {string} The content. event.earlyMediaTime: {number} The time. event.releaseAfterEarlyMediaRecognized: {number} The time for automatic release after early media is recognized. You can configure this in the agent console settings. |
onSignedSkillGroupChange | Triggered when the list of signed-in skill groups changes. Signature: Function(signedSkillGroupList: array, prevSignedSkillGroupList: array) => void Parameters: signedSkillGroupList: {array} The list of signed-in skill groups. prevSignedSkillGroupList: {array} The previous list of signed-in skill groups. |
onAudioTranscriptionText | Speech-to-text. Signature: Function(event: object) => void Parameters: event: {object} event.jobId: {string} The current call ID. event.latestMessage: {object} The latest speech-to-text message. event.messages: {Array<object>} The list of all speech-to-text messages for the current call. |
onBeingMonitored | Triggered when the current agent is being monitored. Also triggered when the monitor exits. Signature: Function(event: object) => void Parameters: event: {object} event.isBeingMonitored: {boolean} Specifies whether the agent is being monitored. event.monitorChannelContext: {object} The channel context information of the monitor. |
onIvrTrackingAISummary | The event to push the AI-summarized IVR tracking analysis result. Signature: Function(event: object) => void Parameters: event: {object} event.jobId: {string} The current call ID. event.result: {string} The IVR tracking analysis result. event.success: {boolean} Specifies whether the analysis was successful. |
onMainContentVisibleChange | [UI version] The event for a change in the Signature: Function(visible: boolean) => void Parameter: visible: {boolean} Specifies whether to maximize and display the full content. |
onWorkbenchClose | [UI version] The event for clicking the Close button in the upper-right corner of the Workbench. Signature: Function() => void |
onSelectCurrentCallRecord | [UI version] The currently selected call record on the call record list page. Signature: Function(event: object) => void Parameter: event: {object} event.record: {object} The selected call record data. |
onSelectOutboundNumber | [UI version] Triggered when an outbound number is manually selected. `auto` is selected for automatic selection. Signature: Function(caller: string) => void Parameter: caller: {string} The selected caller number. |
onMediaPlayFailed | When media fails (for example, due to the browser's autoplay policy) and the customer's voice cannot be heard, you need to handle it in this function. To prevent web pages from automatically playing audio and video and disturbing users, browsers have restricted the autoplay feature: Before a user interacts with a web page (for example, by clicking the page), web pages with audio media elements are prohibited from autoplaying (Autoplay policies in Chrome, Autoplay policy changes for macOS in Safari). Signature: Function(event: object) => void Parameters: event.mediaElement: {HTMLMediaElement} Gets the media element being played. Try to play it manually. event.error: {Error} The media playback error message. event.type: {string} |
onHeartBeat | Added a listener for the health of the Signature: Function(event: object) => void Parameters: event.status: event.data: When event.errorMsg, event.requestId, event.failedCount: When |
SDK instance properties
Property | Description | Type |
localMediaStream | The local media stream. This is undefined if the call is not answered. For outbound calls, it is first available in For inbound calls, it is first available in | MediaStream |
remoteMediaStream | The remote media stream. This is undefined if the call is not answered. For outbound calls, it is first available in For inbound calls, it is first available in | MediaStream |
RTCPeerConnection | The peer WebRTC connection. This is undefined if the peering connection is closed. Warning [High-risk operation] Operating on this property may cause call issues, such as no sound or high latency. |
SDK instance methods
A parameter type prefixed with "?:" is optional unless otherwise specified.
UI version-specific methods
Parameter | Description |
changeUIConfig | Modifies the UI version-specific configurations. Signature: Function(config: object | ((prevConfig: object) => object)) => void; Signature of config when config is a function: Function(prevConfig: object) => object. Returns the current config parameter and needs to return the new config. Parameter: config: {object | function} For more information, see UI version-specific parameters. The following parameters can be modified:
Supports modification of a single parameter. |
getUIConfig | Gets the current UI version-specific configurations. Only supports parameters that can be modified by the Signature: Function() => object Return value: For more information, see UI version-specific parameters. |
changeFunctionSwitch | Modifies the UI feature switch configuration parameter (functionSwitch). Signature: Function(config: WorkbenchUIFunctionSwitch | ((prevConfig: WorkbenchUIFunctionSwitch) => WorkbenchUIFunctionSwitch)) => void; Signature of config when config is a function: Function(config: WorkbenchUIFunctionSwitch) => WorkbenchUIFunctionSwitch. Returns the current config parameter and needs to return the new config. Parameter: config: {WorkbenchUIFunctionSwitch | function} For more information, see WorkbenchUIFunctionSwitch. |
getFunctionSwitch | Gets the current UI feature switch configuration. Signature: Function() => WorkbenchUIFunctionSwitch Return value: WorkbenchUIFunctionSwitch: For more information, see WorkbenchUIFunctionSwitch. |
reRender | Re-renders the interface. This is suitable for single-page applications where the mounted DOM is destroyed and then re-rendered. Signature: Function() => void |
setKeyboardValue | Sets the number on the dial pad. Signature: Function(callee?: string, maskedCallee?: string) => void Parameters: callee?: {string} The callee number, displayed in the input box on the dial pad. maskedCallee?: {string} The masked callee number (the number displayed in the agent's outbound call details). |
General methods
Parameter | Description |
isAvailBrowser | This method checks whether the current browser supports the SDK. Signature: Function() => Promise<boolean> |
checkNetwork | This method checks whether the current network can connect to the SDK network service and whether the connection is blocked by a local firewall. Signature: Function() => Promise<boolean> |
getSkillGroups | Gets the list of skill groups. Signature: Function() => object Return value: chooseSkillGroupList: The list of selected and signed-in skill groups. allSkillGroupList: The list of all skill groups to which the agent belongs. Correct data is available only after the |
getTurnServerList | Gets the list of endpoints. Correct data is returned only after the Signature: Function() => Promise<array> Return value: For more information, see the data returned by the GetTurnServerList operation. |
register | Initial sign-in. Call this method for the first sign-in after the page loads. Signature: Function(options?: object) => Promise<UserContext> Parameters:
Return value: UserContext: For more information, see the data returned by the SignInGroup operation. |
logIn | Signs in. Call this method to go online when in the signed-out state (status `1`). Note For the initial sign-in, use register. Signature: Function(options?: object) => Promise<UserContext> Parameters:
Return value: UserContext: For more information, see the data returned by the SignInGroup operation. |
forceToPrepareSignIn | If you receive error 7001 during registration, which means a device is already online, you can call this method to continue registration. After success, the original device will be kicked offline. Signature: Function() => Promise<UserContext> Return value: UserContext: For more information, see the data returned by the SignInGroup operation. |
logOut | Signs out. Call this method to go offline. Signature: Function() => Promise<UserContext> Return value: UserContext: For more information, see the data returned by the SignOutGroup operation. |
applyForBreak | Requests a break. After setting, incoming calls will not be routed to the current agent but to other idle agents. Signature: Function(breakReason?: string) => Promise<UserContext> Parameter: breakReason?: {string} The reason for the break. Return value: UserContext: For more information, see the data returned by the TakeBreak operation. |
ready | Sets the agent to idle. After calling this method, the agent becomes idle and can answer or make calls. In IM, the agent can accept assigned and claimed sessions. Signature: Function(options?: object) => Promise<UserContext> Parameter: options.invisible?: {boolean} Specifies whether to be invisible when idle. Return value: UserContext: For more information, see the data returned by the ReadyForService operation. |
changeVisibility | Switches the invisibility mode. If true, the agent will not receive incoming calls or IM session assignments. Signature: Function(invisible?: boolean) => Promise<UserContext> Parameter: invisible?: {boolean} Specifies whether to be invisible. Return value: UserContext: For more information, see the data returned by the SignInGroup operation. |
call | Makes a call. Signature: Function(options?: object) => Promise<UserStatusContext> Parameters:
Return value: UserStatusContext: For more information, see the data returned by the MakeCall operation. |
redialCall | Redials a call using the jobId. This is generally used for calls with encrypted callee numbers. Signature: Function(options?: object) => Promise<UserStatusContext> Parameters:
Return value: UserStatusContext: For more information, see the data returned by the RedialCall operation. |
agentToAgent | The internal call method. Signature: Function(extension: string) => Promise<UserStatusContext> Parameter: extension: {string} The agent's extension number. Return value: UserStatusContext: For more information, see the data returned by the MakeCall operation. |
answer | Answers a call. This method can be used to answer an incoming call and establish a connection. Signature: Function() => Promise<UserStatusContext> Return value: UserStatusContext: For more information, see the data returned by the AnswerCall operation. |
hangUp | Hangs up or rejects a call. This method can be used to end a call. Signature: Function(jobId?: string, channelId?: string) => Promise<UserStatusContext> Parameters: jobId?: {string} Hangs up a specified call. If not specified, the current call is hung up. channelId?: {string} Hangs up a specified party in a specified call. If not specified, the current call is hung up. Return value: UserStatusContext: For more information, see the data returned by the ReleaseCall operation. |
stayAfterCall | Maintains the post-call processing state. This has the same effect as ending a call and clicking the post-call processing button. Signature: Function() => Promise<void> |
sendDtmf | DTMF key interaction. Sends DTMF. Signature: Function(options?: object) => Promise<UserStatusContext> Parameters:
Return value: UserStatusContext: For more information, see the data returned by the SendDtmfSignaling operation. |
callHold | Puts a call on hold. This method puts a call on hold. The client hears music, and the agent's voice cannot be heard by the client. Signature: Function() => Promise<UserStatusContext> Return value: UserStatusContext: For more information, see the data returned by the HoldCall operation. |
callRetrieve | Retrieves a call. This method ends the on-hold state and re-establishes the call between the client and the agent. Signature: Function() => Promise<UserStatusContext> Return value: UserStatusContext: For more information, see the data returned by the RetrieveCall operation. |
muteAgent | Mutes the agent during a call and turns off the microphone. Signature: Function() => Promise<UserStatusContext> Return value: UserStatusContext: For more information, see the data returned by the MuteCall operation. |
unmuteAgent | Unmutes the agent during a call and turns on the microphone. Signature: Function() => Promise<UserStatusContext> Return value: UserStatusContext: For more information, see the data returned by the UnmuteCall operation. |
changeRingToneVolume | Changes the volume of the incoming call ringtone. Signature: Function(volume: number) => void Parameter: volume: {number} The volume. The value is a number from 0 to 1. |
changeVolumeInCall | Changes the volume during a call. Signature: Function(volume: number) => void Parameter: volume: {number} The volume. The value is a number from 0 to 1. |
thirdCallTransfer | Performs a blind transfer during a call. If A is talking to B, the call is directly transferred to C. This is also known as a blind transfer or single-step transfer. Signature: Function(options?: object) => Promise<UserStatusContext> Parameters:
Return value: UserStatusContext: For more information, see the data returned by the BlindTransfer operation. |
initiateAttendedTransfer | Performs an attended transfer during a call. If A is talking to B, A consults C. During the consultation, B waits. This is also known as an attended transfer or two-step transfer. Signature: Function(options?: object) => Promise<UserStatusContext> Parameters:
Return value: UserStatusContext: For more information, see the data returned by the InitiateAttendedTransfer operation. |
thirdCallRetrieve | Retrieves a three-way call and returns to the original call. If A is talking to B and consults C, after the consultation, the call returns to A and B. Signature: Function() => Promise<UserStatusContext> Return value: UserStatusContext: For more information, see the data returned by the CancelAttendedTransfer operation. |
thirdCallTransferFinished | In a consultative call transfer, A, who is on a call with B, consults with C, returns to the call with B, and then completes the transfer to establish a call between A and C. Signature: Function() => Promise<UserStatusContext> Return value: UserStatusContext: For more information, see the data returned by the CompleteAttendedTransfer operation. |
switchToConference | Switches a consultation call to a conference call (multi-party call). Signature: Function() => Promise<UserStatusContext> Return value: UserStatusContext: For more information, see the data returned by the SwitchToConference operation. |
startConference | Starts a conference. Signature: Function(options?: object) => Promise<UserStatusContext> Parameters:
Return value: UserStatusContext: For more information, see the data returned by the StartConference operation. |
monitor | The monitoring method. Signature: Function(userId: string) => Promise<UserStatusContext> Parameter: userId: {string} The ID of the agent to be monitored. Return value: UserStatusContext: For more information, see the data returned by the MonitorCall operation. |
bargeIn | The barge-in method. After success, the call enters a three-way conference mode. Signature: Function(options?: object) => Promise<UserStatusContext> Parameters:
Return value: UserStatusContext: For more information, see the data returned by the BargeInCall operation. |
intercept | The intercept method. After success, the original agent is removed from the call, and the new agent talks to the customer. Signature: Function(options?: object) => Promise<UserStatusContext> Parameters:
Return value: UserStatusContext: For more information, see the data returned by the InterceptCall operation. |
coach | The coaching method (whisper coaching). Administrators and skill group leaders can coach agents during calls with customers. After success, the customer can only hear the initial agent's voice. The coached agent can hear both the customer and the coach. The coach can hear both the customer and the agent. Signature: Function(options?: object) => Promise<UserStatusContext> Parameters:
Return value: UserStatusContext: For more information, see the data returned by the CoachCall operation. |
cancelAutomaticCallRelease | Cancels the automatic hang-up operation for the intelligent outbound call hang-up setting (configured in Settings > Agent Workbench > Agent Answering > Intelligent Outbound Call Hang-up). Signature: Function() => Promise<UserStatusContext> Return value: UserStatusContext: For more information, see the data returned by the CoachCall operation. |
transferStatisfic | Sends a voice satisfaction survey or transfers to another IVR flow. Signature: Function(contactFlowId?: string) => Promise<UserStatusContext> Parameter: contactFlowId?: {string} If not specified, the configured voice satisfaction survey flow is initiated. You can also pass a specific IVR flow ID to initiate that flow. After the IVR flow is initiated, the current agent is disconnected. Return value: UserStatusContext: For more information, see the data returned by the LaunchSurvey operation. |
launchShortMessageAppraise | Sends a text message satisfaction survey. This is available only in the post-call processing state. Signature: Function(options?: object) => Promise<UserStatusContext> Parameter: options.smsMetadataId?: {string} The text message satisfaction survey configuration ID. If not specified, the configured text message satisfaction survey template is initiated. Return value: UserStatusContext: For more information, see the data returned by the LaunchSurvey operation. |
launchShortMessageMissedCall | Sends a voice satisfaction survey or transfers to another IVR flow. Signature: Function(options?: object) => Promise<void> Parameter: options.smsMetadataId?: {string} The text message satisfaction survey configuration ID. If not specified, the configured missed call text message template is used. |
launchAuthentication | Verifies identity. Sends a specified IVR flow. The current agent is not disconnected. Signature: Function(contactFlowId: string,contactFlowVariables?: string) => Promise<UserStatusContext> Parameters:
Return value: UserStatusContext: For more information, see the data returned by the LaunchAuthentication operation. |
applyForOnSite | Sets the on-site mode. When an agent is in off-site mode, they can call this method to set the on-site mode and then go online. Signature: Function() => Promise<UserContext> Return value: UserContext: For more information, see the data returned by the ChangeWorkMode operation. |
applyForOffSite | Sets the off-site mode. When an agent is idle, they can call this method to set the off-site mode, which is mobile phone answering. Signature: Function(options?: object) => Promise<UserContext> Parameters:
Return value: UserContext: For more information, see the data returned by the ChangeWorkMode operation. |
applyForOffSiteDirectly | Directly applies for off-site mode without a confirmation pop-up. For the core version, this method is identical to the The signature, parameters, and return value are the same as for applyForOffSite. |
getStatusCode | Gets the agent's current status code. Signature: Function() => object Return value: code: {string} The current status. lastCode: {string} The previous status. |
testTurnServers | Tests the agent endpoints. Signature: Function(options?: object) => Promise<object> Parameters:
Return value:
|
switchAccessPoint | You can switch between endpoints. Signature: Function(accessPoint: string) => void Parameter: accessPoint: {string} The endpoint to switch to. |
getSoftPhoneDeviceId | Gets the current softphone ID. You can use this value to call the MakeCall API operation. Signature: Function() => string |
toggleLocalVideo | Toggles the local camera on or off. Signature: Function(enabled: boolean) => Promise<void> Parameter: enabled: {boolean} Specifies whether to turn it on. |
getAudioDeviceList | Gets the list of microphones and headphones for the current device. Signature: Function() => Promise<MediaDeviceInfo[]> Return value: MediaDeviceInfo: For more information, see MediaDeviceInfo. |
getVideoDeviceList | Gets the list of cameras for the current device. Signature: Function() => Promise<MediaDeviceInfo[]> Return value: MediaDeviceInfo: For more information, see MediaDeviceInfo. |
switchVideoInputDevice | Switches the camera device. This takes effect in the next video call. Signature: Function(deviceId: string) => void Parameter: deviceId: {string} The camera device ID. You can get this by calling the getVideoDeviceList method. |
setAudioInputDevice | Sets the microphone device. Signature: Function(deviceId: string) => void Parameter: deviceId: {string} The microphone device ID. You can get this by calling the getAudioDeviceList method. |
setAudioOutputDevice | Sets the speaker or headphone device. Signature: Function(deviceId: string) => void Parameter: deviceId: {string} The speaker device ID. You can get this by calling the getAudioDeviceList method. |
addSignedSkillGroup | Adds a signed-in skill group. Signature: Function(options?: object) => Promise<void> Parameters:
|
renderIM | Renders the IM plugin (requires loading the IM SDK). Signature: Function() => void |
unmountIM | Uninstalls the IM plugin (requires loading the IM SDK). It is automatically uninstalled when the agent goes offline. Signature: Function() => void |
unloadWorkbench | Uninstalls the SDK Workbench. After calling this method, you must re-initialize the instance. Signature: Function() => Promise<void> |
setCallerPhoneNumber | Sets the current agent's outbound number. Signature: Function(phoneNumber: string) => void Parameter: phoneNumber: {string} An available outbound number, or |
getCallerPhoneNumber | Gets the current agent's outbound number. Signature: Function() => string Return value: Returns the outbound number set for the current agent. |
SDK static methods
Call static methods directly using window.CCCWorkbenchSDK. For example:
window.CCCWorkbenchSDK.addListener('onInit', () => { console.log('Instance has been initialized') }).
Parameter | Description |
addListener | Listens for the triggering of a hook function. Signature: Function(event: string, fn: (...args: any[]) => void, options: object) => void Parameters: event: {string} The hook function name. For more information, see Hook functions. fn: {Function} The function to be called when the hook function is triggered. options?.once: {boolean} Specifies whether to trigger only once. Example: |
removeListener | Deletes a specified hook function listener. Signature: Function(event: string, fn?: (...args: any[]) => void) => void Parameters: event: {string} The hook function name. For more information, see Hook functions. fn?: {Function} The function to be called when the hook function is triggered. Example: |
removeAllListeners | Deletes all hook function listeners or a specified hook function listener. Signature: Function(event?: string) => void Parameter: event?: {string} The hook function name. For more information, see Hook functions. |
Server-side preparations
Because the SDK is embedded in your business system, it sends multiple requests to your business system's server. You can set the request URL using the API address and request parameter settings for server-side API operations. You must forward the requests sent by the SDK through your server to the Cloud Contact Center server by calling the Cloud Contact Center OpenAPI. Then, you must pass the returned results back to the SDK. The steps are as follows:
You can call API operations using an AccessKey pair (AK/SK) or OAuth 2.0. For an example, see AK version demo.
Forward the requests sent by the SDK to the Cloud Contact Center server. Call the corresponding OpenAPI operation as described in the API overview and pass the returned results back to the SDK. The results returned to the SDK must be in JSON format.
You must configure agents, skill groups, and other settings in the Cloud Contact Center agent console. Otherwise, the system will not work properly.
Type | Interface | Description |
Service interface | GetLoginDetails | Gets the agent's logon information. |
GetUser | Gets the agent's information. | |
ListSkillLevelsOfUser | The agent's skill group information. | |
ListOutboundNumbersOfUser | The agent's outbound numbers. | |
ListConfigItems | Agent Workbench configuration information. | |
GetTurnServerList | Gets the TURN service endpoints provided by Cloud Contact Center. | |
ListPrivilegesOfUser | The agent's permission list. | |
GetTurnCredentials | The account and password for the TURN service. | |
ListDevices | Information about logged-on devices. | |
PickOutboundNumbers | Automatically selects an outbound number. | |
GetNumberLocation | Queries the location of a number. | |
ListRealtimeAgentStates | Queries the current agent status list (for the transfer feature). | |
ListAgentStates | Queries the current agent list (for the monitoring feature). | |
ResetAgentState | Resets the agent status. | |
ListRecentCallDetailRecords | Queries call records. | |
ListSkillGroups | Gets skill groups. Only administrators have permission. | |
ListBriefSkillGroups | The list of skill groups for transfer. | |
ListHistoricalAgentReport | Gets the agent's "My Work" data. | |
SaveTerminalLog | Reports error logs to the server. | |
SignInGroup | Signs in to a skill group. | |
PollUserStatus | Polls for user status. | |
LaunchAuthentication | Verifies identity. | |
ChangeVisibility | Switches invisibility. | |
SignOutGroup | Exit. | |
AddBlacklistCallTagging | Adds a number to the blacklist. | |
AddFeedback | AI data backflow. | |
AnalyzeConversation | Analyzes a session and generates AI content. | |
ListFlashSmsApplications | Gets the list of flash SMS template carriers. | |
ListFlashSmsTemplates | Gets the list of flash SMS templates. | |
GetIvrTrackingSummary | Gets the IVR intelligent analysis result. | |
Call API operations | TakeBreak | Takes a break. |
ReadyForService | Sets to idle. | |
MakeCall | You can make a phone call. | |
AnswerCall | Answers a call. | |
ReleaseCall | Hangs up a call. | |
HoldCall | Puts a call on hold. | |
RetrieveCall | Retrieves a call. | |
BlindTransfer | Performs a blind transfer. | |
InitiateAttendedTransfer | Initiates an attended transfer. | |
CompleteAttendedTransfer | You can perform a consultative call transfer. | |
CancelAttendedTransfer | Cancels a transfer. | |
SendDtmfSignaling | Sends DTMF keys. | |
MonitorCall | Initiates monitoring. | |
BargeInCall | Barges in on a monitored call. | |
InterceptCall | Intercepts a monitored call. | |
Coach | Live Call Coaching | |
MuteCall | Mutes a call. | |
UnmuteCall | Unmutes a call. | |
LaunchSurvey | Sends a voice satisfaction survey. | |
ChangeWorkMode | Switches the work mode. | |
RedialCall | Redials a call. This is generally used when the number is encrypted and redialing is done using the jobId. |
Development errors and logic errors
The SDK throws two types of errors: development errors and logic errors. We recommend that you configure the `onErrorNotify` hook and print the parameters during development to facilitate troubleshooting. This also lets you throw relevant errors to the customer for problem investigation.
Development errors: These errors can be fixed by modifying your code and are consistently reproducible. Common examples include incorrect configuration parameter types or SDK method calls that do not follow the state constraint table. For example, if the `onInit` configuration item requires a method but a string is passed instead, the SDK will execute the code directly and the JS execution will be interrupted. You must fix these types of errors based on the error message.
Logic errors: These errors are caused by improper user operations in the contact center and are not always reproducible. Common examples include not granting the browser sound card permissions for the domain, logging in from another location, an agent not being assigned to a skill group, or a contact center network error. For these errors, the SDK calls the `onErrorNotify` method to notify the external system. The following list describes all cases in the `onErrorNotify` hook function:
5001: 'Outbound call failed',
5002: 'You have not been added to a skill group and cannot use this feature. Contact the contact center administrator to be added.',
5003: 'Skill group information is abnormal.',
5004: 'Check if the agent is on a call and has a voice satisfaction survey flow configured.',
5005: 'The current WebSocket connection is slow. Wait or refresh the page and go online again.',
5006: 'Check if the agent is on a call and has passed the IVR flow ID.',
5007: 'The number of selected skill groups exceeds the limit.',
5008: 'Missing skill group information.',
6001: 'No call channel information.',
6002: 'No call channel ID.',
6003: 'No call job ID.',
7001: 'A device is already registered. The softphone is not initialized.', // A device is detected before SIP initialization. The customer can choose whether to log on.
7002: 'A device is already registered. Softphone initialization is abnormal. Refresh the page.', // After SIP initialization, the registered device and SIP are inconsistent, causing an error.
7003: 'Cannot get endpoint information.',
7004: 'Endpoint speed test failed.',
7005: 'Use the HTTP protocol.',
7006: 'The browser does not meet the requirements.',
7007: 'A new device is now online. Check it.',
7008: 'The SIP phone is not online.',
7009: 'Cluster switchover. All APIs are unavailable. The agent needs to refresh the page.',
7010: 'Currently in office phone mode.',
8001: 'Check the sound card permissions.', // Interface for device exception prompt.
8002: 'Check the sound card permissions.', // Interface for device exception prompt.
8003: 'Already in a call.',
8004: 'Incoming call ringtone playback failed. Check the playback device.',
8010: 'Call network disconnected. Check your network.',
8011: 'ICE connection status is abnormal. Check your network and re-establish the call.',
8012: 'ICE negotiation failed during call establishment.',
9001: 'This operation cannot be performed in the current state.',
9002: 'Invalid parameter.',
9003: 'Execution failed.',
9004: 'The softphone has been initialized.',
9005: 'Call the PrepareSignIn method first.',
9006: 'Offline failed.',
9007: 'Network connection failed.',
9008: 'Missing logon information.',
9009: 'Caller is empty.',
9010: 'No available caller.',
9012: 'Callee is empty.',
9013: 'Invalid parameter.',
9014: 'Conference participant error. Fewer than two participants.',
12001: 'The current IM session has been claimed.',
/* The following are events moved out */
PollUserStatusError: 'Cannot get agent status. Log on again.',5001 error description
For a 5001 error, the returned `errorMsg` is the SIP code that corresponds to the outbound call failure, and `errorMsgTip` is the semantic translation of the SIP code.
The SIP codes may vary for different carriers. The following table describes common SIP code relationships:
{
100: 'Calling',
180: 'Callee is ringing',
181: 'Call is being forwarded',
182: 'Queued',
183: 'In progress',
200: 'Success',
300: 'Multiple choices. The requested address has multiple options.',
301: 'Address is permanently unavailable. The call has been redirected.',
302: 'Address is temporarily unavailable. The call has been redirected.',
305: 'The requested resource must be accessed through the proxy server specified in the Contact header field.',
380: 'Alternative service. The call was not successful. You can try another service.',
400: 'The call request format is invalid or has a syntax error.',
401: 'User not authorized. User authentication is required.',
402: 'Payment is required to complete the session.',
403: 'The server refuses to provide the service.',
404: 'User does not exist. The user does not exist on the server specified in the Request-URL.',
405: 'The requested method is not allowed.',
406: 'The requested resource only responds to certain special requests and does not accept the current request.',
407: 'User authentication is required.',
408: 'Request timeout. The server did not generate a response within the specified time.',
409: 'The request conflicts with the current resource state and cannot be processed.',
410: 'The requested resource does not exist on the server and cannot be forwarded.',
411: 'Refused to accept requests without a defined Content-Length.',
413: 'The request is too large and exceeds the server's processing limit.',
414: 'The request URL is too long. The server rejects the request.',
415: 'The server does not support the message body format of the request and refuses to process it.',
416: 'Unsupported URL scheme.',
420: 'The server cannot understand the extension protocol specified in the header.',
421: 'The server requires a specific extension to process the request, but the extension is not listed in the request.',
423: 'The interval is too short. The resource refresh time (or effective time) set by the server in the request is too short.',
480: 'The callee has been contacted but is currently unavailable.',
481: 'The server has received the request but cannot match it with an existing dialog or transaction.',
482: 'Loop detected. The server has detected a loop.',
483: 'Too many hops. The request contains a Max-Forwards header field of 0.',
484: 'The server received the request, but the Request-URL is incomplete.',
485: 'The requested Request-URL is ambiguous.',
486: 'The callee has been contacted, but the callee or carrier is busy and cannot handle additional calls at the moment.',
487: 'Request terminated. The request was terminated by BYE or CANCEL. This is common when the caller actively cancels the call.',
488: 'The callee cannot accept the request. This is usually due to a media negotiation failure.',
491: 'Pending request. In the same session, the server received a request that has a dependent request in progress.',
493: 'Unidentifiable. The server received a request containing an encrypted MIME and does not know or provide a suitable decryption key.',
500: 'Carrier server internal error.',
501: 'The carrier server has not implemented the relevant request function.',
502: 'The carrier server received an invalid response from a downstream server.',
503: 'The carrier server is temporarily unable to process the request due to overload or maintenance.',
504: 'Carrier server request timeout.',
505: 'The carrier server does not support the SIP protocol version used in the request.',
513: 'The carrier server cannot process messages that exceed the specified length.',
600: 'The callee has been contacted but is busy and does not intend to answer the phone.',
603: 'The callee has been contacted but explicitly does not want to answer or cannot join the call. This is common when the callee has blacklisted the caller.',
604: 'The callee is offline. The callee does not exist in the network.',
606: 'The callee has been contacted, but some aspects of the session description are not accepted, resulting in a media negotiation failure.',
}7001 error description
Example of a 7001 error return value:
{
errorCode: 7001,
errorMsg: {
callId: '7089e388-b2db-e3b2-e4c2-572faf77c4d7',
contact: 'sips:80001012@100.104.xx.xxx:15646;rtcweb-breaker=yes;transport=wss',
deviceId: 'CCC-30.240.xx.xxx-chrome99-bs82ea17f7804263c',
extension: '80001010',
instanceId: 'ABC',
userId: 'abc@ABC',
userState: 'DIALING',
},
errorMsgTip: 'A device is already registered. The softphone is not initialized.'
}
Metric description:
deviceId: The ID of the currently logged-on device.
userState: The status of the currently logged-on device. The following statuses are available: {
TALKING: 'In a call',
DIALING: 'Dialing',
RINGING: 'Ringing',
WORKING: 'Post-call processing',
READY: 'Idle',
BREAK: 'On break',
OFFLINE: 'Offline',
}When you receive a 7001 error, you can call the forceToPrepareSignIn method to continue the registration and disconnect the original device.
Status code table and descriptions
Status code | Description | Operation | Allowed methods |
-1 | Not registered | In this state, only the register operation can be performed. | register |
0 | Registering | register | |
1 | Offline | Go online | logIn, applyForOffSite, forceToPrepareSignIn |
2 | On break | Set to idle, outbound only, go offline | applyForBreak, ready, changeVisibility, logOut, addSignedSkillGroup |
3 | Idle | Go offline, make outbound call, answer, initiate monitoring, conference | logOut, agentToAgent, call, monitor, applyForBreak, changeVisibility, bargeIn, intercept, coach, startConference, addSignedSkillGroup |
4 | Outbound only | Go offline, make outbound call, answer, initiate monitoring, conference, set to idle | logOut, agentToAgent, call, monitor, applyForBreak, changeVisibility, ready, bargeIn, intercept, coach, startConference, addSignedSkillGroup |
5 | Post-call processing | Set to idle | logOut, applyForBreak, ready, call, launchShortMessageAppraise, changeVisibility, applyForOffSite, addSignedSkillGroup |
6 | Ringing | Answer | answer |
7 | IM in progress | addSignedSkillGroup | |
8 | Dialing | Hang up | hangUp, sendDtmf |
9 | Inbound call | Hang up | hangUp, callHold, callRetrieve, sendDtmf, muteAgent, unmuteAgent, transferStatisfic, launchAuthentication, thirdCallTransfer, initiateAttendedTransfer |
10 | Outbound call | Hang up | hangUp, callHold, callRetrieve, sendDtmf, muteAgent, unmuteAgent, transferStatisfic, launchAuthentication, thirdCallTransfer, initiateAttendedTransfer |
11 | Internal call | End call | hangUp, callHold, callRetrieve, sendDtmf, muteAgent, umMuteAgent |
12 | On hold | Take a call off hold | callRetrieve |
16 | Initiating three-way call | Retrieve call, cancel three-way call | thirdCallRetrieve |
17 | Consultation call | Cancel consultation call, transfer consultation call | thirdCallRetrieve, thirdCallTransferFinished, sendDtmf, switchToConference |
19 | Conference | Agent initiates a conference from the idle state | hangUp, sendDtmf |
20 | Passive help request | Hang up | hangUp |
21 | Monitoring | Hang up | hangUp |
24 | Initiating monitoring, not yet successful | ||
25 | Barged in, entering three-way call | Hang up | hangUp |
26 | Coached agent, entering three-way call | Hang up | hangUp |
30 | Agent status change during conference | For example, someone leaves or joins the conference | hangUp, transferStatisfic |
The "Allowed methods" column lists some call-related or status-related methods. You can call methods that are not listed, but the results may differ in different states.
You can obtain status changes through the onStatusChange hook function, which is triggered each time the status changes.
Key points for multi-tab outbound calls
Scenarios
Users who have integrated a CRM system can use the SDK interface for outbound calls. However, some users may need to make outbound calls from other pages, such as user list or user detail pages, by clicking a button. This requires the SDK to be registered on that page, but the SDK does not support multi-tab registration. To address this, we provide two solutions: BroadcastChannel and LocalStorage.
BroadcastChannel (recommended)
You can use the BroadcastChannel Web API to communicate between multiple tabs. This solution involves a main application and a child application. Use window.CCCWorkbenchSDK.BroadcastChannelMain to register the main application and window.CCCWorkbenchSDK.BroadcastChannelChild to register the child application. Events triggered in the main application will notify the child application, causing its events to trigger as well. When a child application calls a method, it notifies the main application to call the method. Therefore, all method return results from the child application are Promises, even if they are not Promises in the main application. The child application waits for the main application to successfully call the method.
Compared to the localStorage solution, BroadcastChannel supports triggering most hook functions and calling instance methods.
How to use
Instantiate the main application. Use
window.CCCWorkbenchSDK.BroadcastChannelMaininstead ofwindow.CCCWorkbenchSDKto initialize the instance. The method calling and parameter passing are the same as forwindow.CCCWorkbenchSDK, as shown in the following example:window.workench = window.CCCWorkbenchSDK.BroadcastChannelMain({ instanceId: "xxx", /* Other configuration items */ }); // Do not add new before window.CCCWorkbenchSDK.BroadcastChannelMain.Instantiate the child application. Use
window.CCCWorkbenchSDK.BroadcastChannelChildto initialize the child application. The child application supports only some parameters, includinginstanceId(required) and some hook function parameters. TheonGetStatsDataparameter is not supported. Other parameters are invalid. You can call the main application's methods, but thegetRemoteMediaStreammethod is not supported. The methods return a Promise result, as shown in the following example:window.workbenchChild = window.CCCWorkbenchSDK.BroadcastChannelChild({ instanceId: 'xxx', onInit: () => { console.log('The main application has been initialized!'); // If the child application is loaded after the main application's onInit, this event will not be triggered. window.workbenchChild.register(); // The child application calls register to make the main application register and go online. }, }); window.workbenchChild.call({ callee: '199xxxx9999' }); // Make a call. window.workbenchChild.hangUp(); // Hang up the call.
Notes
The main application and child application must be in the same browser.
The main application can be initialized only once per browser. The child application can be initialized multiple times in multiple tabs. If the main application is initialized multiple times, methods called by the child application notify all main applications that have the same instance ID. Then, all main applications call the child application's methods, which may cause unexpected results.
The limitations of the BroadcastChannel Web API also apply to the communication between the main and child applications.
LocalStorage
In the tab where the SDK is registered, you can listen for changes in localStorage from other tabs. In other tabs, you can set localStorage to make an outbound call.
How to use
Set the configuration item
useLocalStorageToCalltotrue.All tabs must be in the same browser. Only one tab can register CCCWorkbenchSDK, and that tab must remain logged in.
When you make a call from another tab, set a localStorage item with the key `CCCWorkbenchSDKCall` and a value such as `{callee: '1558888****', caller: '05712823****', random: 0.234234234}`. If the calling page and the registration page are in the same tab, this method cannot listen for the change, and the call will not be made. The value of `caller` must be set according to the rules in the SDK's call method. After you set the item, the tab that registered CCCWorkbenchSDK listens for a change in the `CCCWorkbenchSDKCall` item in localStorage and automatically makes the outbound call:
const value = { callee: "1558888****", caller: "05712823****", random: Math.random(), }; localStorage.setItem("CCCWorkbenchSDKCall", JSON.stringify(value));To hang up a call from another tab, set a localStorage item with the key `workbenchSdkHangup` and a random number as the value. The call is then automatically hung up.
localStorage.setItem('CCCWorkbenchSDKHangup', Math.random())You can use
localStorage.getItem('CCCWorkbenchSDKStatus')to query the current agent's status code. You can make an outbound call only when the value is 3, 4, or 5. You can hang up a call only when the value is 8, 9, 10, 11, 12, or 21.
Upgrading from version 2.x
The frontend resource addresses have changed. Two integration methods are available: the UI version and the core version.
The global SDK name has been changed from
WorkbenchSdktoCCCWorkbenchSDK.It is mandatory to initialize (new) only one instance at a time. Before you re-initialize an instance, you must call the
unloadWorkbenchmethod.[Breaking Change] The internal development variable
window._sdk_apphas been deleted. Do not use this variable.[Breaking Change] Global styles, such as some global styles for html, body, ul, li, a, and img elements, have been removed from the style files.
config configuration changes:
Added the
functionSwitchproperty. You can use thechangeFunctionSwitchmethod to modify it.Added the
containerStyleproperty to customize the SDK interface container style. You can use this property to modify the border radius, shade, and other styles.Added the
reducePanelContainerproperty. This property is a container for rendering the minimized panel and returns an HTML tag.Added the
loggerproperty to support custom log collection and printing. This helps businesses troubleshoot problems independently.The
regionIdproperty is now optional and defaults tocn-shanghai.Deleted the
defaultVisibleproperty. Usevisibleinstead.Deleted the
defaultMainContentVisibleproperty. UsemainContentVisibleinstead.Deleted the
reducePanelproperty. UsefunctionSwitch.reducePanelinstead.Deleted the
isLoggedKeepBreakproperty. You can go online in break mode from the interface. The register and logIn methods also support the mode="break" parameter to go online in break mode.Deleted the
isLoggedInvisibilityproperty. You can go online in invisible mode from the interface. The register and logIn methods also support the mode="invisibility" parameter to go online in invisible mode.[Breaking Change] Deleted the
moreActionListproperty. Due to interface changes, use thefunctionSwitchproperty for the feature menu.[Breaking Change] Deleted the
sideNavListproperty. Due to interface changes, use thefunctionSwitchproperty for the feature menu.
Hook function changes:
Added the
onMainContentVisibleChangehook function, which is triggered whenmainContentVisiblechanges.Added the
onWorkbenchClosehook function, which is triggered when you click the Close button in the upper-right corner of the panel.Added the
onBeingMonitoredhook function, which is triggered when an agent is being monitored.Deleted the
onAgentOutboundScenariohook function. Use theonChangeInvisibilityhook function instead, which is triggered when switching to invisible mode.The
onGetStatsDatahook function now has a newmossparameter, which represents the agent's current voice call quality Mean Opinion Score (MOS).
Instance method changes:
All asynchronous methods, such as
callandhangUp, now support Promise. The original callback is still supported but is no longer recommended.Some methods that previously passed multiple parameters, such as register, logIn, and call, now use an object for parameter passing.
Added the
changeUIConfigmethod to modify UI properties.Added the
changeFunctionSwitchmethod to modify thefunctionSwitchproperty.Added the
addSignedSkillGroupmethod to sign in to new skill groups while logged in, without needing to go offline and log in again.Deleted the
changeVisiblemethod. UsechangeUIConfigto modify it. For example:changeUIConfig({visible: true}).Deleted the
changeMainPaneVisiblemethod. UsechangeUIConfigto modify it. For example:changeUIConfig({mainContentVisible: true}).Deleted the
changeWidthmethod. UsechangeUIConfigto modify it. For example:changeUIConfig({width: '310px'}).
New instance properties:
Added the
localMediaStreamproperty to obtain the local media stream.Added the
remoteMediaStreamproperty to obtain the remote media stream.Added the
RTCPeerConnectionproperty to obtain the WebRTC peering connection.
Business logic changes:
[Breaking Change] The status of a monitored agent no longer changes to
21. The status remains the same as before, and the monitor's information is displayed on the page. The monitored agent can operate the function buttons as normal. Use theonBeingMonitoredhook function to listen for whether the agent is being monitored. The status code21indicates only the status of the monitor who is actively monitoring.
Except for the feature changes marked with [Breaking Change], which are not compatible with version 2.x, other deleted or changed configurations are compatible with version 2.x. However, we recommend that you adopt the version 3.x syntax because the logic for compatibility with version 2.x will be removed in future major version upgrades.
Update Log
2026.07.22
workbench: 3.8.1
Features
Optimized the style display and interaction experience.
Added the
onHeartBeatheartbeat event: You can use this event to detect disconnections, automatically re-logon, or trigger alerts.Blacklist remarks: The Add to Blacklist feature in the call record panel now supports adding remarks.
Enhanced SIP network error diagnosis: Error prompts for abnormal Interactive Connectivity Establishment (ICE) candidates or ICE connection failures now include troubleshooting suggestions, such as testing with a mobile hotspot or contacting your IT department to open UDP port 3478. The error notification also includes diagnostic information, such as the endpoint, TURN server, and whether credentials have expired, to help locate enterprise network restrictions.
Bug Fixes
Fixed an issue with blind transfer `transferor` parameter assignment. The
transferorassignment in `blindTransfer` was using an incorrect variable name, which caused the `transferor` parameter to not be cleared correctly. This issue is fixed, and the transfer scenario behavior is now normal.
im-sdk: 1.8.1
Added the blacklist capability.
Optimized some experience issues.
2025.10.14
workbench: 3.6.1
Features
Optimized the
sendDtmffunction by adding a Dual-Tone Multi-Frequency (DTMF) sending queue processing logic. This prevents an inconsistent DTMF sending order and unexpected situations.The monitoring channel is now a list to support multi-channel monitoring. The page display now supports showing information for multiple monitors.
im-sdk: 1.6.0
Optimized some editor features.
Optimized the progress display effect for sending multiple images.
2025.08.21
workbench: 3.5.2
Features
Added the
<a baseurl="t2664044_v1_13_2.xdita" data-node="4824607" data-root="16411" data-tag="xref" href="#7d8424aa9f9p3" id="7d624e3c2cigm">setCallerPhoneNumber</a>and<a baseurl="t2664044_v1_13_2.xdita" data-node="4824607" data-root="16411" data-tag="xref" href="#a10fe179f8b51" id="fefbdd5f65gar">getCallerPhoneNumber</a>instance methods. You can use these methods to set the outbound caller number for the current agent and retrieve the current outbound caller number.
Bug Fixes
Fixed an issue with abnormal interface styles.
Fixed an issue where the
defaultLastSelectedCallerNumberfield setting was invalid.
2025.08.19
im-sdk: 1.5.3
Bug Fixes
Optimized the display of queued messages on the agent side.
2025.08.05
workbench: 3.5.1
Features
Optimized the 5001 error prompt. The Solution Query button now redirects to the corresponding carrier's documentation based on the carrier of the caller number.
Optimized the layout of the More Operations button and the style of the keyboard button interface.
2025.04.24
workbench: 3.4.1
Bug Fixes
Added
@charset "UTF-8";to the head of the CSS file. This prevents some icons from displaying as garbled text if the browser uses another encoding to parse the file.
2025.04.22
workbench: 3.4.0
Features
Added the
prettyPhoneNumberUI version property to control whether to format phone numbers on the interface.You can now call the
sendDtmfmethod in the dialing ringing state (8).Added the
functionSwitch.allowTransferproperty to specify whether to display the transfer operation on the interface.Optimized the flash SMS configuration acquisition logic. When
functionSwitch.showFlashSmsConfigis set tofalse, the flash SMS configuration API is not called.Added a second parameter (the previous list of signed-in skill groups) to the
onSignedSkillGroupChangehook function.Optimized the Workbench uninstallation logic. The
unloadWorkbenchmethod is now an asynchronous Promise. To re-initialize the instance immediately after you callunloadWorkbench, you can wait for the asynchronous operation to complete before you initialize the instance. This helps avoid initialization exceptions that are caused by unfinished asynchronous operations.Optimized some error prompts.
im-sdk: 1.4.2
Fixed some known issues.
2025.03.10
workbench: 3.3.7
Bug Fixes
Fixed an issue with concurrent sessions. Only one session can be established at a time. New incoming calls are now rejected with an 8003 error message.
2025.02.28
workbench: 3.3.5
Bug Fixes
Fixed an issue where the agent status was abnormal and did not change for incoming calls after a SIP disconnection and reconnection.
Fixed an exception that occurred when requesting the
SaveWebRtcInfoAPI after hanging up, which prompted that thejobIdparameter was missing.
2025.02.14
workbench: 3.3.4
Features
Added the
onMediaPlayFailedhook function. If media playback fails due to the browser's autoplay policy and the customer's voice cannot be heard, you must handle the failure in this function.
Bug Fixes
Fixed an issue where calling the
forceToPrepareSignInmethod immediately after a 7001 error would cause the agent to not hear the customer's voice.
2025.01.14
workbench: 3.3.2
Bug Fixes
Optimized the check logic for the
apiAxiosFuncreturn result to be compatible with abnormal return values.Fixed an issue where the skill group selection pop-up still appeared in some cases when "Select Skill Group to Log In" was set to No.
Optimized some requests to not trigger the
onErrorNotifymethod. Some log recording APIs do not affect call functions even if they report an error.Optimized the polling for SIP device registration. This prevents an agent's SIP device registration from timing out and the agent from automatically going offline due to the `setTimeout` timer delay when the browser tab is in the background.
im-sdk: 1.2.2
Bug Fixes
Fixed an issue with the video conversion feature.
Optimized the disconnection and reconnection logic.
2024.12.25
workbench: 3.3.1
Bug Fixes
Fixed an issue where the SDK failed to initialize when imsdk resources were not loaded.
2024.12.13
workbench: 3.3.0
Features
Added SDK static methods such as
addListener,removeListener, andremoveAllListenersto support adding global hook function listeners.
Bug Fixes
Fixed an issue where modifying
exportErrorOfApiwithchangeUIConfigwas invalid.Fixed the WebSocket (ws) reconnection logic to prevent the page from stuttering due to a surge in reconnection frequency after a persistent connection failure.
im-sdk: 1.2.0
Features
Unsupported file formats are now packaged as zip files for upload.
Unsupported video formats are now converted to MP4 for upload. For example, mov format videos, which were previously unsupported, are now converted to MP4 format for upload.
2024.11.15
workbench: 3.2.3
Bug Fixes
Fixed a style exception caused by the process of dialing a number after minimizing the panel.
The `onCallRelease` hook function is now triggered when a call is automatically hung up because it rings for a long time without being answered.
Fixed an issue where the ListFlashSmsSettings API was abnormally called when logging out.
im-sdk: 1.1.5
Bug Fixes
Fixed an issue where draft messages failed to be displayed.
2024.10.17
workbench: 3.2.2
Bug Fixes
Fixed an issue where a 9001 error was reported when registering and going online again after calling unloadWorkbench in some cases.
2024.10.09
workbench: 3.2.1
Features
Added the
ssePathconfiguration parameter to support the EnhanceAgentReplies request for the sse API.Added the
onIvrTrackingAISummaryhook function to support obtaining IVR intelligent analysis result data when an incoming call is ringing.Administrators can now initiate monitoring operations in invisible mode.
The speech-to-text page now supports displaying IVR tracking intelligent analysis and post-call intelligent analysis information. The speech-to-text feature needs to be enabled for call intelligent analysis.
The flash SMS configuration feature has been redesigned to support skill group-level flash SMS configuration and to remember the last selected flash SMS template.
Added support for dialing extension numbers for outbound calls. Use a comma (,) as a separator. The extension number follows the comma.
The dial pad now supports long-pressing to enter an asterisk (*).
im-sdk: 1.1.2
Features
Added intelligent reply assistance features: AI expansion, AI error correction, and script optimization. This requires support for the EnhanceAgentReplies sse API call.
Added a feature to display an intelligent session analysis card after a session ends.
Upgraded the satisfaction survey message card with an optimized style.
When viewing an image in full screen, you can now click the download button to download it.
2024.08.09
im-sdk: 1.0.6
Bug Fixes
Fixed an issue where the URL for video messages expired when obtaining customer historical messages.
2024.08.01
workbench: 3.1.4
Bug Fixes
Fixed an issue where a "No available caller" error occurred when calling the call method immediately after the current status changed to 3 in the onStatusChange event.
2024.07.29
workbench: 3.1.3
Bug Fixes
The
registerandstartConferencemethods are now compatible with the parameter passing format of version 2.x, and a deprecation notice has been added.Fixed an issue where configuring a custom ringtone in the settings was invalid.
Fixed compatibility with Chrome 72.
Fixed an issue where the redial button was missing in call records when there was only one caller number.
Features
A dialing timer is now displayed on the interface during dialing.
Added a copy function for the caller and callee numbers during a call.
Breaking Changes
Reduced changes to global common styles, optimized the application method of component styles, and removed global selector styles such as
*, ::before, ::after {}.
im-sdk: 1.0.5
Bug Fixes
Optimized the display of some styles.
Features
To add quick replies, an administrator must configure them in the Network Services > Settings > Workbench > Quick Replies panel.
Added display of the visitor's device and IP location.
Added a sorting function for the in-service list.
Added a session summary identifier to the ended session list.
2024.07.17
workbench: 3.1.0
Bug Fixes
Fixed an issue with abnormal parameter passing in the onRegister hook function.
Features
Optimized the multi-tab communication logic by adding the BroadcastChannel solution. This solution supports hook functions and most method calls.
Optimized internal logic to improve system stability.
2024.07.01
workbench: 3.0.9
Bug Fixes
Fixed an issue where the hang-up button was not displayed during a consultation call.
Fixed an issue where the conference interface was displayed in the post-call processing state after a consultation call was hung up.
Fixed an issue where the "Support Blind Transfer" setting in the settings page was invalid.
Fixed the customer number display on the speech-to-text panel to adapt to the rules for hiding incoming and outgoing call numbers.
Fixed an issue where the incoming call skill group was lost during a transfer.
Fixed an issue where the
currentSkillGroupsparameter for the signed-in skill group passed to the logIn method was invalid.
im-sdk: 0.5.10
Bug Fixs
Fixed an issue with abnormal parameters in some API calls.
2024.06.25
workbench: 3.0.8
Bug Fixes
Fixed an issue where satisfaction surveys could not be sent in SIP phone mode.
