Frontend SDK integration (3.x)

更新时间:
复制 MD 格式

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

Important

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>
Important
  • 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.

Important

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:

  1. Use Chrome 72 or a later version. We recommend using the latest version.

  2. 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.

  3. 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 /agentdest in the endpoint. For example, if the endpoint is workbench/xxx/agentdest, xxx is the instance ID. See the following figure:

image

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

true

width

The width of the SDK panel. To ensure a complete UI display, the minimum width is 310 px.

string | number

310px

height

The height of the SDK panel. To ensure a complete UI display, the minimum height is 540 px.

string | number

620px

visible

Specifies whether to display the SDK panel.

boolean

true

mainContentVisible

Specifies whether to display the full content of the SDK panel. If you set this to false, only the SDK toolbar with basic features is displayed.

boolean

true

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.

React.CSSProperties

-

functionSwitch

The feature switches on the panel (show or hide). Some settings also need to be enabled in the Workbench.

WorkbenchUIFunctionSwitch

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

true

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

false

prettyPhoneNumber

Specifies whether to format phone numbers for display.

For example, 01012345678 is formatted as 010-12345678.

boolean

true

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

true

breakAction

Displays the Break operation in the status switch menu in the upper-left corner.

boolean

true

offlineAction

Displays the Offline operation in the status switch menu in the upper-left corner.

boolean

true

invisibilityAction

Displays the Invisibility operation in the status switch menu in the upper-left corner.

boolean

true

adjustVolumeSetting

Displays the Adjust Volume operation in the Settings menu in the upper-right corner.

boolean

true

deviceDetectSetting

Displays the Device Detection operation in the Settings menu in the upper-right corner.

boolean

true

accessModeSetting

Displays the Access Mode operation in the Settings menu in the upper-right corner.

boolean

true

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

true

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

true

allowStartConference

Allows agents to start a conference.

boolean

true

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

true

allowCallOutbound

Allows agents to make outbound calls.

boolean

true

allowViewRecord

Allows agents to view Call Records.

boolean

true

allowViewMyWork

Allows agents to view My Work.

boolean

true

reducePanel

Displays the Minimize button in the upper-right corner of the interface.

boolean

true

closeable

Displays the Close button in the upper-right corner of the panel.

boolean

true

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

true

allowCreateTicket

Allows agents to create tickets.

boolean

true

allowCreateSessionSummary

Allows agents to create session summaries.

boolean

true

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

{summary: true,ticket: true}

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

true

General configurations

Note

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 cn-shanghai.

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

false

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

1000

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

10000

pollSaveWebRtcInfoFrequence

The polling frequency for the SaveWebRtcInfo operation.

The default value is 10000 ms.

number

10000

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

false

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 false. If you set this to true, notifications are not displayed.

boolean

false

isEnableSwitchAdapter

To improve the audio quality of agent calls, multiple leased lines for endpoints have been added. The default value is true. If an agent needs to connect directly to the Cloud Contact Center server, set this to false.

boolean

true

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

false

isMonitoredWithoutPerception

Specifies whether the agent is monitored without their knowledge. If set to true, the monitor's information is not displayed on the call page.

boolean

false

ringingToneSrc

A custom ringtone for incoming calls. The value is the src attribute of the HTML audio tag.

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

false

videoCallConfig

Configurations related to video agents.

VideoCallConfig

See the type description below

imConfig

Configurations for the IM chat plugin. Requires loading the IM SDK resources.

IMConfig

See the type description below

transferDisplayedCustomerNumber

Specifies whether to display the customer's number when transferring to an external number.

boolean

false

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

Note

