Click-to-Call

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

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

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

Click-to-Callに関する重要な事実

Click-to-Callはデスクトップブラウザーでサポートされています。現在、モバイルではサポートされていません。
Click-to-Callは現在、次のリージョンでサポートされています。
- カナダ
- ドイツ
- 日本
- UK
- US
Click-to-Call SDK に関する重要な情報は次のとおりです。
- SDKのダウンロード:NICEアカウント担当者にお問い合わせください
- 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 Mpowerによって認証されると、コールが配置されます。
SDK には、X ヘッダーを使用して、ユーザーデータ、Web サイトのメタデータ、ルーティングデータを SIP 招待要求の一部として渡すオプションが用意されています。 Studioスクリプトを設定して、Click-to-Call ポイントオブコンタクト電話番号やEメールアドレスなど、インバウンドコンタクトがインタラクションを開始するために使用するエントリーポイント。に関連付けられた取得を取得し、必要に応じて使用する必要があります。これには、エージェントのスクリーンポップにユーザーデータを表示したり、ルーティングデータを使用してルーティングを決定したりすることが含まれます。

この規定はオプションであり、必要な場合にのみ設定する必要があります。不要な場合は、データを渡さずにmakeCall()機能を設定できます。

データの収集と受け渡しはお客様の責任となります。 SDKは、データを送信するメカニズムのみを提供します。データの生成、検証、管理は行われません。

統合の前提条件

Click-to-Callをサイトに統合する準備をするには、次の手順に従います。

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

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 Mpowerセットアップ

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

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

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

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

SDK統合

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

clicktocall.jsファイルをお客様のWebページに適当に組み込んでください。
clicktocall.jsファイルで、POST APIのAPIエンドポイントURLを設定します。
```
let getJWT1TokenURL = '<YOUR_TOKEN_ENDPOINT_URL>';
```
以下の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>';

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

let callFailedToConnectErrorMessage = 'Call failed to connect. Service not available!';
let uiErrorMessage = {
'Default': 'Error occurred. Please try again!',
'Terminated': 'Call ended successfully!',
'Canceled': 'Call cancelled. Please try again!',
'Failed': callFailedToConnectErrorMessage,
'login failed': callFailedToConnectErrorMessage,
'disconnected': callFailedToConnectErrorMessage,
'logout': callFailedToConnectErrorMessage,
'SIP Failure Code': callFailedToConnectErrorMessage,
'RTP Timeout':  'RTP Timeout': 'The call ended unexpectedly due to network issues. Please ensure your internet is stable and try placing the call again!',
'Token Claims': 'An error occurred during the call attempt. Please retry!'
						}
let contactSupportTeamMessage = "We're sorry, could not connect the call. Please try again later or contact our support team!";

Click-to-Call要求を処理するために最も近いリソースを割り当てる場合は、ロケーションベースのリソースを構成します。これを行うには、clicktocall.js で次の操作を行います。
1. getAvailableLocations() 関数を使用して、セッション Border Controller(SBC)などの必要なリソースがデプロイされている場所のリストを返します。これらの場所は、Click-to-Call要求を処理するための最適なリソースを決定するのに役立ちます。
2. 場所の選択をUIに統合します。これは、以下の2つの方法のいずれかで行うことができます。
  - ユーザーが選択可能なコントロール:連絡先がgetAvailableLocations()機能によって提供されるオプションから最も近い場所を選択できるようにする、ドロップダウンやラジオボタンなどの選択可能な要素を提供します。
  - 自動マッピング:システムがコンタクトの位置を特定できる場合は、getAvailableLocations()関数によって公開される場所の1つにマッピングし、makeCall()関数に渡します。
3. デフォルトの場所を設定します。これを行うには、defaultLocation変数をコンタクトが最も頻繁に電話をかける場所に設定します。デフォルトの場所は、getAvailableLocations()関数によって返される場所のいずれかである必要があります。
```
// Variable to store default location
let defaultLocation = "US";
```
Click-to-CallボタンにmakeCall(contactAddress, [location], [userData], [routingData])メソッドを追加します。 location、userData、およびroutingDataパラメーターはオプションです。

userDataパラメーターとroutingDataパラメーターは、ルーティングの決定に使用したり、Agentで表示したりするために、ユーザーデータとルーティングデータを渡します。これは、Xヘッダーを使用したSIP招待リクエストの一部として行われます。その後、連絡先に使用されるStudioスクリプトでデータを処理できます。
- userData:ユーザー関連情報を表示します。
- routingData:ルーティングの決定に使用されるデータを表示します。
これらのパラメーターは、キーと値のペアを含むオブジェクトとして指定する必要があります。 SDKは、JSON.stringify()を使用して両方のオブジェクトを文字列に変換し、SIP招待リクエストでXヘッダーとして送信します。
- X-user-data:userDataオブジェクトを含みます。
- X-routing-data:routingDataオブジェクトを含みます。
userDataとroutingDataは、必要に応じてデータを分離するために別々のオブジェクトです。ただし、必要に応じて、必要なすべてのデータを 1 つのパラメーターにのみ渡すことができます。また、Studioスクリプトが適切に設定されている場合は、すべてのデータを1つのXヘッダー内で送信することもできます。

Xヘッダーで渡すことができるデータのサイズの制限期限、各userDataおよびroutingDataオブジェクトの文字長は、文字列変換後に1,000文字(1 KB)を超えてはなりません。

特定のユースケースに合わせて設定するには、次の例を参照してください。
- パラメーターを渡さずに:
```
makeCall(contactAddress);
```
- locationのみを渡す:
```
makeCall(contactAddress, "US");
```
- location、userData、routingDataを渡す:
```
makeCall(contactAddress, "US", { name: "Elizabeth Bennet", age: 20 }, { skill: "sales" });
```
- userDataのみを渡す:
```
makeCall(contactAddress, undefined, { name: "John Doe", age: 30 }, undefined);
```
makeCall()メソッドをuserDataまたはroutingDataオブジェクトを使用するように設定した場合は、次のアクションを使用して、StudioスクリプトをClick-to-Call ポイントオブコンタクト電話番号やEメールアドレスなど、インバウンドコンタクトがインタラクションを開始するために使用するエントリーポイント。に関連付けられたXヘッダーデータを処理する必要があります。
- SIPGetHeader action:Xヘッダーからデータを読み取ります。
- RunApp アクション:通話が接続されると、データをスクリーンポップコンタクトへの接続などのイベントの後にエージェントの画面に表示されるコンタクトに関する情報を表示するポップアップウィンドウ。としてAgentで表示します。
- Snippet action:Xヘッダーからデータを解析し、そのデータに基づいてコールをルーティングします。
DTMFトーンを送信するには、DTMFボタンがクリックされたときにguiSendDTMF(digit)関数を呼び出します。
構成をテストして、通話を正常に開始してルーティングできることを確認します。