CCPaaS Frontend UI SDK V2.1.0

The UI SDK provides only the UI and UI settings. This document offers basic usage, precautions, and sample code for the CCPaaS Outbound Call UI SDK.

I. Basic Usage

  1. The UI-SDK needs to be used in conjunction with the API-SDK.
  2. Download the SDK js and css files from the provided address and include them in the page where they need to be embedded.
  3. Copy the sample code, modify the configuration parameter information, and call the appropriate methods to use the SDK. Download Address:

II. Precautions

Browser Compatibility

  1. The SDK currently supports IE9+(including) and browsers based on its kernel (360/qq/…), as well as other mainstream browsers (chrome/firefox/…).
  2. If possible, it is recommended to upgrade to IE10 or higher to get the best user experience.

Code Example

Step 1: Import Required JS and CSS Files

<!-- Import the CCPaaS API JS file -->
<script src="https://ccps.s4.udesk.cn/ccpaas-phone-sdk/sdk/cti-phone/2.1.0/call-center-class.es6.js"></script>
<!-- Import the UISDK CSS file -->
<link rel="stylesheet" href="https://ccps.s4.udesk.cn/ccpaas-phone-sdk/sdk/cti-phone/2.1.0/udesk-phone-bar.css">
<!-- Import the UISDK JS file -->
<script src="https://ccps.s4.udesk.cn/ccpaas-phone-sdk/sdk/cti-phone/2.1.0/udesk-phone-bar.es6.js"></script>

Step 2: Initialize UISDK Instance (Choose Either Horizontal or Vertical)

Horizontal SDK (UdeskCtiPhoneBar)

  • Initialization
let udeskCtiPhoneBarInstance = new UdeskCtiPhoneBar({
  udeskCCPaasApi: UdeskCCPaasApiInstance,
const uiInstance = udeskCtiPhoneBarInstance.RenderTo(document.getElementById("root"));
  • Destruction

Vertical SDK (UdeskVerticalPhone)

  • Initialization
let udeskVerticalPhoneInstance = new UdeskVerticalPhone({
  udeskCCPaasApi: UdeskCCPaasApiInstance,
const uiInstance = udeskVerticalPhoneInstance.RenderTo(document.getElementById("root"));
  • Destruction

Successful Embedding as Shown

Image text

Step 3: UISDK Instance Parameters Explanation

UdeskCCPaasApiobjectYesCCPaaS API SDK instanceNull
MonitorCallCenterEventSourcestringNoNamespace for listening to API events"udesk-call-center-phone"
ButtonsobjectNoButton configuration (explained in detail below)
EnableHideSensitiveInfoboolNoWhether to enable hiding sensitive informationfalse
IsClearNumberInputByCallSuccessboolNoWhether to clear the dialing input box after a successful calltrue
EnableCallInTimeoutMonitorboolNoWhether to enable incoming call timeout reminderfalse
CallInTimeoutSecondboolNoIncoming call timeout seconds60
NumberInputReadonlyboolNoWhether the number input box is read-onlyfalse
PhoneDialVisibleboolNoWhether to display the dial padtrue
CallLogsVisibleboolNoWhether to display call logstrue
ManualScreenPopfuncNoManual screen pop eventnull
LogfuncNoError remindernull
CallNumberInputPlaceholderstringNoPlaceholder for dialing input box"Please enter"

Buttons Example Code (Users can customize the button UI as needed, ignore if no custom buttons are required)

// Custom Buttons example
let Buttons = {
  Hangup: {
    ClassNames: '',
    Icon: "udesk-cti-iconfont icon-udesk-cti-ic-hang-up",
    Text: "Hangup",
    Visible: true,
    Disabled: false,
    OnClicked: () => { }
  Answer: {
    ClassNames: '',
    Icon: "udesk-cti-iconfont icon-udesk-cti-ic-phone-answer",
    Text: "Answer",
    Visible: ({ connectState, agentState, agentSubState, currentAgentStartTime, phoneMode, phoneState, callStatus, callInputNumber }) => {
      return true;
    Disabled: ({ connectState, agentState, agentSubState, currentAgentStartTime, phoneMode, phoneState, callStatus, callInputNumber }) => {
      return true;
// Custom Buttons usage
let udeskCtiPhoneBarInstance = new UdeskCtiPhoneBar({
  udeskCCPaasApi: UdeskCCPaasApiClassInstance,
  Buttons: Buttons

buttons passing values

For overriding some of the default properties of buttons

Supported buttons now

Button NameDescription
AnswerAnswer Button
HangupHangup Button
WrapUpFinishWrap-up Button
MakeCallCall Button
DialMakeCallDial Pad Call Button
ManualScreenPopManual Screen Pop Button
SendSmsSend Button
AgentStatusAgent Status Toggle Button
PhoneDialSettingDial Pad Setting Button
Internal properties of the buttons
Property NameTypeDescription
ClassNamesstringButton class name
IconstringButton icon (if using existing icon, name it udesk-cti-iconfont icon-udesk-cti-ic-button-command-to-kebab-case-lowercase, for example, Hangup -> icon-udesk-cti-ic-hang-up)
TextstringButton text
Visiblebool/funcButton visibility (supports boolean value and method call)
Disabledbool/funcButton availability (supports boolean value and method call)
OnClickedfuncButton click event (if this property is configured, internal logic is skipped, and full control is handed over to the passed method)

When visible and disabled are passed as methods, the context properties that can be obtained are:

connectStatestringCurrent call setup connection state
agentStatestringCurrent agent state
agentSubStatestringCurrent agent sub-state
currentAgentStartTimestringTime when the agent switched to the current state
phoneModestringCurrent phone mode
phoneStatestringCurrent phone state
callStatusobjectContext of the ongoing call
callInputNumberstringCurrent value in the dial pad input box

Step 5: SDK renderTo Return Value

Example Code

uiInstance.Call("SetCallInputNumber", "12345678", {
  EnableHideSensitiveInfo: true

The SDK renderTo returns an object, which supports calling internally, providing the following APIs for use

SetCallInputNumbernumber: value
Modify the value of the dial pad input box, the options currently only supports the enableHideSensitiveInfo attribute, controlling whether to hide sensitive information for the written value