CCPaaSフロントエンド UI SDKV2.1.0

UI SDKはUIおよびUI設定のみを提供します。このドキュメントでは、発信UI SDKの基本的な使用方法、注意事項、サンプルコードなどを提供します。

一、基本的な使用方法

UI-SDKはAPI-SDKと組み合わせて使用する必要があります。
ダウンロード先からSDKのjsファイルとcssファイルをダウンロードし、埋め込みたいページに導入します。
サンプルコードをコピーし、設定パラメータ情報を修正して、対応するメソッドを呼び出してSDKを使用します。

ダウンロード先：

jsダウンロードリンク: https://ccps.s4.udesk.cn/ccpaas-phone-sdk/sdk/cti-phone/2.2.0/udesk-phone-bar/index.js
cssダウンロードリンク:https://ccps.s4.udesk.cn/ccpaas-phone-sdk/sdk/cti-phone/2.2.0/udesk-phone-bar/index.css

二、注意事項

ブラウザ互換性

SDKは現在、IE9+(含む)のIEブラウザとそのベースのカーネル(360/qq/…)、その他の主要ブラウザ(chrome/firefox/…)をサポートしています。
可能であれば、最適なユーザー体験を得るためにIE10以降のバージョンへのアップグレードを推奨します。

コードサンプル

ステップ一、必要なjs、cssファイルを導入する

<!-- APISDkのjsファイルを導入 -->
<script src="https://ccps.s4.udesk.cn/ccpaas-phone-sdk/sdk/cti-phone/2.1.0/call-center-class.es6.js"></script>
<!-- UISDKのcssファイルを導入 -->
<link rel="stylesheet"  href="https://ccps.s4.udesk.cn/ccpaas-phone-sdk/sdk/cti-phone/2.1.0/udesk-phone-bar.css">
<!-- UISDKのjsファイルを導入 -->
<script src="https://ccps.s4.udesk.cn/ccpaas-phone-sdk/sdk/cti-phone/2.1.0/udesk-phone-bar.es6.js"><script>

ステップ二、 UISDKインスタンスを初期化する(横版と縦版に分かれます。いずれかを選択してください)

横版SDK(UdeskCtiPhoneBar)

インスタンスを初期化

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

インスタンスを破棄

udeskCtiPhoneBarInstance.Destroy();

縦版SDK(UdeskVerticalPhone)

インスタンスを初期化

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

インスタンスを破棄

udeskVerticalPhoneInstance.Destroy();

成功した埋め込みは以下の図の通りです

Image text

三、UISDKインスタンスパラメータ説明

名称	タイプ	必須かどうか	説明	デフォルト値
LanguageCode	string	否	言語	"ZH-CN"
UdeskCCPaasApi	object	是	CC PaaS発信API SDKのインスタンス	Null
MonitorCallCenterEventSource	string	否	APIイベントを監視する名前空間	"udesk-call-center-phone"
Buttons	object	否	ボタン設定、詳細は以下	{}
EnableHideSensitiveInfo	bool	否	機密情報非表示を有効にするか	false
IsClearNumberInputByCallSuccess	bool	否	発信成功後にダイヤル入力欄をクリアするか	true
EnableCallInTimeoutMonitor	bool	否	着信タイムアウト通知を有効にするか	false
CallInTimeoutSecond	bool	否	着信タイムアウト秒数	60
NumberInputReadonly	bool	否	番号入力欄を読み取り専用にするか	false
PhoneDialVisible	bool	否	ダイヤルパッドを表示するか	true
CallLogsVisible	bool	否	通話記録を表示するか	true
ManualScreenPop	func	否	手動スクリーンポップイベント	null
Log	func	否	エラー通知	null
CallNumberInputPlaceholder	string	否	ダイヤル入力欄のプレースホルダー	"入力してください"
### Buttonsサンプルコード（ユーザーは必要に応じてボタンUIをカスタマイズできます。カスタマイズ不要の場合は無視してください）

    //  カスタムButtonsの例
      let Buttons = {
        Hangup: {
            ClassNames: '',
            Icon: "udesk-cti-iconfont icon-udesk-cti-ic-hang-up",
            Text: "切断",
            Visible: true,
            Disabled: false,
            OnClicked: () => { }
        },
        Answer: {
            ClassNames: '',
            Icon: "udesk-cti-iconfont icon-udesk-cti-ic-phone-answer",
            Text: "応答",
            Visible: ({ connectState, agentState, agentSubState, urrentAgentStartTime, phoneMode, phoneState, callStatus, callInputNumber }) => {
                return true;
            },
            Disabled: ({ connectState, agentState, agentSubState, urrentAgentStartTime, phoneMode, phoneState, callStatus, callInputNumber }) => {
                return true;
            }
        }
      }
      // カスタムButtonsの使用 
      let udeskCtiPhoneBarInstance = new UdeskCtiPhoneBar({
            udeskCCPaasApi: UdeskCCPaasApiClassInstance,
            Buttons: Buttons  
        });

buttonsの値渡し

一部のボタンのデフォルトプロパティを上書きするために使用

現在サポートされているボタン

ボタン名	説明
Answer	応答ボタン
Hangup	切断ボタン
WrapUpFinish	後処理時間ボタン
MakeCall	発信ボタン
DialMakeCall	ダイヤルパッド発信ボタン
ManualScreenPop	手動スクリーンポップボタン
SendSms	送信ボタン
AgentStatus	エージェントステータス切替ボタン
PhoneDialSetting	ダイヤルパッド設定ボタン

ボタンの内部プロパティ

プロパティ名	型	説明
ClassNames	string	ボタンのクラス名
Icon	string	ボタンのアイコン既存のアイコンを使用する場合、命名は udesk-cti-iconfont icon-udesk-cti-ic-ボタンコマンドをハイフン区切り小文字に変換例: Hangup ->icon-udesk-cti-ic-hang-up
Text	string	ボタンのテキスト
Visible	bool/func	ボタンの表示/非表示（ブール値とメソッド呼び出しをサポート）
Disabled	bool/func	ボタンの有効/無効（ブール値とメソッド呼び出しをサポート）
OnClicked	func	ボタンクリックイベント（このプロパティを設定すると、内部ロジック処理をスキップし、渡されたメソッドに完全に委ねます）

visibleとdisabledにメソッドを渡す場合、取得可能なコンテキストプロパティ

名前	型	説明
connectState	string	現在のアウトバウンドコンポーネント接続状態
agentState	string	現在のエージェント状態
agentSubState	string	現在のエージェントサブ状態
currentAgentStartTime	string	現在のエージェント状態に切り替わった開始時間
phoneMode	string	現在の電話モード
phoneState	string	現在の電話状態
callStatus	object	アウトバウンド通話中のコンテキスト
callInputNumber	string	現在のダイヤルパッド入力欄の値
## 五、SDK renderToの戻り値

サンプルコード

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

SDK renderToはオブジェクトを返し、そのオブジェクト内でcall方式がサポートされています。内部では以下のAPIを呼び出すことができます

名称	パラメータ	説明
SetCallInputNumber	number: 値 options： { }	ダイヤルパッド入力欄の値を変更します。options内では現在、enableHideSensitiveInfo属性のみサポートされており、書き込まれた値に対して機密情報の隠蔽処理を行うかどうかを制御します

Keys	Action
`?`	Open this help
`n`	Next page
`p`	Previous page
`s`	Search