设置 Customer Chat Interface

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

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

创建一个聊天配置文件

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

创建 V1 聊天配置文件

需要的安全配置文件权限聊天配置文件创建

  1. Click the app selector and select ACD.
  2. 转到联系人设置 > 聊天配置文件
  3. 找到您要修改的聊天配置文件并单击它以将其打开。
  4. 单击编辑
  5. 输入配置文件名称
  6. 对于界面,从下拉列表中选择 V1 ASPX。保存配置文件后,您将无法再编辑此字段。
  7. 配置配色方案
  8. 配置聊天窗口的样式设置,使用预览区域查看您的更新。
  9. 配置聊天对话框的设置,使用预览区域查看您的更新。您可以更改坐席和联系人对话框的背景颜色和字体颜色,但只能更改系统消息的字体颜色。系统消息通常由 QuemsgStudio 操作驱动,并显示在没有容器的聊天界面中。
  10. 配置聊天状态指示器和消息的设置,使用预览区域查看您的更新。
  11. 单击完成

创建 V2 聊天配置文件

需要的安全配置文件权限聊天配置文件创建

  1. Click the app selector and select ACD.
  2. 转到联系人设置 > 聊天配置文件
  3. 要创建配置文件,请单击新建
  4. 输入配置文件名称
  5. 对于界面,选择 V2 (HTML5)。保存配置文件后,您将无法再编辑此字段。
  6. 根据需要配置外观字段,使用预览查看更新。
  7. 如果需要,请启用和配置聊天前表单。
    1. Select the Enable Pre-Chat Form checkbox.
    2. Modify the Welcome Message as needed.
    3. Configure the fields as needed by selecting Add Field.

    Contents submitted using this form are passed to the Begin action of your routing script as parameters starting with the entry P0.

  8. 如果需要,请启用并配置“等待队列”窗口。
    1. Select the Enable Waiting Queue checkbox.
    2. Enter a Waiting Message. 如果与此配置文件关联的 Studio 脚本使用 Quemsg 操作让客户知道他们在队列中的位置,则该消息将与您在此处配置的消息交替出现。
    3. If you want to, change the color of the background and tone of the text.
    4. If you want to, add a logo by selecting the Logo checkbox and then doing one of the following:

      • If you already uploaded the logo to CXone for another purpose, select Select Existing. 单击浏览并在选择文件窗口中找到图像。单击图像以选中。单击 OK
      • If you want to upload a new logo, select Upload New. 单击选择文件并找到要上传的图像。单击图像以选中。单击打开

    5. If you want to, add a larger image by selecting the Hero image checkbox and then doing one of the following:

      • If you already uploaded the image to CXone for another purpose, select Select Existing. 单击浏览并在选择文件窗口中找到图像。单击图像以选中。单击 OK
      • If you want to upload a new image, select Upload New. 单击选择文件并找到要上传的图像。单击图像以选中。Click Open.

    您应该在将徽标或图像上传到 CXone 前调整其尺寸。否则,徽标或主题图像将被拉伸以适应指定的最大尺寸。Logos and images must be SVG or PNG file types.

  9. 如果您正在创建配置文件,请单击保存

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

需要的安全配置文件权限聊天配置文件编辑

  1. Click the app selector and select ACD.
  2. 转到联系人设置 > 聊天配置文件
  3. 找到您要分配给联系人的聊天配置文件,然后单击将其打开。
  4. 单击联络点选项卡。
  5. 添加联络点表格中,选中与您要为其分配聊天配置文件的联络点对应的复选框。如果要将此配置文件分配给所有联络点,请跳过此步骤。
  6. 单击添加联络点。要将聊天配置文件分配给所有活动的聊天联络点,请单击全部添加

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

  1. Click the app selector and select ACD.
  2. 转到联系人设置 > 联络点
  3. 选择现有联络点或创建一个新的联络点。
  4. 复制位于页面底部的代码。
  5. 将复制的文本粘贴到网页 <body> 部分的末尾。
  6. 如果您想替换网站上显示的默认实时聊天图标,请将以下内容添加到您粘贴到网站的脚本中:

    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>实时聊天</span><div id="divBadge" class="badge2"></div> </a>

    5. 保存网页并进行测试。根据需要进行更改。
  7. 如果要自定义在联系人打开网站时实时聊天窗口的大小和位置,请对粘贴到网站的脚本执行以下操作:

    1. 在 icPatronChat.init 行上方,添加以下代码块:

      var 尺寸 = {top:20,left:200,height:50,width:600};

    2. topleft 设置中,将其设置为您希望聊天窗口左上角位于您网站上的浏览器窗口顶部和左侧的像素数。
    3. heightwidth 设置为您希望在联系人打开窗口时窗口的高度和宽度的像素数。
    4. </script> 标记上方添加以下行。

      icPatronChat.setDimension(dimensions);

    5. 保存网页并进行测试。根据需要进行更改。

向网页添加一个 Customer chat interface 弹出窗口

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

  1. Click the app selector and select ACD.
  2. 转到联系人设置 > 聊天配置文件
  3. 选择现有联络点或创建一个新的联络点。
  4. 复制联络点 URL。
  5. 将这些代码行添加到网页的 <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 个。