The request URL is: `${ajaxOrigin}${ajaxPath}?${ajaxApiParamName}=${apiName}&product=CloudCallCenter&version=2020-07-01&region=${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:

{ 
   data: {
     code: "xxx",
     data: "xxx",
     httpStatusCode: "xxx",
     requestId: "xxxx"
   }
}

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

false

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

false

defaultEnableCamera

Enables the camera by default.

boolean

true

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

{width: 1024, height: 576}

cacheSize

Specifies whether to cache the last adjusted size of the video window.

boolean

true

minConstraints

The minimum width and height constraints for window resizing [width, height].

[number, number]

[768, 432]

maxConstraints

The maximum width and height constraints for window resizing [width, height].

[number, number]

[1280, 720]

isFixed

Specifies whether to use the position: fixed layout.

boolean

true

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

false

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

true

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

#374151

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

{microphone: true,camera: true,fullscreen: true}

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:

  • ringing: An inbound call is hung up before being answered.

  • dialing: An outbound call is hung up before being answered.

  • inbound: An inbound call is hung up during the conversation.

  • outbound: An outbound call is hung up during the conversation.

  • agentHeld: A consultation call is hung up during the conversation.

  • meeting: Indicates a change in a participant's status during a meeting, such as hanging up.

  • consulted: A passive help request (consultation call) is hung up during the conversation.

  • monitored: A monitored call is hung up during the conversation.

  • monitoring: A monitoring initiation is hung up before the monitoring is successful.

  • bargedIn: A barged-in call is hung up during the conversation.

  • coached: A coached agent enters a three-way call, and the call is hung up.

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.

  • ON_SITE (On-site mode): Answer and make calls through the browser.

  • OFF_SITE (Off-site mode): Answer calls on a mobile phone. This is the "mobile phone answer" mode from version 1.0.

  • OFFICE_PHONE (Office phone mode): Answer and make calls on a SIP phone without using the browser.

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.

  • 0: WebRTC softphone.

  • 1: SIP phone.

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 mainContentVisible parameter.

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} remote: remote media; ringTone: incoming call ringtone; dtmfTone: DTMF tone; hintTone: hint tone; local: local media.

onHeartBeat

Added a listener for the health of the PollUserStatus polling. Configure the onHeartBeat callback during initialization to receive it.

Signature:

Function(event: object) => void

Parameters:

event.status: success (heartbeat successful) / failed (single failure, still retrying) / stopped (consecutive failures exceeded the threshold, polling has stopped)

event.data: When status is success, returns the PollUserStatus API data.

event.errorMsg, event.requestId, event.failedCount: When status is failed / stopped, returns the error message, request ID, and cumulative number of consecutive failures.

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 onCallDialing.

For inbound calls, it is first available in onCallEstablish.

MediaStream

remoteMediaStream

The remote media stream. This is undefined if the call is not answered.

For outbound calls, it is first available in onCallDialing.

For inbound calls, it is first available in onCallEstablish.

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.

RTCPeerConnection

SDK instance methods

Note

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:

header

height

width

visible

mainContentVisible

offlineImage

breakImage

containerStyle

defaultLastSelectedCallerNumber

exportErrorOfApi

Supports modification of a single parameter.

getUIConfig

Gets the current UI version-specific configurations. Only supports parameters that can be modified by the changeUIConfig method.

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 onInit hook function is triggered.

getTurnServerList

Gets the list of endpoints. Correct data is returned only after the onInit hook function is triggered.

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:

  • options.currentSkillGroups?: {Array<object>} The skill groups to sign in to. You can get the sign-in-able skill groups from the getSkillGroups method. For the UI version, if this is not specified, a pop-up window for selecting skill groups appears. For the non-UI version, if this is not specified, you must set Select Skill Group to Log In to No in Agent Workbench > Voice Service > Settings > Agent Workbench > Agent Settings. Otherwise, this is required.

  • options.accessPoint?: {string} The endpoint region. Select one from the return value of the getTurnServerList method. Pass default for automatic selection. The SDK will select the endpoint with the lowest latency.

  • options.deviceType?: {0 | 1} The device type. The default is `0` for softphone registration. If the agent has registered a SIP phone, you can set this to `1` to specify the SIP phone to go online.

  • options.mode?: {enum} The logon mode. Valid values: 'normal', 'invisibility', 'break'.

  • options.breakReason?: {string} The reason for the break when going online in break mode.

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:

  • options.currentSkillGroups?: {Array<object>} The skill groups to sign in to. You can get the sign-in-able skill groups from the getSkillGroups method. If not specified, the skill groups used during registration are used by default.

  • options.mode?: {enum} The logon mode. Valid values: 'normal', 'invisibility', 'break'.

  • options.breakReason?: {string} The reason for the break when going online in break mode.

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:

  • options.callee: {string} The callee number. For an internal call, this is the extension number of the target agent. For an outbound call, this is the customer's phone number.

  • options.caller?: {string} The caller number. For an internal call, this parameter is invalid. For an outbound call, this is an available outbound number for the current agent.

  • options.timeoutSeconds?: {number} The timeout period in seconds. If the call is not connected within this time, it is actively hung up. The value ranges from 30 to 300.

  • options.maskedCallee?: {string} The masked callee number. If this field is not empty, the callee number needs to be masked. The masking rule is defined by the customer.

  • options.mediaType?: {string} The media type. The default is AUDIO. Other optional parameters include VIDEO.

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:

  • options.jobId: {string} The call ID.

  • options.callee?: {string} The callee number of the call with the current jobId.

  • options.caller?: {string} The caller number.

  • options.timeoutSeconds?: {number} The timeout period in seconds. If the call is not connected within this time, it is actively hung up. The value ranges from 30 to 300.

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:

  • options.dtmf: {string} The DTMF key information, which includes the keys on the dial pad: 0-9, *, and #.

  • options.jobId?: {string} The call ID. Required for multi-party calls.

  • options.channelId?: {string} The call channel ID to which DTMF is to be sent. Required for multi-party calls.

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:

  • options.transferee: {string} The party to whom the call is transferred. This can be an agent's extension number, a skill group ID, or an external number.

  • options.transferor?: {string} The party initiating the transfer. When transferring to an external number, the number specified by this parameter is used as the caller. When transferring to an internal agent or skill group, this parameter is invalid, and the initiator is specified by UserId.

  • options.callPriority?: {number} The queuing priority when transferring to a skill group queue. The value ranges from 0 to 9, where 0 is the highest priority and 9 is the lowest.

  • options.strategyName?: {string} The agent allocation policy name when transferring to a skill group queue. Optional values are MOST_IDLE, MOST_SKILLED, MOST_ACQUAINTED, and CUSTOMIZED.

  • options.strategyParams?: {string} The agent allocation policy parameters when transferring to a skill group queue.

  • options.timeoutSeconds?: {number} The timeout period in seconds. The value ranges from 30 to 300.

  • options.transfereeType?: {string} The destination type of the transfer. Optional values are AGENT, SKILL_GROUP, IVR, and EXTERNAL_NUMBER.

  • options.contactFlowVariables?: {string} Variables passed to the contact flow. The variables configured here can be obtained and used in the IVR flow. The format is a collection of key-value pairs in a JSON string.

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:

  • options.transferee: {string} The party to whom the call is transferred. This can be an agent's extension number, a skill group ID, or an external number.

  • options.transferor?: {string} The party initiating the transfer. When transferring to an external number, the number specified by this parameter is used as the caller. When transferring to an internal agent or skill group, this parameter is invalid, and the initiator is specified by UserId.

  • options.callPriority?: {number} The queuing priority when transferring to a skill group queue. The value ranges from 0 to 9, where 0 is the highest priority and 9 is the lowest.

  • options.strategyName?: {string} The agent allocation policy name when transferring to a skill group queue. Optional values are MOST_IDLE, MOST_SKILLED, MOST_ACQUAINTED, and CUSTOMIZED.

  • options.strategyParams?: {string} The agent allocation policy parameters when transferring to a skill group queue.

  • options.timeoutSeconds?: {number} The timeout period in seconds. The value ranges from 30 to 300.

  • options.transfereeType?: {string} The destination type of the transfer. Optional values are AGENT, SKILL_GROUP, IVR, and EXTERNAL_NUMBER.

  • options.contactFlowVariables?: {string} Variables passed to the contact flow. The variables configured here can be obtained and used in the IVR flow. The format is a collection of key-value pairs in a JSON string.

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:

  • options.participantListJson: {string} The list of participants in a JSON array string format. If a participant is an internal agent, the array element is the agent's extension number. If a participant is an external customer, the array element is the customer's number.

  • options.timeoutSeconds?: {number} The timeout period in seconds. The value ranges from 30 to 300.

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:

  • options.jobId: {string} The ID of the call to be barged in on.

  • options.bargedUserId: {string} The ID of the agent to be barged in on.

  • options.timeoutSeconds?: {number} The barge-in timeout period. If the barge-in is not successful within the specified time, it is canceled. Normally, the barge-in operation succeeds immediately. This field is optional and defaults to 30 seconds. It is set to prevent exceptions.

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:

  • options.jobId: {string} The ID of the job to forcefully terminate.

  • options.interceptedUserId: {string} The ID of the agent to forcefully disconnect.

  • options.timeoutSeconds?: {number} The timeout period, in seconds, for a forced detachment. If the operation does not complete within this period, it is canceled. A forced detachment is typically an immediate operation, and this timeout prevents the operation from hanging if an exception occurs. This parameter is optional and defaults to 30.

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:

  • options.jobId: {string} The ID of the call to be coached.

  • options.coachedUserId: {string} The ID of the agent to be coached.

  • options.timeoutSeconds?: {number} The coaching timeout period. If coaching is not successful within the specified time, it is canceled. This field is optional and defaults to 30 seconds.

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:

  • contactFlowId: {string} The contact flow ID of the IVR identity verification flow.

  • contactFlowVariables?: {string} Variables passed to the contact flow. The variables configured here can be obtained and used in the IVR flow. The format is a collection of key-value pairs in a JSON string.

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:

  • options.signedSkillGroupIdList?: {Array<string>} The list of skill group IDs to sign in to. You can use this parameter to specify the skill groups for the off-site agent to sign in to. If not specified, the core version defaults to the skill groups from the last sign-in. The UI version displays a pop-up window to select skill groups.

  • options.mobile?: {string} The agent's personal phone number. This number is used in off-site mode. The agent can use this number to answer calls in off-site mode. If not specified, the mobile phone number or landline parameter in the agent's details is used.

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 applyForOffSite method. For the UI version, if signedSkillGroupIdList is not specified, the skill group selection pop-up is not displayed. This has the same effect as the core version's applyForOffSite method.

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:

  • options.accessPoint?: {string} You can test the value of a specific endpoint. If not specified, all current endpoints are tested.

  • options.currentFrequence?: {number} The number of times to test. If not specified, it is 1. The average value is taken for multiple tests.

Return value:

  • result: {object} The calculated node data.

  • accessPoint: {string} The calculated node with the lowest latency.

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:

  • options.skillGroupList?: {Array<object>} The list of skill groups to sign in to. This is required for the core version. For the UI version, if not specified, a pop-up window for selecting skill groups appears.

  • options.mediaTypeList?: {Array<string>} The media types of the skill groups to sign in to. If not specified, all media types are selected. (This parameter is supported only in the UI version).

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 auto to automatically select an outbound number.

getCallerPhoneNumber

Gets the current agent's outbound number.

Signature:

Function() => string

Return value:

Returns the outbound number set for the current agent. auto means the outbound number is automatically selected.

SDK static methods

Note

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:

window.CCCWorkbenchSDK.addListener('onInit', () => {
  console.log('Instance has been initialized');
});

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:

const onInitListener = () => {
  console.log('Instance has been initialized');
};
// Add a listener.
window.CCCWorkbenchSDK.addListener('onInit', onInitListener);
// Delete the listener.
window.CCCWorkbenchSDK.removeListener('onInit', onInitListener);

// Delete all onInit listeners.
window.CCCWorkbenchSDK.removeListener('onInit');

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.

  1. 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.

  2. 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

Note
  1. 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.

  2. 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

  1. Instantiate the main application. Use window.CCCWorkbenchSDK.BroadcastChannelMain instead of window.CCCWorkbenchSDK to initialize the instance. The method calling and parameter passing are the same as for window.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.
    
  2. Instantiate the child application. Use window.CCCWorkbenchSDK.BroadcastChannelChild to initialize the child application. The child application supports only some parameters, including instanceId (required) and some hook function parameters. The onGetStatsData parameter is not supported. Other parameters are invalid. You can call the main application's methods, but the getRemoteMediaStream method 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

  1. The main application and child application must be in the same browser.

  2. 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.

  3. 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

  1. Set the configuration item useLocalStorageToCall to true.

  2. All tabs must be in the same browser. Only one tab can register CCCWorkbenchSDK, and that tab must remain logged in.

  3. 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));
    
  4. 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())
  5. 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

  1. The frontend resource addresses have changed. Two integration methods are available: the UI version and the core version.

  2. The global SDK name has been changed from WorkbenchSdk to CCCWorkbenchSDK.

  3. It is mandatory to initialize (new) only one instance at a time. Before you re-initialize an instance, you must call the unloadWorkbench method.

  4. [Breaking Change] The internal development variable window._sdk_app has been deleted. Do not use this variable.

  5. [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.

  6. config configuration changes:

    • Added the functionSwitch property. You can use the changeFunctionSwitch method to modify it.

    • Added the containerStyle property to customize the SDK interface container style. You can use this property to modify the border radius, shade, and other styles.

    • Added the reducePanelContainer property. This property is a container for rendering the minimized panel and returns an HTML tag.

    • Added the logger property to support custom log collection and printing. This helps businesses troubleshoot problems independently.

    • The regionId property is now optional and defaults to cn-shanghai.

    • Deleted the defaultVisible property. Use visible instead.

    • Deleted the defaultMainContentVisible property. Use mainContentVisible instead.

    • Deleted the reducePanel property. Use functionSwitch.reducePanel instead.

    • Deleted the isLoggedKeepBreak property. 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 isLoggedInvisibility property. 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 moreActionList property. Due to interface changes, use the functionSwitch property for the feature menu.

    • [Breaking Change] Deleted the sideNavList property. Due to interface changes, use the functionSwitch property for the feature menu.

  7. Hook function changes:

    • Added the onMainContentVisibleChange hook function, which is triggered when mainContentVisible changes.

    • Added the onWorkbenchClose hook function, which is triggered when you click the Close button in the upper-right corner of the panel.

    • Added the onBeingMonitored hook function, which is triggered when an agent is being monitored.

    • Deleted the onAgentOutboundScenario hook function. Use the onChangeInvisibility hook function instead, which is triggered when switching to invisible mode.

    • The onGetStatsData hook function now has a new moss parameter, which represents the agent's current voice call quality Mean Opinion Score (MOS).

  8. Instance method changes:

    • All asynchronous methods, such as call and hangUp, 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 changeUIConfig method to modify UI properties.

    • Added the changeFunctionSwitch method to modify the functionSwitch property.

    • Added the addSignedSkillGroup method to sign in to new skill groups while logged in, without needing to go offline and log in again.

    • Deleted the changeVisible method. Use changeUIConfig to modify it. For example: changeUIConfig({visible: true}).

    • Deleted the changeMainPaneVisible method. Use changeUIConfig to modify it. For example: changeUIConfig({mainContentVisible: true}).

    • Deleted the changeWidth method. Use changeUIConfig to modify it. For example: changeUIConfig({width: '310px'}).

  9. New instance properties:

    • Added the localMediaStream property to obtain the local media stream.

    • Added the remoteMediaStream property to obtain the remote media stream.

    • Added the RTCPeerConnection property to obtain the WebRTC peering connection.

  10. 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 the onBeingMonitored hook function to listen for whether the agent is being monitored. The status code 21 indicates only the status of the monitor who is actively monitoring.

Note

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 onHeartBeat heartbeat 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 transferor assignment 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 sendDtmf function 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 defaultLastSelectedCallerNumber field 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 prettyPhoneNumber UI version property to control whether to format phone numbers on the interface.

  • You can now call the sendDtmf method in the dialing ringing state (8).

  • Added the functionSwitch.allowTransfer property to specify whether to display the transfer operation on the interface.

  • Optimized the flash SMS configuration acquisition logic. When functionSwitch.showFlashSmsConfig is set to false, the flash SMS configuration API is not called.

  • Added a second parameter (the previous list of signed-in skill groups) to the onSignedSkillGroupChange hook function.

  • Optimized the Workbench uninstallation logic. The unloadWorkbench method is now an asynchronous Promise. To re-initialize the instance immediately after you call unloadWorkbench, 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 SaveWebRtcInfo API after hanging up, which prompted that the jobId parameter was missing.

2025.02.14

workbench: 3.3.4

Features

  • Added the onMediaPlayFailed hook 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 forceToPrepareSignIn method 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 apiAxiosFunc return 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 onErrorNotify method. 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, and removeAllListeners to support adding global hook function listeners.

Bug Fixes

  • Fixed an issue where modifying exportErrorOfApi with changeUIConfig was 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 ssePath configuration parameter to support the EnhanceAgentReplies request for the sse API.

  • Added the onIvrTrackingAISummary hook 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 register and startConference methods 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 currentSkillGroups parameter 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.