Download Link

Download Here

The dist directory contains the compiled and compressed code, which can be directly integrated into your project. If you make modifications to the code, you'll need to compile it first. The compilation method is explained here.

!!!Note: The call component and udesk system can only exist in one place. Logging in at one place will log out the other.

!!!Note: Version 2.0 of the call component has introduced a separate API file usage method, which is similar to the component. The explanation is at the bottom of the document.

Direct Usage

1. Import the content of the dist directory into your project, and copy the fonts directory to your project's static resource directory.

<!--  Import CSS -->
<link rel="stylesheet" type="text/css" href="./css/callcenter-component.css">
<!--  Import JS -->
<script src='./callcenter-component.js'></script>

2. Initialize the component

Before initializing, please obtain the agent_api_token here.

<script>
var callComponent = new UdeskCallcenterComponent({
    container: document.body,    // Component container
    token: 'xxxxxxxx',           // Agent token obtained through login interface (i.e., agent_api_token)
    subDomain: 'demo',           // Subdomain registered in udesk, e.g., if login address is demo.udesk.cn, fill in 'demo' here
    showManualScreenPop:true,    // Whether to enable the 'manual screen pop' function
    onScreenPop: function(conversation){},  // Method triggered by screen pop event
    onHangup: function(conversation){}
});
</script>

Options

Property	Type	Required	Default	Description
container	Document	Yes		Container for the call component
token	String	Yes		Agent token (i.e., agent_api_token) obtained through login interface. Obtain here
subDomain	String	Yes		Subdomain registered in udesk. For example, if the login address is demo.udesk.cn, fill in 'demo' here
showManualScreenPop	String	No	false	Whether to enable the 'manual screen pop' function
onScreenPop(conversation)	function	No		Screen pop event
onRinging(conversation)	function	No		Ringing event, triggered when the phone rings
onTalking(conversation)	function	No		Call event, triggered when the call is answered
onHangup(conversation)	function	No		Hang-up event, triggered when the call is hung up
onWorkStatusChange(status)	function	No		Triggered when the agent's status changes
onWorkWayChange(way)	function	No		Triggered when the agent's online mode changes
onDropCall(result)	function	No		Callback function after clicking the hang-up button in the call component
onInitSuccess()	function	No		Triggered when initialization data is successfully retrieved
onInitFailure()	function	No		Triggered when initialization data retrieval fails
onTokenExpired(callback:(newToken:string)=>void)	function	No		Triggered when the token expires. The parameter is a callback method. Call this callback method to refresh the token
onIvrCallResult(result:{code:number})	function	No		IVR call result, code is 1000 when successful
onResumeAgentResult(result:{code:number})	function	No		Result of resuming agent, code is 1000 when successful

Methods

makeCall(number, options)

Make a call

number string - (Required) Phone number

options object
This parameter is an object and can take the following parameters:

options.biz_id string
This field is specified by you and can be any string. It will be carried with this id when call event is pushed

answer()

Answer the call when ringing.
Only effective when the online status is web phone.

destroy()

Destroy the call component

setWorkStatus(status)

Set the agent's online status: idle, busy, wrap-up, offline, break, etc.

status String - Agent status, can only be idle, busy, wrap-up, offline

setWorkingWay(workingWay)

Set the agent's online mode: IP phone, mobile, web phone

workingWay String - Agent online mode, can only be fixed_voip_online, phone_online, voip_online

setupDefaultNumber(number_id,success_callback,failure_callback)

Set a new relay number

number_id number Relay number id
success_callback function Callback when request succeeds
failure_callback function Callback when request fails

hangup(success_callback, failure_callback)

Hang up the current call. The successCallback parameter indicates whether the request was sent successfully, and the actual hang-up is subject to the onDropCall event.

success_callback function Callback when request succeeds
failure_callback function Callback when request fails

getCallNumbers()

Returns the list of relay numbers: {id: number, number: string, name: string, memo: string}[]

Property	Description
id	Relay number id
number	Phone number
name	Name
memo	Note

getAutomaticCallNumGroup()

Returns the phone group of customers for automatic dialing tasks. This data is only available when the phone rings and it is an automatic dialing task. For example: {ad_task_id:1,customer_id:2,numbers:["18812345678", "18712345678"]}

Note: This field is only populated when the phone rings and it is an automatic dialing task. Otherwise, this field is empty. Details are as follows:

Property	Description
ad_task_id	Task id
customer_id	Customer id
numbers	["18812345678", "18712345678"] # Number/number group

startIvrCalling(ivrNode:{transfer_mode:"agent_hold"|"agent_hangup",id:string})

Start IVR call, parameter is ivrId

holdCallSelect(successCallback:()=>void, failureCallback:()=>void)

Hold the call

recoveryCallSelect(successCallback:()=>void, failureCallback:()=>void)

Recover the call

transferToGroup(groupId:number|string, successCallback:(res)=>void, failureCallback:(res)=>void)

Transfer to a customer service group

successCallback only indicates that the request was successful. Whether the transfer was successful is determined by getting the result in onTransferResult.

transferToExternalPhone(phoneNumber:string, successCallback:(res)=>void,failureCallback:(res)=>void)

Transfer to an external line

successCallback only indicates that the request was successful. Whether the transfer was successful is determined by getting the result in onTransferResult.

start

ConsultingToExternalPhone(phoneNumber:string, successCallback:(res)=>void,failureCallback:(res)=>void) Start consulting an external line

