设置客户聊天界面

在您开始使用客户聊天界面之前，必须由您的客户经理启用。该聊天客户端只是聊天渠道的一个组成部分。为您的联络中心配置聊天是一个包含多个步骤的过程。

仅当您想要部署自定义聊天体验时才需要执行这些任务。选择要使用 V1 还是 V2 配置文件。二者不需要同时使用。

创建一个聊天配置文件

您可以创建多个聊天配置文件以获得额外的自定义体验，但是，您只需创建一个即可设置客户聊天界面。决定要使用 V1 还是 V2 聊天配置文件，然后按照下面的相关任务进行操作。

创建 V1 聊天配置文件

所需权限：聊天配置文件创建

单击应用程序选择器并选择ACD。
转到联系人设置 > 聊天配置文件。
找到您要修改的聊天配置文件并单击它以将其打开。
单击编辑。
输入配置文件名称。
对于界面，从下拉列表中选择 V1 ASPX。保存配置文件后，您将无法再编辑此字段。

配置配色方案。

了解有关配色方案的更多信息

字段	详细信息
配色方案	正在使用的系统配色方案。您可以按原样使用以下模板之一，或对其进行修改以满足您公司的需要。默认值：灰色与蓝色和白色。配色方案 1：蓝色与白色。配色方案 2：橙色与黄色和白色。配色方案 3：红色与灰色和白色。

配置聊天窗口的样式设置，使用预览区域查看您的更新。

了解有关徽标图像的更多信息

字段	详细信息
徽标图像	您无法向现有聊天配置文件添加徽标。如果您创建了一个无徽标的聊天配置文件，然后又决定要在客户聊天界面中包含一个徽标，则必须创建一个新的聊天配置文件并将其分配给相应的联络点。

配置聊天对话框的设置，使用预览区域查看您的更新。您可以更改坐席和联系人对话框的背景颜色和字体颜色，但只能更改系统消息的字体颜色。系统消息通常由 Quemsg 等 Studio 操作驱动，并显示在没有容器的聊天界面中。
配置聊天状态指示器和消息的设置，使用预览区域查看您的更新。
单击完成。

创建 V2 聊天配置文件

所需权限：聊天配置文件创建

单击应用程序选择器并选择ACD。
转到联系人设置 > 聊天配置文件。
要创建配置文件，请单击新建。
输入配置文件名称。
对于界面，选择 V2 (HTML5)。保存配置文件后，您将无法再编辑此字段。
根据需要配置外观字段，使用预览查看更新。
如果需要，请启用和配置聊天前表单。
1. 选中启用聊天前表单复选框。
2. 根据需要修改欢迎消息。
3. 通过选择添加字段，根据需要配置字段。
使用此表单提交的内容将作为参数传递给路由脚本的开始操作，该参数以条目 P0 开头。
如果需要，请启用并配置“等待队列”窗口。
1. 选中启用等待队列复选框。
2. 输入等待消息。如果与此配置文件关联的 Studio 脚本使用 Quemsg 操作让客户知道他们在队列中的位置，则该消息将与您在此处配置的消息交替出现。
3. 如果需要，请更改文本的背景颜色和色调。
4. 如果需要，请通过选择徽标复选框然后执行以下操作之一来添加徽标：
  - 如果您出于其他目的将徽标上传到 CXone Mpower，请选择选择现有。单击浏览并在选择文件窗口中找到图像。单击图像以选中。单击 OK。
  - 如果要上传新徽标，请选择上传新的。单击选择文件并找到要上传的图像。单击图像以选中。单击打开。
5. 如果需要，请选中主题图像复选框，然后执行以下操作之一来添加更大的图像：
  - 如果您已出于其他目的将图像上传到 CXone Mpower，请选择选择现有。单击浏览并在选择文件窗口中找到图像。单击图像以选中。单击 OK。
  - 如果要上传新图像，请选择上传新的。单击选择文件并找到要上传的图像。单击图像以选中。单击打开。
您应该在将徽标或图像上传到 CXone Mpower 前调整其尺寸。否则，徽标或主题图像将被拉伸以适应指定的最大尺寸。徽标和图像必须为 SVG 或 PNG 文件类型。
如果您正在创建配置文件，请单击保存。

