本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。
# 將 Amazon Connect 小工具新增至您的網站，以接受聊天、任務、電子郵件和網路通話聯絡人
本節中的主題說明如何為您的網站建立和自訂通訊小工具。您將建立聯絡表單來決定透過小工具建立的聯絡人有何行為，然後自訂小工具的外觀和功能。
**Topics**
+ [步驟 1：為您的小工具建立聯絡表單](#create-web-form)
+ [步驟 2：自訂您的通訊小工具](#customize-communications-widget)
+ [步驟 3：指定您希望顯示通訊小工具的網站網域](#communications-widget-domains)
+ [步驟 4：確認並複製通訊小工具程式碼和安全性金鑰](#confirm-and-copy-communications-widget-script)
## 步驟 1：為您的小工具建立聯絡表單
在此步驟中，您會建立並自訂檢視，以決定透過小工具建立的聯絡人有何行為。
1. 登入 Connect Customer 管理網站[https://instance name.my.connect.aws/](https://instance name.my.connect.aws/)。在**轉接**索引標籤下，選取**流程**。
1. 在左上方，按一下**檢視**。
1. 選取**建立檢視**。
1. 在此處，您可以使用[無程式碼建置器](no-code-ui-builder.md)為客戶設定聯絡表單。重要秘訣：
+ 使用表單元件，可讓您在聯絡人建立時將表單輸入連結至聯絡人。在聯絡人建立期間，表單連結可讓您直接從與小工具互動的任何人取得輸入，並使用他們在表單中納入的資訊。
+ Connect 動作元件是建立聯絡人的表單中最重要的元素。此元件應在沒有表單中任何其他按鈕類型元件的情況下使用。
+ 只有單一 Connect 動作元件時，才能搭配使用檢視與聯絡表單小工具。
+ Connect 動作元件的 ConnectActionType 支援三個選項：
+ StartEmailContact
+ StartTaskContact
+ StartChatContact
電子郵件和任務都可在聯絡表單中使用。若要為聊天聯絡人建立聊天前表單，請參閱 [將聊天使用者介面新增至 Amazon Connect 託管的網站](add-chat-to-website.md)。
+ 檢視元件有許多樣式選項，可讓您自訂適合自身環境的表單。
1. 將 **Connect 動作按鈕**新增至表單後，您可以將表單建立的聯絡人連結至 [Connect 動作] 按鈕中的選項，藉此設定這些聯絡人的值。您要連結的元件必須位於檢視中與 **Connect 動作按鈕**相同的表單中。
表單連結支援下列元件：
+ 表單輸入
+ 下拉式清單 (關閉複選)
+ 日期選擇器
+ 文字區域
+ 時間挑選器
1. 在檢視準備就緒後，選取**發布**。
## 步驟 2：自訂您的通訊小工具
在此步驟中，您可以為客戶自訂通訊小工具的體驗。
1. 經由 [https://instance name.my.connect.aws/](https://instance name.my.connect.aws/) 登入 Amazon Connect 管理員網站。選擇**自訂通訊小工具**。
1. 在 [通訊小工具] 頁面上，選擇**新增通訊小工具**，開始自訂新的通訊小工具體驗。若要編輯、刪除或複製現有的通訊小工具，請從**動作**欄下方的選項中進行選擇。
1. 輸入聊天小工具的**名稱**和**描述**。
**注意**
對於在 Amazon Connect 執行個體中建立的每個通訊小工具，名稱必須是唯一的。
1. 在**通訊選項**區段中，選取**新增聯絡表單**。
1. 選取您在上一個步驟中設定的檢視。如果檢視中的 Connect 動作元件未設定聯絡流程，您必須在此處加以設定。
1. 按一下 **Save and Continue (儲存並繼續)**。
在**建立通訊小工具**頁面上，選擇小工具按鈕樣式，並顯示名稱和樣式。當您選擇這些選項時，小工具預覽會自動更新，讓您可以了解客戶的體驗。
**注意**
預覽不會顯示您已建立的檢視聯絡表單。只會顯示標頭樣式。
### 顯示類型
聯絡表單小工具有兩種顯示類型可供選擇：
+ *浮動動作按鈕*可讓您將小工具釘選為網頁右下角的可互動按鈕
+ *內嵌*可讓您直接將小工具內嵌在網頁中，無須按下按鈕即可載入
### 按鈕樣式
1. 輸入十六進位值 (HTML 顏色代碼)，以選擇按鈕背景的顏色。
1. 選擇白色或黑色作為圖示顏色。無法自訂圖示顏色。
### 小工具標頭
1. 提供標題訊息和顏色，以及小工具背景顏色的值。
1. *標誌 URL*：從 Amazon S3 儲存貯體或其他線上來源插入標誌橫幅的 URL。
**重要**
如果自訂頁面中的通訊小工具預覽來自 Amazon S3 儲存貯體以外的線上來源，則不會顯示標誌。但是，當自訂通訊小工具實作到您的頁面時，將顯示標誌。
橫幅必須是 .jpg 或 .png 格式。影像可以是 280 像素 (寬度) 乘 60 像素 (高度)。任何大於這些尺寸的影像都會縮放，以符合 280x60 標誌元件空間。
+ 如需如何將標誌橫幅等檔案上傳到 S3 的指示，請參閱 *Amazon Simple Storage Service 使用者指南*中的[上傳物件](#)。
+ 確認影像權限已正確設定，讓通訊小工具擁有存取影像的許可。如需如何讓 S3 物件可公開存取的詳細資訊，請參閱「設定網站存取許可」主題中的[步驟 2：新增儲存貯體政策](#)。
## 步驟 3：指定您希望顯示通訊小工具的網站網域
1. 輸入您要放置通訊小工具的網站網域。此小工具只會載入您在此步驟中選取的網站。
選擇 **新增網域**，最多可以新增 50 個網域。
網域允許清單行為：
+ 自動包含子網域。例如，如果您允許 example.com，則也會允許其所有的子網域 (例如 sub.example.com)。
+ 通訊協定 http:// 或 https:// 必須完全符合您的組態。在設定允許的網域時，指定確切的通訊協定。
+ 自動允許所有 URL 路徑。例如，如果允許 example.com，則其下的所有頁面 (例如 example.com/cart 或 example.com/checkout) 都可供存取。您無法允許或封鎖特定子目錄。
**重要**
仔細檢查您的網站 URL 是否有效而且沒有錯誤。請包含以 https://開頭的完整 URL。
我們建議您在生產環境網站和應用程式中使用 https://。
1. 在**為您的通訊小工具新增安全項**下，建議您選擇**是**，並與您的網站管理員合作設定 Web 伺服器，以針對新的聯絡請求發出 JSON Web 權杖 (JWT)。這可讓您在起始新聯絡時獲得更多控制權，包括確認傳送至 Amazon Connect 的請求是否來自已驗證的使用者。
選擇 **是** 會產生下列情況：
+ Amazon Connect 會在下一頁提供 44 個字元的安全金鑰，您可以用來建立 JSON 網路記號 (JWT)。
+ Amazon Connect 在通訊小工具嵌入指令碼中新增了回呼函數，會在聯絡起始時檢查 JSON Web 權杖 (JWT)。
您必須在內嵌程式碼片段中實作回呼函數，如下列範例所示。
```
amazon_connect('authenticate', function(callback) {
window.fetch('/token').then(res => {
res.json().then(data => {
callback(data.data);
});
});
});
```
如果您選擇此選項，則在下一步中，您將獲得在網站上起始的所有聯絡請求的安全金鑰。請您的網站管理員設定您的網頁伺服器，使用此安全金鑰發出 JWT。
1. 選擇**儲存**。
## 步驟 4：確認並複製通訊小工具程式碼和安全性金鑰
在此步驟中，您將確認您的選擇，複製通訊小工具的程式碼，並將其嵌入您的網站中。如果您選擇在[步驟 3 ](#communications-widget-domains)中使用 JWTs，您也可以複製秘密金鑰來建立秘密金鑰。
### 安全金鑰
使用此 44 個字符的安全金鑰，從您的 Web 伺服器生成 JSON Web 權杖。如果您需要變更這些金鑰，也可以將其更新或輪換。當您執行此操作時，Amazon Connect 會為您提供新的金鑰，並保留先前的金鑰，直到您有機會更換為止。部署新金鑰後，您可以返回 Amazon Connect 並刪除先前的金鑰。
當您的客戶與您網站上的通訊小工具進行互動時，小工具會向您的 Web 伺服器要求 JWT。提供此 JWT 後，小工具會將其納入為最終客戶對 Amazon Connect 聯絡請求的一部分。然後，Amazon Connect 使用該密鑰解密權杖。如果成功，這將確認 JWT 是由您的 Web 伺服器發出的，而 Amazon Connect 會將聯絡請求路由至您的聯絡中心客服人員。
#### JSON Web 權杖詳細資訊
+ 演算法：**HS256**
+ 宣告：
+ **sub**：{{widgetId}}
將 `widgetId` 取代為您自己的 widgetId。若要尋找您的 widgetId，請參閱範例 [通訊小工具文字記錄](#communications-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 範例。此指令碼會在您的網站右下角顯示小工具。
**注意**
使用內嵌樣式時，請在需要轉譯小工具的 HTML 元素中包含小工具指令碼。
當您的網站載入時，客戶會先看到小工具圖示。當他們選擇此圖示時，通訊小工具即會開啟，客戶可以開始與您的客服人員聯絡。
若要隨時變更通訊小工具，請選擇**編輯**。
**注意**
儲存的變更會在幾分鐘內更新客戶體驗。在保存之前確認您的小工具組態。
要更改網站上的小工具圖示，您將收到一個新的程式碼片段，以直接更新您的網站。