設定客戶聊天介面

使用客戶聊天介面前，須先由帳戶管理人啟用。此聊天用戶端只是聊天通道的其中一部分。為聯絡中心配置聊天的過程需要經過多個步驟。

但如您想善用自訂聊天體驗，才需要完成這些工作。選擇使用 V1 或 V2 的設定檔。並不需要兩項皆選。

建立聊天設定檔

如您想有特別個人化的體驗，您可以建立多個聊天設定檔；但設定客戶聊天介面只需要建立一個設定檔。考慮您想使用 V1 還是 V2 聊天設定檔，然後按照以下相關的步驟。

建立 V1 聊天設定檔

所需權限：建立聊天設定檔

點擊應用程式選擇器並選擇ACD。
前往聯絡設定 > 聊天設定檔。
尋找您想修改的聊天設定檔，然後點擊設定檔以開啟。
點擊編輯。
輸入設定檔名稱。
於介面，在下拉式選單中選擇 V1 ASPX。一旦儲存檔案，您就不可以再編輯這個欄位。

配置顏色搭配。

進一步了解顏色搭配

欄位	詳細資訊
顏色搭配	在系統使用中的顏色搭配。您可使用原有的範本，或根據您公司的需要做出修改。預設 — 灰色配藍色和白色。顏色搭配 1 — 藍色配白色。顏色搭配 2 — 橙色配黃色和白色。色彩搭配 3 — 紅色配灰色和白色。

配置聊天視窗的風格，使用預覽區域以檢視您的更新。

進一步了解標誌圖像

欄位	詳細資訊
標誌圖像	您並不可以新增標誌到已有的聊天設定檔。如果您建立聊天設定檔時沒有新增標誌，但後來卻決定要在客戶聊天介面新增，您須建立一個新的聊天設定檔，並將其設定檔指派給合適的聯絡點。

配置聊天對話框，使用預覽區域以檢視您的更新。在客服專員與聯絡人對話框，您可變更背景及字體顏色；但在系統訊息，您只可變更字體顏色。系統訊息通常由 Studio 的動作驅動，例如 Quemsg ，並以沒有容器的形式，出現於聊天介面。
配置聊天狀態及訊息，使用預覽區域以檢視您的更新。
點擊完成。

建立 V2 聊天設定檔

所需權限：建立聊天設定檔

點擊應用程式選擇器並選擇ACD。
前往聯絡設定 > 聊天設定檔。
點擊建立新檔案，以建立檔案。
輸入檔案名稱。
於介面，選擇 V2 (HTML5)。一旦儲存設定檔，您就不可以再編輯此欄位。
按需要配置「外觀」欄位，使用預覽以檢視您的更新。
檢視圖像
如有需要，可以啟用並配置聊天前表格。
檢視圖像
1. 選取啟用聊天前表格方框。
2. 按需要修改歡迎訊息。
3. 選取新增欄位以配置欄位。
使用此表單提交的內容會作為參數傳送至路由指令碼的 Begin 動作，以輸入項 P0 開始。
如有需要，您可以啟用並配置「等待佇列」視窗。
檢視圖像
1. 選中啟用等待佇列剔選框。
2. 輸入等待訊息。如果與此檔案相關的 Studio 指令碼使用 Quemsg 動作來讓客戶知道他們在佇列中的位置，該訊息會與您在此配置的訊息交替顯示。
3. 如果您想的話，可以變更背景顏色及文字色調。
4. 如果您想新增標誌的話，選取標誌方框，並完成下列其中一項：
  - 如您因其他理由，已上傳標誌到 CXone，選取選擇已有標誌。點擊瀏覽，並從選擇檔案視窗中尋找圖像。點擊以選取圖像。點擊確定。
  - 如您想上傳新的標誌，選取上傳新標誌。點擊選擇檔案，然後尋找您想上傳的圖像。點擊以選取圖像。點擊開啟。
5. 如果您想新增更大的圖像，選取主題圖像方框，並完成下列其中一項：
  - 如您因其他理由，已上傳圖像到 CXone ，選取選擇已有圖像。點擊瀏覽，並從選擇檔案視窗中尋找圖像。點擊以選取圖像。點擊確定。
  - 如您想上傳新的圖像，選取上傳新圖像。點擊選擇檔案，然後尋找您想上傳的圖像。點擊以選取圖像。點擊開啟。
上傳至 CXone 前，您需要先設定標誌或圖像的大小。否則，標誌或主題圖像會拉至特定最大的尺寸。標誌及圖像必須為 SVG 或 PNG 檔案類型。
如您在建立檔案，點擊儲存。

新增「聯絡點」至「聊天檔案」

所需權限：編輯聊天設定檔

點擊應用程式選擇器並選擇ACD。
前往聯絡設定 > 聊天設定檔。
尋找您想指派給聯絡點的聊天檔案，然後點擊以開啟。
點擊聯絡點標籤。
在新增聯絡點表格，選取相應的聯絡點剔選框，以指派給聯絡點的聊天設定檔。如您想指派聊天設定檔至所有聯絡點，您可跳過此步。
點擊新增聯絡點。點擊新增所有聯絡點，以指派聊天設定檔至所有活躍的聊天聯絡點。

在網頁中嵌入及自訂「在線聊天 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 類至您網頁的階層式樣式表，然後隨您所想，設定自訂在線聊天按鈕的徽章效果。
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>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。
前往聯絡設定 > 聊天設定檔。
選取已有的或建立新的聯絡點。
複製聯絡點的網址。

新增這幾行代碼至網頁 <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 項。

設定 客戶聊天介面