distディレクトリには、すでにコンパイルおよび圧縮されたコードが含まれており、直接あなたのプロジェクトで使用できます。 私のコードを変更した場合は、まずコンパイルする必要があります。コンパイル方法はこちらにあります。
!!!注意：通話コンポーネントとUdeskシステムは、同時に1箇所にしか存在できません。一方でログインすると、もう一方は強制的にログアウトされます。
!!!注意：通話コンポーネント2.0バージョンでは、独立したAPIファイルが新たに追加されました。使用方法はコンポーネントと基本的に同じで、説明はドキュメントの最下部にあります。
直接使用
1、distディレクトリの内容をあなた自身のプロジェクトに導入し、fontsディレクトリをあなたのプロジェクトの静的リソースディレクトリにコピーします。
<!-- cssを導入-->
<link rel="stylesheet" type="text/css" href="./css/callcenter-component.css">
<!-- jsを導入-->
<script src='./callcenter-component.js'></script>
2、コンポーネントを初期化する
まずagent_api_tokenを取得してください。取得方法
<script>
var callComponent = new UdeskCallcenterComponent({
container: document.body, //コンポーネントのコンテナ
token: 'xxxxxxxx', //ログインインターフェースから取得したカスタマーサポートトークン（agent_api_token）
subDomain: 'demo', //Udeskに登録したサブドメイン。例：ログインアドレスがdemo.udesk.cnの場合、ここにはdemoと入力します。
showManualScreenPop:true, //「手動スクリーンポップ」機能を有効にするかどうか
onScreenPop: function(conversation){}, //スクリーンポップイベントをトリガーするメソッド
onHangup: function(conversation){}
});
</script>
オプション
| 属性名 | 型 | 必須 | デフォルト | 説明 |
|---|---|---|---|---|
| container | Document | はい | 通話コンポーネントのコンテナ | |
| token | String | はい | カスタマーサポートトークン（agent_api_token）、取得方法 | |
| subDomain | String | はい | Udeskに登録したサブドメイン。例：ログインアドレスがdemo.udesk.cnの場合、subDomainはdemoです。 | |
| showManualScreenPop | String | いいえ | false | 手動スクリーンポップ機能を有効にするかどうか |
| onScreenPop(conversation) | function | いいえ | スクリーンポップイベント | |
| onRinging(conversation) | function | いいえ | 着信イベント。電話機が着信したときにトリガーされます。 | |
| onTalking(conversation) | function | いいえ | 通話イベント。通話が接続されたときにトリガーされます。 | |
| onHangup(conversation) | function | いいえ | 通話終了イベント。通話が終了したときにトリガーされます。 | |
| onWorkStatusChange(status) | function | いいえ | カスタマーサポートのステータスが変更されたときにトリガーされます。 | |
| onWorkWayChange(way) | function | いいえ | カスタマーサポートのオンライン方式が変更されたときにトリガーされます。 | |
| onDropCall(result) | function | いいえ | 通話コンポーネントの通話終了ボタンをクリックした後のコールバック関数 | |
| onInitSuccess() | function | いいえ | 初期化データの取得が成功したときにトリガーされます。 | |
| onInitFailure() | function | いいえ | 初期化データの取得が失敗したときにトリガーされます。 | |
| onTokenExpired(callback:(newToken:string)=>void) | function | いいえ | トークンが失効したときにトリガーされます。パラメータはコールバックメソッドで、このコールバックメソッドを呼び出してトークンを更新します。 | |
| onIvrCallResult(result:{code:number}) | function | いいえ | IVR転送結果。codeが1000の場合は成功です。 | |
| onResumeAgentResult(result:{code:number}) | function | いいえ | IVRからの復帰結果。codeが1000の場合は成功です。 |
メソッド
makeCall(number, options)
電話を発信します
number string -（必須）電話番号
options object
このパラメータはオブジェクトであり、以下のパラメータを渡すことができますoptions.biz_id string
このフィールドはお客様が指定する任意の文字列です。通話イベントプッシュ時にこのidが付与されます
answer()
着信時に、このインターフェースを呼び出して電話に応答します。
オンライン状態がウェブ電話の場合のみ有効です。
destroy()
通話コンポーネントを破棄します
setWorkStatus(status)
カスタマーサポートのオンライン状態（空き、ビジー、整理中、オフライン、休憩など）を設定します。
status String - カスタマーサポートの状態。idle、busy、resting、offlineのみ指定可能です
setWorkingWay(workingWay)
カスタマーサポートのオンライン方式（IP電話、携帯電話、ウェブ電話）を設定します。
workingWay String - カスタマーサポートのオンライン状態。fixed_voip_online、phone_online、voip_onlineのいずれかのみ指定可能です
setupDefaultNumber(number_id,success_callback,failure_callback)
新しい中継番号を設定します
number_id number 中継番号id
success_callback function リクエスト成功時のコールバック
failure_callback function リクエスト失敗時のコールバック
hangup(success_callback, failure_callback)
現在の通話を切断します。パラメータは成功と失敗のコールバックです。success_callbackはリクエスト送信成功のみを示し、実際の切断成功はonDropCallイベントを基準とします。
success_callback function リクエスト成功時のコールバック
failure_callback function リクエスト失敗時のコールバック
getCallNumbers()
中継番号リストを返します。{id: number, number: string, name: string, memo: string}[]
| 属性名 | 説明 |
|---|---|
| id | 中継番号id |
| number | 電話番号 |
| name | 名称 |
| memo | 備考 |
getAutomaticCallNumGroup()
自動発信タスクの顧客電話グループを返します。着信音が鳴り、かつ自動発信の場合のみ、この顧客のデータを取得できます。例：{ ad_task_id:1,customer_id:2,numbers:["18812345678", "18712345678"]}
注: 着信音が鳴り、かつ自動発信タスクの場合のみデータが保存されます。それ以外の場合、このフィールドは空です。詳細は以下の通りです：
| 属性名 | 説明 |
|---|---|
| ad_task_id | タスクid |
| customer_id | 顧客id |
| numbers | ["18812345678", "18712345678"] # 番号/番号グループ} |
startIvrCalling(ivrNode:{transfer_mode:"agent_hold"|"agent_hangup",id:string})
IVRに転送します。パラメータはivrIdです
holdCallSelect(successCallback:()=>void, failureCallback:()=>void)
通話を保留する
recoveryCallSelect(successCallback:()=>void, failureCallback:()=>void)
通話を再開する
transferToGroup(groupId:number|string, successCallback:(res)=>void, failureCallback:(res)=>void)
サポートグループに転送する
successCallbackはリクエストが成功したことのみを示し、実際の転送成功はonTransferResultで取得する必要があります
transferToExternalPhone(phoneNumber:string, successCallback:(res)=>void,failureCallback:(res)=>void)
外線に転送する
successCallbackはリクエストが成功したことのみを示し、実際の転送成功はonTransferResultで取得する必要があります
startConsultingToExternalPhone(phoneNumber:string, successCallback:(res)=>void,failureCallback:(res)=>void)
外線に相談する
successCallbackはリクエストが成功したことのみを示し、実際の相談成功はonConsultResultで取得する必要があります
startThreeWayCallingToExternalPhone(phoneNumber: string, successCallback:(res)=>void, failureCallback:(res)=>void)
外線で三者通話を行う
successCallbackはリクエストが成功したことのみを示し、実際の三者通話成功はonThreeWayCallingResultで取得する必要があります
transferAfterConsult(agentId: string)
相談後に転送する
agentId: サポート担当者ID
threeWayCallingAfterConsult(agentId: string)
相談後に三者通話を行う
agentId: サポート担当者ID
transferAfterThreeWayCalling(agentId: string)
三者通話後に転送する
agentId: サポート担当者ID
setupDefaultNumber(phoneNumberId: string|number, successCallback:(res)=>void, failureCallback:(res)=>void)
発信時の発信者番号を設定する。最初のパラメータは中継番号IDです
getCallNumbers():Object[]
選択可能な中継番号を取得する
conversationオブジェクト
ポップアップイベントにはconversationオブジェクトが渡され、このオブジェクトには以下のパラメータが含まれています
| 属性名 | 説明 |
|---|---|
| call_id | call_id |
| conversation_id | 通話記録ID |
| call_type | 通話タイプ。以下のいずれかの値のみ可能：着信、発信、着信（転送）、着信（三者通話）、着信（相談）、着信（強制割り込み）、着信（モニタリング）、着信（強制切断） |
| customer_phone_number | 顧客番号 |
| customer_phone_location | 番号の地域 |
| queue_name | 元のキュー |
| queue_overflow | オーバーフローキュー |
| queue_status | キュー状態 |
| queue_time | キュー待機時間（秒） |
| agent_id | サポート担当者ID |
| agent_name | サポート担当者名 |
| agent_email | サポート担当者メールアドレス |
| ring_time | 呼び出し開始時間。例：2017-03-09T14:34:24+08:00 |
| ivr_variables | インテリジェントルーティングで保存された変数。形式：变量名1:[变量值1][,变量名2:[变量值2]...]。例："x:1,y:2,aa:1,bb:2,cc:,变量2:2" |
| display_name | 中継番号 |
| device_info | サポート担当者のオンライン方法 |
| category | 通話タイプ。consult(相談)、consult_outline(外線相談)、three_party(三者通話)、three_party_outline(外線三者通話)、listening(モニタリング)、barge_in(強制割り込み)、whisper(ささやき)、transfer(転送)、transfer_outline(外線転送)、substitute(インターセプト)、transfer_after_consult(相談後転送)、three_party_after_consult(相談後三者通話)、transfer_after_three_party(三者通話後転送)、requeue(キュー再投入) |
| dtmf | dtmf |
| multi_ring_count | 順次呼び出し回数 |
| relevant_agent | 関連するサポート担当者 |
通話API
1、distディレクトリのcall-api.jsをプロジェクトにインポート
<!-- jsを導入-->
<script src="./js/call-api.js"></script>
2、使用前にtokenを初期化する必要があります
まずagent_api_tokenを取得してください。取得方法
<script>
window.callAPI.tokenInit(
'88354be49e4aa632bdbfb8a60bcae04ec157fad4b4fa554daebae3de1d7bc8de9cc80e9f3c39174cb45d3c3ab52fdcfdaf1216ff2dedc11aa13a1b14e89819065a547cf2',
'linapp',
function(callback) {
setTimeout(function() {
callback('f3ebff04e6cf899cac39da98bcb1ccdd77e9c8ccd94fa70419668c4bb6510b5fe277cb786662b4c6173706fa2915e9184619f42b766f76226f043693cca1dbdf5a2e1d49');
}, 1000);
}
)
</script>
tokenInit初期化パラメータ
方法
tokenInit(token,subDomain,onTokenExpired)
APIにtokenとsubDomainを初期化します 注: APIを呼び出す前にtokenを初期化する必要があります
パラメータ説明
| 属性名 | 型 | 必須 | 説明 |
|---|---|---|---|
| token | String | はい | サポートエージェントtoken、 取得方法 |
| subDomain | String | はい | Udeskに登録したサブドメイン、例えばログインアドレスがdemo.udesk.cnの場合、subDomainはdemoです |
| onTokenExpired(result) | function | いいえ | tokenが失効した時のコールバック関数 |
setMonitorWorkStatus(agent_no,workStatus,successCallback,failureCallback)
他のサポートエージェントのオンライン状態を切り替えます 例: 空き 忙しい オフライン 休憩など カスタム休憩は別のメソッドを参照してください
setMonitorWorkRestingStatus(agent_no,cc_custom_state_id,successCallback,failureCallback)
他のサポートエージェントのカスタム休憩状態を切り替えます、空き 忙しい オフライン 休憩などを切り替える必要がある場合は別のメソッドを参照してください
setMonitorAgentWorkWay(agent_no, agent_work_way,successCallback,failureCallback)
他のサポートエージェントのデバイスを切り替えます、例: IP電話 携帯電話 ウェブ電話
monitorAgentListeing(agent_no,successCallback,failureCallback)
他のサポートエージェントに対してリスニング操作を行います
monitorAgentInterpose(agent_no,successCallback,failureCallback)
他のサポートエージェントに対して強制介入操作を行います
monitorAgentSubstitute(agent_no,successCallback,failureCallback)
他のカスタマーサポートをインターセプト操作します
パラメータ説明
| 属性名 | 型 | 必須 | 説明 |
|---|---|---|---|
| agent_no | number | はい | カスタマーサポートID |
| workStatus | String | はい | カスタマーサポートの状態。指定可能な値は以下のみ：idle、busy、resting、offline |
| cc_custom_state_id | number | はい | カスタム休憩状態のID |
| agent_work_way | string | はい | デバイス状態。指定可能な値は以下のみ：fixed_voip_online、phone_online、voip_online |
| successCallback | function | いいえ | リクエスト成功時のコールバック関数 |
| failureCallback | function | いいえ | リクエスト失敗時のコールバック関数 |
ブラウザ対応状況
| IE | firefox | chrome | safari | opera |
|---|---|---|---|---|
| 10 | 11 | 16 | 6 | 12.10 |
ビルド方法
1、nodejsのインストール
2、webpackのインストール
プロジェクトはwebpackでパッケージ化されています。事前にwebpackをインストールする必要があります。
npm install -g webpack
3、依存関係のダウンロード
プロジェクトディレクトリに移動し、以下のコマンドを実行します。
npm install
4、コンパイル、パッケージ化、圧縮
webpack