將聊天使用者介面新增至 Amazon Connect 託管的網站

1. 登入 Amazon Connect 管理網站，網址為 https：//instance name.my.connect.aws/。選擇自訂通訊小工具。

   

2. 在通訊小工具頁面上，選擇新增通訊小工具，開始自訂新的通訊小工具體驗。若要編輯、刪除或複製現有的通訊小工具，請從動作欄下方的選項中進行選擇，如下圖所示。

   

3. 輸入聊天小工具的名稱和描述。

   注意

   對於在 Amazon Connect 執行個體中建立的每個通訊小工具，名稱必須是唯一的。

4. 在通訊選項區段中，選擇客戶如何與您的小工具互動，然後選擇儲存並繼續。下圖顯示允許客戶聊天和訊息收據的選項。

   

5. 在建立通訊小工具頁面上，選擇小工具按鈕樣式，並顯示名稱和樣式。

   當您選擇這些選項時，小工具預覽會自動更新，讓您可以了解客戶的體驗。

   

按鈕樣式

1. 輸入十六進位值 (HTML 顏色代碼)，以選擇按鈕背景的顏色。

2. 選擇白色或黑色作為圖示顏色。無法自訂圖示顏色。

小工具標頭

1. 提供標題訊息和顏色，以及小工具背景顏色的值。

2. 標誌 URL：從 Amazon S3 儲存貯體或其他線上來源插入標誌橫幅的 URL。

   注意

   如果自訂頁面中的通訊小工具預覽來自 Amazon S3 儲存貯體以外的線上來源，則不會顯示標誌。但是，當自訂通訊小工具實作到您的頁面時，將顯示標誌。

   橫幅必須是 .jpg 或 .png 格式。影像可以是 280 像素 (寬度) 乘 60 像素 (高度)。任何大於這些尺寸的影像都會縮放，以符合 280x60 標誌元件空間。

   1. 如需如何將標誌橫幅等檔案上傳到 S3 的指示，請參閱 Amazon Simple Storage Service 使用者指南中的上傳物件。

   2. 確認影像權限已正確設定，讓通訊小工具擁有存取影像的許可。如需如何讓 S3 物件可公開存取的詳細資訊，請參閱設定網站存取許可主題中的步驟 2：新增儲存貯體政策。

聊天視圖

1. Typeface：請使用下拉式清單選擇通訊小工具的文字字型。

2. • 系統訊息顯示名稱：輸入新的顯示名稱以覆寫預設值。預設值是 SYSTEM_MESSAGE。

   • 機器人訊息顯示名稱：輸入新的顯示名稱以覆寫預設值。預設值是 BOT。

   • 文字輸入預留位置：鍵入新預留位置文字以覆寫預設值。預設值是 輸入訊息。

   • 結束聊天按鈕文字：輸入新文字以取代預設值。預設值是 結束聊天。

3. 客服人員聊天泡泡顏色：輸入十六進位值 (HTML 色彩代碼)，以選擇客服人員訊息泡泡的顏色。

4. 客戶聊天泡泡顏色：輸入十六進制值 (HTML 顏色代碼)，以選擇客戶訊息泡泡的顏色。

5. 選擇儲存並繼續。

1. 輸入您要放置通訊小工具的網站網域。聊天室只會載入您在此步驟中選擇的網站。

   選擇 新增網域，最多可以新增 50 個網域。

   

   重要

   • 仔細檢查您的網站 URL 是否有效而且沒有錯誤。請包含以 https://開頭的完整 URL。

   • 我們建議您在生產環境網站和應用程式中使用 https://。

2. 在為您的通訊小工具新增安全項下，我們建議您選擇是，並與您的網站管理員合作，設定您的網路伺服器針對新的聊天請求發出 JSON Web Token (JWT)。這可讓您在啟動新聊天時提供更多控制權，包括確認傳送至 Amazon Connect 的聊天請求是否來自經過驗證的使用者。

   

   選擇 是 會產生下列情況：

   • Amazon Connect 會在下一頁提供 44 個字元的安全金鑰，您可以用來建立 JSON 網路記號 (JWT)。

   • Amazon Connect 會在通訊小工具嵌入指令碼中新增回呼函數，該指令碼會在聊天啟動時檢查 JSON 網路記號 (JWT)。

     您必須在內嵌程式碼片段中實作回呼函數，如下列範例所示。

     amazon_connect('authenticate', function(callback) {
       window.fetch('/token').then(res => {
         res.json().then(data => {
           callback(data.data);
         });
       });
     });

   如果您選擇此選項，則在下一步中，您將獲得在網站上發起的所有聊天請求的安全密鑰。請您的網站管理員設定您的網頁伺服器，使用此安全金鑰發出 JWT。

3. 選擇 Save (儲存)。