Click-to-Call

Click-to-Call 可使您的联系人与联络中心的坐席、IVR 或机器人交互的人员。只需单击一下即可呼叫人工坐席。通过您网站上的按钮，访问者可以直接致电坐席。这可以帮助您减少或消除：

连接销售或支持团队时的额外步骤。
管理费用，例如服务号码费和移动附加费。

Click-to-Call 通过使用 JavaScript 编写的软件开发工具包 (SDK) 运行。要对其进行设置，您必须与开发者合作在您的网站中实施 SDK。您还必须与可提供特定凭据的客户代表合作。

Click-to-Call 在桌面浏览器上受支持。

Click-to-Call SDK 详细信息

SDK 下载：联系您的客户代表
SDK 语言：JavaScript（使用 AudioCodes WebRTC SDK）
支持的浏览器：Google Chrome、Microsoft Edge 和 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。它应返回以 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 设置

除了将 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> 标签。

使用对您在上一步中添加的 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>';

将 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
请务必执行充分测试，以确保您能够成功发起和路由呼叫。