Click-to-Call

Click-to-Call讓您的聯絡人在聯絡中心與客服專員、IVR 或機器人互動的人。只需點擊即可呼叫真人客服代表。訪客可透過您網站上的按鈕，直接撥打電話給客服專員。這可以幫助您減少或消除：

連接銷售或支援團隊的額外步驟。
管理費用，例如服務號碼費和行動裝置附加費。

Click-to-Call透過以JavaScript撰寫的軟體開發套件 (SDK) 運作。若要設定，您必須與開發人員合作，在您的網站上實作 SDK。您還必須與可以提供特定憑證的客戶代表合作。

有關 Click-to-Call 的重要資訊

Click-to-Call支援桌面瀏覽器。目前不支援行動裝置。
以下區域目前支援Click-to-Call：
- 加拿大
- 德國
- 日本
- 英國
- 美國
有關 Click-to-Call SDK 的關鍵資訊包括：
- SDK 下載：聯絡您的NICE客戶代表
- SDK 語言：JavaScript（使用 AudioCodesWebRTCSDK）
- 支援瀏覽器：GoogleChrome、MicrosoftEdge 和Mozilla Firefox。
- 麥克風權限：聯絡人在聯絡中心與客服專員、IVR 或機器人互動的人。必須允許其瀏覽器使用其麥克風。
SDK 由一個clicktocall.js檔案組成。在您希望顯示Click-to-Call按鈕的每個網頁上，都必須包含或引用此項。您也必須實作自己的 UI 元件，如Click-to-Call按鈕和呼叫控制。 Click-to-Call按鈕必須叫用 SDK 中的makeCall功能，這啟動WebRTC呼叫。如果通話請求通過CXone Mpower的驗證，則通話已撥打。
SDK 提供了一個選項，用於使用 X 標頭將使用者資料、網站元數據和路由資料作為SIP邀請請求的一部分傳遞。您必須配置與Studio Click-to-Call聯絡點關聯的腳本呼入聯絡人用來發起互動的入口點，如電話號碼或電郵地址。以獲取並根據需要使用它。這可能包括在螢幕彈出視窗中為客服專員顯示用戶數據，或使用路由數據做出路由決策。

此規定是可選的，應僅在需要時進行設置。如果不需要，可以在不傳遞任何數據的情況下設置 makeCall() 函數。

收集和傳遞數據是您的責任。 SDK 僅提供傳輸數據的機制。它不會生成、驗證或管理數據。

整合的先決條件

要準備將Click-to-Call整合到您的網站中，請完成以下操作：

從您的NICE 客戶代表獲取用戶端 ID。
與NICE 客戶代表合作，預配特定於Click-to-Call的電話號碼。
在您自己的伺服器上實作 POST API。此 API 必須產生 JWT 權杖以進行驗證。此功能驗證來電要求是否合法。
了解更多
Click-to-Call認證使用 JWT。必須以 PKCS#1 格式生成一對大小為 2,048 位的 RSA 非對稱密鑰。第一個是用於生成 JWT 或 JWT1 的私鑰。必須使用 RS256 演算法對 JWT 進行簽名。第二個是公鑰，您必須將其提供給NICE。啟動電話通話時，您必須在請求中包含 JWT1。 CXone Mpower使用您提供的公鑰驗證傳入請求中的 JWT1。確保 JWT1 令牌的到期時間不超過 20 秒。

您必須使用 POST API 來產生 JWT1。您必須在自己的伺服器上實作此 API。 SDK 期望此 API 在請求正文中接受聯絡點呼入聯絡人用來發起互動的入口點，如電話號碼或電郵地址。（聯絡地址）和 ClientID。它應該會傳回 JWT 權杖，並將ContactAddress和ClientId視為聲明。

