設定 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. 配置聊天對話框,使用預覽區域以檢視您的更新。在客服專員與聯絡人對話框,您可變更背景及字體顏色;但在系統訊息,您只可變更字體顏色。系統訊息通常由 Studio 的動作驅動,例如 Quemsg ,並以沒有容器的形式,出現於聊天介面。
  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. 點擊瀏覽,並從選擇文件視窗中尋找圖像。點擊以選取圖像。點擊確定
      • 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. 點擊瀏覽,並從選擇文件視窗中尋找圖像。點擊以選取圖像。點擊確定
      • 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. 點擊新增聯絡點。點擊新增所有聯絡點,以指派聊天檔案至所有活躍的聊天聯絡點。

在網頁中嵌入及自訂「在線聊天 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 類至您網頁的階層式樣式表,然後隨您所想,設定自訂在線聊天按鈕的徽章效果。

    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. 您可利用 HTML 新增自訂按鈕,放置該按鈕在 </script> 標記後面。連結須包含 onclick="icPatronChat.setStateWindowToggle()"。看看以下示例:

      <a class="button2" onclick="icPatronChat.setStateWindowToggle()"> <span>在線聊天</span><div id="divBadge" class="badge2"></div> </a>

    5. 儲存頁面並測試。如有需要,請作出修改。
  7. 如您想聯絡人在網頁上開啟在線聊天視窗時,可以自訂視窗的大小及位置,請在剛才貼上的指令碼進行以下動作:

    1. 在 icPatronChat.init 一行的上方,新增以下代碼塊:

      var dimensions = {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. 複製 聯絡點 的網址。
  5. 新增這幾行代碼至網頁 <body> 結尾的部分。以您的網址取代已選取的文字。

    <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>

    網址後面的參數是在運行時,傳遞至 Studio 指令碼的字串陣列。您可最多包括10 項。