Click-to-Call

Click-to-Callによりお客様のコンタクトコンタクトセンターでエージェント、IVR、またはボットとやり取りする人。は、ワンクリックでライブエージェントにコールをかけることができます。 Webサイト上のボタンから、訪問者はエージェントに直接コールをかけることができます。これは、以下の要因を削除または排除するのに役立ちます。

営業チームまたはサポートチームに接続する際の余分なステップ。
オーバーヘッドコスト(サービス番号料金やモバイル追加料金など)。

Click-to-Callは、JavaScriptで書かれたソフトウェア開発キット(SDK)を通じて動作します。これを設定するには、開発者と協力してSDKをウェブサイトに実装する必要があります。また、特定の認証情報を提供できるアカウント担当者と協力する必要があります。

Click-to-Callはデスクトップブラウザーでサポートされています。

Click-to-CallSDKの詳細

SDKのダウンロード：お問い合わせアカウント担当者
SDK言語：JavaScript(AudioCodesWebRTCSDKを使用)
対応ブラウザ：GoogleChrome、MicrosoftEdge、およびMozilla Firefox
マイク権限：コンタクトコンタクトセンターでエージェント、IVR、またはボットとやり取りする人。は、ブラウザーにマイクの使用を許可する必要があります。

SDKは、clicktocall.jsファイル1つで構成されています。これは、Click-to-Callボタンを表示したい各Webページに含めるか、参照する必要があります。また、 Click-to-Callボタンやコールコントロールなど、独自のUIコンポーネントを実装する必要があります。 Click-to-Callボタンを押すと、SDKのmakeCall関数が呼び出され、WebRTCの呼び出しが開始されます。コールリクエストがCXoneによって認証されると、コールが配置されます。

統合の前提条件

開発者がClick-to-Callをサイトに統合する準備をするには、以下を完了する必要があります：

アカウント担当者からクライアントIDを取得してください。
アカウント担当者と協力して、Click-to-Callに固有の電話番号をプロビジョニングします。
自分のサーバーにPOST APIを実装します。このAPIは、認証のためにJWTトークンを生成しなければなりません。これにより、着信コールリクエストが正当なものであることが検証されます。
詳細を見る
Click-to-Call認証はJWTを使用します。 PKCS#1 形式で、2048 ビットサイズのRSA非対称キーのペアを生成する必要があります。 1つ目は、JWT(JWT1)を生成するために使用する秘密キーです。もう1つは公開キーで、NICENICEに提供する必要があります。通話を開始する際には、リクエストにJWT1を含める必要があります。 CXoneは、着信リクエストのJWT1を、お客様が提供した公開キーで検証します。

JWT1はPOST APIで生成する必要があります。このAPIは自分のサーバーで実装する必要があります。 SDKは、このAPIがポイントオブコンタクト(PoC) 電話番号やEメールアドレスなど、インバウンドコンタクトがインタラクションを開始するために使用するエントリーポイント。(コンタクトアドレス)とClientIDをリクエストボディで受諾することを期待しています。これは、ContactAddressとClientIdを申請として持つJWTトークンを返すことが推奨されます。

SDKパッケージのIntegrationHelpers/Templatesディレクトリにサンプルコードスニペットがあります。これらは.NETとJavaで書かれています。これらは、認証用の非対称キーの生成方法と、実装する必要があるPOST APIを例示しています。

APIエンドポイントの例：
```
POST /generate-jwt1-token
Content-Type: application/json
{
	"ContactAddress": "<CONTACT_ADDRESS>",
	"ClientId": "<CLIENT_ID>"
}
							
	// API response:
"GENERATED_JWT1_TOKEN"
```
JWT1トークンAPIエンドポイントURLの例：
```
let getJWT1TokenURL = '<YOUR_TOKEN_ENDPOINT_URL>'; //This is where you enter the URL for the POST API you implement.
```
認証のために公開キーをアカウント担当者に提供します。
UIデザインを検討します。ミュートや通話終了などのコールコントロール用のボタンなど、コールのコンタクト側の独自UIを開発する必要があります。 SDKには、開発者が参考やインスピレーションとして使用することができるサンプルのReactとAngularのコンポーネントが含まれます。コールのエージェント側はエージェントアプリケーションで対応されるため、UI開発はコンタクト側のみに必要です。

CXoneセットアップ

