Click-to-Call

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

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

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（使用 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 Mpower 进行身份验证，则发起呼叫。
SDK 提供了一个选项，用于使用 X-header 将用户数据、网站元数据和路由数据作为 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。它应返回以 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 设置

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

使用对您在上一步中添加的 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() 函数返回部署所需资源（例如会话边界控制器（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-header 作为 SIP 邀请请求的一部分完成的。然后，您可以在用于联络点的Studio脚本中处理数据。
- userData：显示用户相关信息。
- routingData：显示用于路由决策的数据。
这些参数必须作为包含键值对的对象提供。 SDK 使用 JSON.stringify() 将这两个对象转换为字符串，并在SIP邀请请求中将它们作为 X-header 传输：
- X-user-data：包含userData对象。
- X-routing-data：包含routingData对象。
userData 和 routingData 是单独的对象，以便在需要时方便地分离数据。但是，如果您愿意，可以只在其中一个参数中传递所有必需的数据。如果您的 Studio 脚本进行了相应配置，您还可以在单个 X 标头中传输所有数据。

到期X-headers中可以传递的数据大小限制，字符串转换后每个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 action：从 X-header 中读取数据。
- RunApp 作：在接通呼叫时以屏幕弹出一个弹出窗口，其中包含有关联系人的信息，该窗口在发生事件（例如连接到联系人）后显示在坐席屏幕上。的形式将数据显示为Agent。
- Snippet action：解析来自 X-header 的数据，并根据该数据路由呼叫。
要发送 DTMF 音调，请在单击 DTMF 按钮时调用 guiSendDTMF(digit) 函数。
测试您的配置，确保其能够成功发起和路由呼叫。