将联络点添加到聊天配置文件

所需权限：聊天配置文件编辑

单击应用程序选择器并选择ACD。
转到联系人设置 > 聊天配置文件。
找到您要分配给联系人的聊天配置文件，然后单击将其打开。
单击联络点选项卡。
在添加联络点表格中，选中与您要为其分配聊天配置文件的联络点对应的复选框。如果要将此配置文件分配给所有联络点，请跳过此步骤。
单击添加联络点。要将聊天配置文件分配给所有活动的聊天联络点，请单击全部添加。

在网页中嵌入和自定义 Live Chat V2 (HTML5)

单击应用程序选择器并选择ACD。
转到联系人设置 > 联络点。
选择现有联络点或创建一个新的联络点。
复制位于页面底部的代码。
将复制的文本粘贴到网页 <body> 部分的末尾。
如果您想替换网站上显示的默认实时聊天图标，请将以下内容添加到您粘贴到网站的脚本中：

查看默认的实时聊天图标
1. 将以下内容添加到脚本中，就在 <script type ="text/javascript"> 行的下方：
```
function showBadge( i) { var divBadge = document.getElementById("divBadge"); if(i>0) { divBadge.innerHTML=i; divBadge.style.display="block"; divBadge.classList.add('badge2'); } else if(i==0 && divBadge) { divBadge.style.display="none";} }
```
2. 将 .badge2 课程添加到您网站的 CSS 中，并根据您的需要设置自定义实时聊天按钮上的徽章效果样式。
3. 将以下突出显示的代码添加到 icPatronChat.init 代码块中：
```
icPatronChat.init( { serverHost:'http://home-b2.incontact.com', bus_no:50, poc:'c7744b03-fe43-437f-a464-aec52e56f683', params:['FirstName','Last Name','first.last@company.com',555-555-5555], customChatButton: true }, showBadge); 
```
  params 是在运行时传递给 Studio 脚本的字符串数组。它最多可以发送 10 个自定义查询参数，包括聊天前表单字段。
4. 在 </script> 标记之后添加带有 HTML 的自定义按钮。该链接必须包含 onclick="icPatronChat.setStateWindowToggle()"。请参阅以下示例：
```
<a class="button2" onclick="icPatronChat.setStateWindowToggle()"> <span>Live Chat</span><div id="divBadge" class="badge2"></div> </a>
```
5. 保存网页并进行测试。根据需要进行更改。
如果要自定义在联系人打开网站时实时聊天窗口的大小和位置，请对粘贴到网站的脚本执行以下操作：

查看默认的实时聊天窗口大小
1. 在 icPatronChat.init 行上方，添加以下代码块：
```
var dimensions = {top:20,left:200,height:50,width:600};
```
2. 在 top 和 left 设置中，将其设置为您希望聊天窗口左上角位于您网站上的浏览器窗口顶部和左侧的像素数。
3. 将 height 和 width 设置为您希望在联系人打开窗口时窗口的高度和宽度的像素数。
4. 在 </script> 标记上方添加以下行。
```
icPatronChat.setDimension(dimensions);
```
5. 保存网页并进行测试。根据需要进行更改。

向网页添加一个客户聊天界面弹出窗口

这些说明适用于 V1 (ASPX) 和 V2 (HTML5) 聊天配置文件。

单击应用程序选择器并选择ACD。
转到联系人设置 > 聊天配置文件。
选择现有联络点或创建一个新的联络点。
复制联络点 URL。

将这些代码行添加到网页的 <body> 部分的末尾。用您的 URL 替换突出显示的文本。

<script type = "text/javascript"> var popupPatronChat = function() { var url = "https://home-c4.incontact.com/inContact/ChatClient/ChatClient.aspx?poc=815f0de7-f189-4f6a-b272-4ffbcf80c0b&&bu=50&P1=First Name&P2=Last Name&P3=first.last@company.com&P4=555-555-5555; window.open(url, 'icPatronChatWin', 'location=no,height=630,menubar=no,status-no,width=410', true); }; </script>

URL 后面的参数是在运行时传递给 Studio 脚本的字符串数组。您最多可以包含 10 个。

设置 客户聊天界面