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

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

JS Download Link: https://ccps.s4.udesk.cn/ccpaas-phone-sdk/sdk/cti-phone/2.2.0/udesk-phone-bar/index.js
CSS Download Link: https://ccps.s4.udesk.cn/ccpaas-phone-sdk/sdk/cti-phone/2.2.0/udesk-phone-bar/index.css

II. Precautions

Browser Compatibility

The SDK currently supports IE9+(including) and browsers based on its kernel (360/qq/…), as well as other mainstream browsers (chrome/firefox/…).
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

udeskCtiPhoneBarInstance.Destroy();

Vertical SDK (UdeskVerticalPhone)

Initialization

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

Destruction

udeskVerticalPhoneInstance.Destroy();

Successful Embedding as Shown

Image text

Step 3: UISDK Instance Parameters Explanation

Name	Type	Required	Description	Default
LanguageCode	string	No	Language	"ZH-CN"
UdeskCCPaasApi	object	Yes	CCPaaS API SDK instance	Null
MonitorCallCenterEventSource	string	No	Namespace for listening to API events	"udesk-call-center-phone"
Buttons	object	No	Button configuration (explained in detail below)
EnableHideSensitiveInfo	bool	No	Whether to enable hiding sensitive information	false
IsClearNumberInputByCallSuccess	bool	No	Whether to clear the dialing input box after a successful call	true
EnableCallInTimeoutMonitor	bool	No	Whether to enable incoming call timeout reminder	false
CallInTimeoutSecond	bool	No	Incoming call timeout seconds	60
NumberInputReadonly	bool	No	Whether the number input box is read-only	false
PhoneDialVisible	bool	No	Whether to display the dial pad	true
CallLogsVisible	bool	No	Whether to display call logs	true
ManualScreenPop	func	No	Manual screen pop event	null
Log	func	No	Error reminder	null
CallNumberInputPlaceholder	string	No	Placeholder 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 Name	Description
Answer	Answer Button
Hangup	Hangup Button
WrapUpFinish	Wrap-up Button
MakeCall	Call Button
DialMakeCall	Dial Pad Call Button
ManualScreenPop	Manual Screen Pop Button
SendSms	Send Button
AgentStatus	Agent Status Toggle Button
PhoneDialSetting	Dial Pad Setting Button

Internal properties of the buttons

Property Name	Type	Description
ClassNames	string	Button class name
Icon	string	Button 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`)
Text	string	Button text
Visible	bool/func	Button visibility (supports boolean value and method call)
Disabled	bool/func	Button availability (supports boolean value and method call)
OnClicked	func	Button 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:

Name	Type	Description
connectState	string	Current call setup connection state
agentState	string	Current agent state
agentSubState	string	Current agent sub-state
currentAgentStartTime	string	Time when the agent switched to the current state
phoneMode	string	Current phone mode
phoneState	string	Current phone state
callStatus	object	Context of the ongoing call
callInputNumber	string	Current 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

Name	Parameters	Description
SetCallInputNumber	number: value options:	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