successCallback only indicates that the request was successful. Whether the consultation was successful is determined by getting the result in onConsultResult.

startThreeWayCallingToExternalPhone(phoneNumber: string, successCallback:(res)=>void, failureCallback:(res)=>void)

Start a three-way call with an external line

successCallback only indicates that the request was successful. Whether the three-way call was successful is determined by getting the result in onThreeWayCallingResult.

transferAfterConsult(agentId: string)

Transfer after consulting

agentId: Agent ID

threeWayCallingAfterConsult(agentId: string)

Three-way call after consulting

agentId: Agent ID

transferAfterThreeWayCalling(agentId: string)

Transfer after three-way calling

agentId: Agent ID

setupDefaultNumber(phoneNumberId: string|number, successCallback:(res)=>void, failureCallback:(res)=>void)

Set the main caller number for outgoing calls. The first parameter is the relay number ID

getCallNumbers():Object[]

Get the available relay numbers

Conversation Object

The conversation object passed into the screen pop event contains the following parameters:

Property	Description
call_id	Call ID
conversation_id	Conversation record ID
call_type	Call type, can only be one of the following values: inbound, outbound, inbound (transfer), inbound (three-way), inbound (consult), inbound (intercept), inbound (monitoring), inbound (forced interruption)
customer_phone_number	Customer number
customer_phone_location	Location
queue_name	Source queue
queue_overflow	Overflow queue
queue_status	Queue status
queue_time	Queue duration (seconds)
agent_id	Agent ID
agent_name	Agent name
agent_email	Agent email
ring_time	Ring start time, example: 2017-03-09T14:34:24+08:00
ivr_variables	Variables saved in smart routing, format variable_name:[variable_value1][,variable_name2:[variable_value2]...], example: "x:1,y:2,aa:1,bb:2,cc:,variable2:2"
display_name	Relay number
device_info	Agent online mode
category	Call type: consult (consultation), consult_outline (consultation external line), three_party (three-way), three_party_outline (three-way external line), listening (listening), barge_in (intrusion), whisper (whisper), transfer (transfer), transfer_outline (transfer external line), substitute (interception), transfer_after_consult (transfer after consultation), three_party_after_consult (three-way after consultation), transfer_after_three_party (transfer after three-way), requeue (requeue)
dtmf	dtmf
multi_ring_count	Sequential ringing count
relevant_agent	Related agent

Call API

1. Import call-api.js from the dist directory into your project

<!--  Import JS -->
<script src="./js/call-api.js"></script>

2. Token initialization is required before use

Please obtain the agent_api_token first, as described here.

<script>
window.callAPI.tokenInit(
        '88354be49e4aa632bdbfb8a60bcae04ec157fad4b4fa554daebae3de1d7bc8de9cc80e9f3c39174cb45d3c3ab52fdcfdaf1216ff2dedc11aa13a1b14e89819065a547cf2',
        'linapp',
        function(callback) {
            setTimeout(function() {
                callback('f3ebff04e6cf899cac39da98bcb1ccdd77e9c8ccd94fa70419668c4bb6510b5fe277cb786662b4c6173706fa2915e9184619f42b766f76226f043693cca1dbdf5a2e1d49');
            }, 1000);
        }
    )
</script>

tokenInit Initialization Parameters

Method

tokenInit(token,subDomain,onTokenExpired)

Initialize token and subDomain for the API. Note: token initialization is required before calling the API.

Parameter Description

Property	Type	Required	Description
token	String	Yes	Agent token, as described here
subDomain	String	Yes	Subdomain registered in udesk. For example, if the login address is demo.udesk.cn, fill in 'demo' here
onTokenExpired(result)	function	No	Callback function when token expires

setMonitorWorkStatus(agent_no,workStatus,successCallback,failureCallback)

Switch the online status of another agent, such as idle, busy, offline, break, etc. For custom breaks, please refer to another method.

setMonitorWorkRestingStatus(agent_no,cc_custom_state_id,successCallback,failureCallback)

Switch the status of custom breaks for other agents. For switching between idle, busy, offline, and break, please refer to another method.

setMonitorAgentWorkWay(agent_no, agent_work_way,successCallback,failureCallback)

Switch the device for other agents, such as IP phone, mobile, web phone

monitorAgentListeing(agent_no,successCallback,failureCallback)

Listen to other agents

monitorAgentInterpose(agent_no,successCallback,failureCallback)

Intrude on other agents

monitorAgentSubstitute(agent_no,successCallback,failureCallback)

Intercept other agents

Parameter Description

Property	Type	Required	Description
agent_no	number	Yes	Agent ID
workStatus	String	Yes	Agent status, can only be idle, busy, resting, offline
cc_custom_state_id	number	Yes	ID of the custom break state
agent_work_way	string	Yes	Device status, can only be fixed_voip_online, phone_online, voip_online
successCallback	function	No	Callback function when the request is successful
failureCallback	function	No	Callback function when the request fails

Browser Compatibility

IE	firefox	chrome	safari	opera
10	11	16	6	12.10

How to Compile

1. Install Node.js

Download and install

2. Install Webpack

The project is bundled with webpack, so you need to install webpack first.

npm install -g webpack

3. Install Dependencies

Navigate to the project directory and run the following command:

npm install

4. Compile, Bundle, and Minify

webpack