WebサイトにClick-to-Call機能を追加するだけでなく、ルーティングコンポーネントがCXoneでセットアップされていることを確認する必要があります。 CXoneの管理者が必要なコンポーネントをセットアップします。

次を持っていることを確認してください：

それに割り当てられた必要なエージェントで作成されたインバウンド音声ACDスキル。
音声コール用にポイントオブコンタクト(POC)がセットアップされています。これらは、各Click-to-Call電話番号用の電話POCでなければなりません。お客様のサイトにClick-to-Callを実装する開発者は、JavaScriptファイル内のcontactAddress用にこれを使用する必要があります。
エージェントにコールをルーティングするStudioスクリプト。

CXone設定に応じて、既存のルーティングコンポーネントを使用することができるかもしれないし、新規コンポーネントを作成してセットアップする必要があるかもしれません。

SDK統合

前提条件のセクションにある必要項目が完了しているか、準備されていることを確認してください。

clicktocall.jsファイルをお客様のWebページに適当に組み込んでください。
clicktocall.jsファイルで、POST APIのAPIエンドポイントURLを設定します。
```
let getJWT1TokenURL = '<YOUR_TOKEN_ENDPOINT_URL>';
```
以下のAPIエンドポイントを使用して、getJWT2TokenURL変数を更新します。 CXoneはこれを使用してJWTを検証します：
```
let getJWT2TokenURL = 'https://api-na1.niceincontact.com/ClickToCall/GetJWT2Token';
```
以下のUIコンポーネントをWebサイトに追加してください。各コンポーネントには必ず一意の識別子を付けてください。 SDKパッケージには、ReactとAngularのサンプルUIコンポーネントが含まれています。これらはIntegrationHelpers/UIComponentsディレクトリにあります。
- 音声コールを開始するボタン。
- コールを切るまたは切断するボタン。
- コール音声のミュート／ミュート解除ボタン。
- DTMF入力用のキーパッドを表示するボタン。
- キーパッドのキーを表示する<div>。
- コールの成功またはエラーのメッセージを表示するラベル。
- 発信音やコール接続音など、特定の音を再生するための<audio>タグ。

前のステップで追加したUIコンポーネントへの参照付きでclicktocall.jsファイルを更新します。

let clickToCallButtonId = '<YOUR_CLICK_TO_CALL_BUTTON_ID>';
let hangUpButtonId = '<YOUR_HANG_UP_BUTTON_ID>';
let muteAudioButtonId = '<YOUR_MUTE_AUDIO_BUTTON_ID>';
let keypadButtonId = '<YOUR_KEYPAD_BUTTON_ID>';
let dtmfKeyDivId = '<YOUR_DTMF_KEY_DIV_ID>';
let callStatusMessageLabelId = '<YOUR_CALL_STATUS_MESSAGE_LABEL_ID>';
let remoteAudioId = '<YOUR_AUDIO_CONTROL_ID>';

Click-to-CallボタンにmakeCall(contactAddress)メソッドを追加します。
DTMFトーンを送信するには、DTMFボタンがクリックされたときにguiSendDTMF(digit)関数を呼び出します。

clicktocall.jsファイルの設定セクションで設定を行います。これは、ある種の動作を制御するいくつかの設定変数を持つセクションです。

retryCountでリトライ回数を設定します。コールが切断された場合、システムが再接続を試みる回数。デフォルトは3です。
POCREnvironmentXHeaderValueの値をPRODに設定します。

phoneServerConfigおよびclientIdで電話サーバーの構成設定を設定します。

let phoneServerConfig = {
	domain: '<Domain of the SIP server>', //Set value of this configuration to 'cxonevoice.com'
	addresses: [], //Keep this array empty
	iceServers: [], //Keep this array empty
	userName: '<username>', //This configuration is a human-readable string used to identify the sender in a more friendly way. In agent applications like CXone Agent, this might be displayed on the screen during a call. Tthis value should not contain any spaces and should not exceed 20 characters. 
	displayName: '', // This is an optional field and its value can be kept the same as userName 
	password: '' //Keep this field empty
}
let clientID = '<YOUR_CLIENT_ID>'; //Set the value of this configuration as provided by CXone

コールの失敗や切断に関するコンタクト側の通知をカスタマイズしたい場合は、 clicktocall.jsで以下の変数のテキスト文字列を変更してください。
- callFailedToConnectErrorMessage
- uiErrorMessage
- contactSupportTeamMessage
コールの開始とルーティングが正常に行えるよう、十分なテストを行ってください。