您可以在 SDK 套件的IntegrationHelpers/Templates目錄中找到範例 snippet。這些都是用 .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 設計。您必須為通話的聯絡人端開發自己的使用者介面，包括通話控制按鈕，例如靜音或結束通話。 SDK 包含 React 和 Angular 元件範例，您的開發人員可以使用這些範例作為參考和啟發。呼叫的客服專員端在他們的客服專員應用程式中處理，因此 UI 開發只需要用於聯絡端。

CXone Mpower 設定

除了新增Click-to-Call功能到您的網站上，您也必須確保在CXone Mpower中設定了您的路由元件。您的CXone Mpower管理員可以設定必要的元件。

請確定您已擁有如下元件：

已建立傳入語音ACD技能，並且已向此技能指派了必要的客服專員。
為語音呼叫設定了聯絡點(POC)。這些必須是每個Click-to-Call電話號碼的電話 POC。在您的網站上實作Click-to-Call的開發者必須為JavaScript檔案contactAddress使用此項。
將呼叫路由至客服專員的Studio指令碼。

取決於您的CXone Mpower設定，您可能可以使用現有的路由元件，也可能需要建立並設定新元件。

SDK 整合

請確定您已完成或準備了先決條件部分的必要項目。

將clicktocall.js檔案加入您認為合適的網頁。
在clicktocall.js檔案中，設定 POST API 的 API 端點 URL。
```
let getJWT1TokenURL = '<YOUR_TOKEN_ENDPOINT_URL>';
```
新增下列 UI 元件至您的網站。請務必賦予每個元件唯一的識別碼。 SDK 套件包含 React 和 Angular 的 UI 元件範例。您可在 IntegrationHelpers/UIComponents 目錄中找到此內容。
- 開始語音通話的按鈕。
- 掛斷或中斷通話的按鈕。
- 通話音訊靜音和取消靜音的按鈕。
- 顯示 DTMF 輸入鍵盤的按鈕。
- 用於顯示鍵盤按鍵的<div>。
- 顯示呼叫成功或錯誤訊息的標籤。
- <audio>標記來播放某些聲音，例如撥號音或通話連接聲音。

更新clicktocall.js檔案，並引用您在上一步中新增的 UI 元件。

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() 函數返回部署了所需資源（如會話邊界控制器（SBC））的位置清單。這些位置有助於確定處理Click-to-Call請求的最佳資源。
2. 將位置選擇整合到UI中。您可以透過以下兩種方式之一來執行此操作：
  - 用戶可選擇的控件：提供可選元素，如下拉式清單或單選按鈕，允許聯絡人從getAvailableLocations()功能提供的選項中選擇最近的位置。
  - 自動映射：如果系統可以確定聯繫人的位置，則將其映射到getAvailableLocations()功能公開的位置之一，並將其傳遞給makeCall()功能。
3. 配置預設位置。為此，請將 defaultLocation 變數設置為您的聯絡人最常呼叫的位置。預設位置必須是 getAvailableLocations() 函數返回的位置之一。
```
// Variable to store default location
let defaultLocation = "US";
```
將makeCall(contactAddress, [location], [userData], [routingData])方法新增到Click-to-Call按鈕。 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是單獨的物件，以便在需要時方便分離數據。但是，如果您願意，可以只在其中一個參數中傳遞所有必需的數據。如果對 Studio 指令碼進行了相應配置，您還可以傳輸單個 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聯絡點關聯的腳本中的 X 標頭資料呼入聯絡人用來發起互動的入口點，如電話號碼或電郵地址。：
- SIPGetHeader 操作：從 X 標頭讀取資料。
- RunApp 動作：當呼叫接通時，以螢幕彈出一個彈出視窗，其中包含有關聯絡人的資訊，在發生事件（例如連接到聯絡人）後出現在客服專員的螢幕上。的形式Agent顯示資料。
- Snippet action：解析 X 標頭中的數據，並根據該數據路由呼叫。
若要傳送 DTMF 鈴聲，請在按下 DTMF 按鈕時呼叫guiSendDTMF(digit)功能。
測試您的配置，確保它可以成功發起和路由呼叫。