本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。
# 將聊天使用者介面新增至 Amazon Connect 託管的網站
若要透過聊天支援您的客戶，您可以將通訊小工具新增至 Amazon Connect 託管的網站。您可以在 Connect Customer 管理網站中設定通訊小工具。您可以自訂字體和顏色，並保護小工具，使其只能從您的網站啟動。完成後，您將有一個簡短的程式碼片段新增到您的網站。
由於 Amazon Connect 會託管小工具，因此可以確保最新版本始終存在於您的網站上。
**提示**
通訊小工具的使用取決於預設 Service Quotas，例如每個訊息所需的字符數。將通訊小工具啟動到生產環境之前，請確定已針對組織的需求設定 Service Quotas。如需詳細資訊，請參閱[Connect Customer 服務配額](amazon-connect-service-limits.md)。
**Topics**
+ [支援的可自訂小工具程式碼片段欄位](supported-snippet-fields.md)
+ [支援的瀏覽器](#chat-widget-supported-browsers)
+ [步驟 1：自訂通訊小工具](#customize-chat-widget)
+ [步驟 2：指定您希望顯示通訊小工具的網站網域](#chat-widget-domains)
+ [步驟 3：確認並複製通訊小工具程式碼和安全密鑰](#confirm-and-copy-chat-widget-script)
+ [收到錯誤訊息？](#chat-widget-error-messages)
+ [自訂小工具啟動行為和按鈕圖示](customize-widget-launch.md)
+ [傳遞客戶顯示名稱](pass-display-name-chat.md)
+ [傳遞聯絡人屬性](pass-contact-attributes-chat.md)
+ [聊天小工具的其他自訂](pass-customization-object.md)
+ [下載聊天小工具的文字記錄](chat-widget-download-transcript.md)
+ [下載並自訂我們的開放原始碼範例](download-chat-example.md)
+ [使用 Amazon Connect API 在您的應用程式中啟動聊天。](integrate-with-startchatcontact-api.md)
+ [在聊天訊息送達時傳送瀏覽器通知給客戶](browser-notifications-chat.md)
+ [程式設計聊天中斷連線](programmatic-chat-disconnect.md)
+ [傳遞自訂屬性以覆寫通訊小工具中的預設值](pass-custom-styles.md)
+ [使用 CSS/JavaScript 將小工具按鈕和框架設為目標](target-widget-button.md)
+ [針對您的通訊小工具的問題進行故障診斷](ts-cw.md)
+ [新增聯絡前或聊天前表單](add-precontact-form.md)
+ [聊天後問卷](enable-post-chat-survey.md)
## 支援的瀏覽器
預先構建的通訊小工具支持以下瀏覽器版本和更高版本：
+ Google Chrome 85.0
+ Safari 13.1
+ Microsoft Edge 版本 85
+ Mozilla Firefox 81.0
通訊小工具支援桌面裝置的瀏覽器通知。如需詳細資訊，請參閱[在聊天訊息送達時傳送瀏覽器通知給客戶](browser-notifications-chat.md)。
## 步驟 1：自訂通訊小工具
在此步驟中，您可以為客戶自訂通訊小工具的體驗。
1. 登入 Connect Customer 管理網站，網址為 https：//{{instance name}}.my.connect.aws/。選擇**自訂通訊小工具**。
1. 在**通訊小工具**頁面上，選擇**新增通訊小工具**，開始自訂新的通訊小工具體驗。若要編輯、刪除或複製現有的通訊小工具，請從**動作**欄下方的選項中進行選擇，如下圖所示。
1. 輸入聊天小工具的**名稱**和**描述**。
**注意**
對於在 Amazon Connect 執行個體中建立的每個通訊小工具，名稱必須是唯一的。
1. 在**通訊選項**區段中，選擇客戶如何與您的小工具互動，然後選擇**儲存並繼續**。
**注意**
只有在未啟用聊天和語音時，您才能啟用任務或電子郵件聯絡前表單。
下圖顯示允許聊天、訊息回條和為客戶建立聊天前表單的選項。若要啟用聊天前表單，您必須先使用連線動作按鈕建立[檢視](view-resources-sg.md)，然後選取 `StartChatContact` 動作。如需聊天前和聯絡前表單的詳細資訊，請參閱 [將 Amazon Connect 小工具新增至您的網站](connect-widget-on-website.md)。
1. 在**建立通訊小工具**頁面上，選擇小工具按鈕樣式，並顯示名稱和樣式。
當您選擇這些選項時，小工具預覽會自動更新，讓您可以了解客戶的體驗。
**按鈕樣式**
1. 輸入十六進位值 ([HTML 顏色代碼](https://htmlcolorcodes.com/))，以選擇按鈕背景的顏色。
1. 選擇**白色**或**黑色**作為圖示顏色。無法自訂圖示顏色。
**小工具標頭**
1. 提供標題訊息和顏色，以及小工具背景顏色的值。
1. **標誌 URL**：從 Amazon S3 儲存貯體或其他線上來源插入標誌橫幅的 URL。
**注意**
如果自訂頁面中的通訊小工具預覽來自 Amazon S3 儲存貯體以外的線上來源，則不會顯示標誌。但是，當自訂通訊小工具實作到您的頁面時，將顯示標誌。
橫幅必須是 .jpg 或 .png 格式。影像可以是 280 像素 (寬度) 乘 60 像素 (高度)。任何大於這些尺寸的影像都會縮放，以符合 280x60 標誌元件空間。
1. 如需如何將標誌橫幅等檔案上傳到 S3 的指示，請參閱 *Amazon Simple Storage Service 使用者指南*中的[上傳物件](https://docs.aws.amazon.com/AmazonS3/latest/userguide/upload-objects.html)。
1. 確認影像權限已正確設定，讓通訊小工具擁有存取影像的許可。如需如何讓 S3 物件可公開存取的詳細資訊，請參閱*設定網站存取許可*主題中的[步驟 2：新增儲存貯體政策](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html#bucket-policy-static-site)。
**聊天視圖**
1. **Typeface**：請使用下拉式清單選擇通訊小工具的文字字型。
1.
+ **系統訊息顯示名稱**：輸入新的顯示名稱以覆寫預設值。預設值是 **SYSTEM\_MESSAGE**。
+ **機器人訊息顯示名稱**：輸入新的顯示名稱以覆寫預設值。預設值是 **BOT**。
+ **文字輸入預留位置**：鍵入新預留位置文字以覆寫預設值。預設值是 **輸入訊息**。
+ **結束聊天按鈕文字**：輸入新文字以取代預設值。預設值是 **結束聊天**。
1. **客服人員聊天泡泡顏色**：輸入十六進位值 ([HTML 色彩代碼](https://htmlcolorcodes.com/))，以選擇客服人員訊息泡泡的顏色。
1. **客戶聊天泡泡顏色**：輸入十六進制值 ([HTML 顏色代碼](https://htmlcolorcodes.com/))，以選擇客戶訊息泡泡的顏色。
1. 選擇**儲存並繼續**。
## 步驟 2：指定您希望顯示通訊小工具的網站網域
1. 輸入您要放置通訊小工具的網站網域。聊天室只會載入您在此步驟中選擇的網站。
選擇 **新增網域**，最多可以新增 50 個網域。
網域允許清單行為：
+ 自動包含子網域。例如，如果您允許 example.com，則也會允許其所有的子網域 (例如 sub.example.com)。
+ 通訊協定 http:// 或 https:// 必須完全符合您的組態。在設定允許的網域時，指定確切的通訊協定。
+ 自動允許所有 URL 路徑。例如，如果允許 example.com，則其下的所有頁面 (例如 example.com/cart 或 example.com/checkout) 都可供存取。您無法允許或封鎖特定子目錄。
**重要**
仔細檢查您的網站 URL 是否有效而且沒有錯誤。請包含以 https://開頭的完整 URL。
我們建議您在生產環境網站和應用程式中使用 https://。
1. 在**為您的通訊小工具新增安全項**下，我們建議您選擇**是**，並與您的網站管理員合作，設定您的網路伺服器針對新的聊天請求發出 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。
1. 選擇**儲存**。
## 步驟 3：確認並複製通訊小工具程式碼和安全密鑰
在此步驟中，您將確認您的選擇，複製通訊小工具的程式碼，並將其嵌入您的網站中。如果您在[步驟 2](#chat-widget-domains) 中選擇使用 JWT，您也可以複製金鑰來建立它們。
### 安全金鑰
使用此 44 個字符的安全金鑰，從您的 Web 伺服器生成 JSON Web 權杖。如果您需要變更這些金鑰，也可以將其更新或輪換。當您執行此操作時，Amazon Connect 會為您提供新的金鑰，並保留先前的金鑰，直到您有機會更換為止。部署新金鑰後，您可以返回 Amazon Connect 並刪除先前的金鑰。
當您的客戶與您網站上的開始通訊圖示進行互動時，聊天小工具會請求您的網路伺服器以獲取 JWT。提供此 JWT 時，小工具會將其納入為最終客戶對 Amazon Connect 聊天請求的一部分。然後，Amazon Connect 使用該密鑰解密權杖。如果成功了，這將確認 JWT 是由您的網路伺服器發出的，而 Amazon Connect 會將聊天請求轉接到您的聯絡中心客服人員。
#### JSON Web 權杖詳細資訊
+ 演算法：**HS256**
+ 宣告：
+ **sub**：{{widgetId}}
將 `widgetId` 取代為您自己的 widgetId。若要尋找您的 widgetId，請參閱範例 [通訊小工具文字記錄](#chat-widget-script)。
+ **iat**：\*發行時間。
+ **exp**：\*有效期限 (最多 10 分鐘)。
+ **segmentAttributes (選用)**：使用屬性對應存放在個別聯絡區段上的一組系統定義的鍵值對。如需詳細資訊，請參閱 [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-SegmentAttributes) API 中的 SegmentAttributes。
+ **屬性 (選用)**：具有字串對字串鍵值對的物件。聯絡屬性必須遵循 [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html#connect-StartChatContact-request-Attributes) API 所設定的限制：
+ **relatedContactId (選用)**：具有有效聯絡人 ID 的字串。relatedContactId 必須遵循 [StartChatContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) API 所設定的限制。
+ **customerId (選用)**：這可以是 Amazon Connect Customer Profiles ID，或外部系統 (例如 CRM) 的自訂識別碼。
\* 如需有關日期格式的資訊，請參閱下列 Internet Engineering Task Force (IETF) 文件：[JSON Web Token (JWT)](https://tools.ietf.org/html/rfc7519)，第 5 頁。
下列程式碼片段顯示的範例為如何使用 Python 語言產生 JWT：
```
import jwt
import datetime
CONNECT_SECRET = "{{your-securely-stored-jwt-secret}}"
WIDGET_ID = "{{widget-id}}"
JWT_EXP_DELTA_SECONDS = 500
payload = {
'sub': WIDGET_ID,
'iat': datetime.datetime.utcnow(),
'exp': datetime.datetime.utcnow() + datetime.timedelta(seconds=JWT_EXP_DELTA_SECONDS),
'customerId': "{{your-customer-id}}",
'relatedContactId':'your-relatedContactId',
'segmentAttributes': {"connect:Subtype": {"ValueString" : "connect:Guide"}}, 'attributes': {"name": "Jane", "memberID": "123456789", "email": "Jane@example.com", "isPremiumUser": "true", "age": "45"} }
header = { 'typ': "JWT", 'alg': 'HS256' }
encoded_token = jwt.encode((payload), CONNECT_SECRET, algorithm="HS256", headers=header) // CONNECT_SECRET is the security key provided by Amazon Connect
```
### 通訊小工具文字記錄
下圖顯示您在希望客戶與客服人員聊天的網站上嵌入的 JavaScript 範例。此指令碼會在您的網站右下角顯示小工具。
當您的網站載入時，客戶會先看到**開始**圖示。當他們選擇此圖示時，通訊小工具將開啟，客戶可以向您的客服人員發送訊息。
若要隨時變更通訊小工具，請選擇**編輯**。
**注意**
儲存的變更會在幾分鐘內更新客戶體驗。在保存之前確認您的小工具組態。
要更改網站上的小工具圖示，您將收到一個新的程式碼片段，以直接更新您的網站。
## 收到錯誤訊息？
如果您發生錯誤訊息，請參閱 [對 Amazon Connect 通訊小工具的問題進行疑難排解](ts-cw.md)。