Click-to-Call

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

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

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

Click-to-Call支援桌面瀏覽器。

Click-to-CallSDK 詳細資訊

SDK 下載：聯絡您的客戶代表
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的驗證，則通話已撥打。

整合的先決條件

為了讓您的開發人員準備好將Click-to-Call整合到您的網站，您必須完成下列工作：

從您的客戶代表獲取用戶端 ID。
與您的客戶代表合作，為Click-to-Call提供特定的電話號碼。
在您自己的伺服器上實作 POST API。此 API 必須產生 JWT 權杖以進行驗證。此功能驗證來電要求是否合法。
了解更多
Click-to-Call認證使用 JWT。您必須以 PKCS#1 格式產生一對大小為 2048 位元的 RSA 非對稱金鑰。第一個是私鑰，其用來產生 JWT 或 JWT1。第二個是公鑰，您必須提供給NICENICE。啟動電話通話時，您必須在請求中包含 JWT1。 CXone使用您提供的公鑰驗證傳入請求中的 JWT1。

您必須使用 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 設定

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

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

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

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

SDK 整合

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

將clicktocall.js檔案加入您認為合適的網頁。
在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 元件至您的網站。請務必賦予每個元件唯一的識別碼。 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>';

將makeCall(contactAddress)方法新增到Click-to-Call按鈕。
若要傳送 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
請務必執行充分的測試，以確保您能成功啟動和路由通話。