將 Connect 小工具新增至您的網站，以接受聊天、任務、電子郵件和網路通話聯絡人

步驟 1：為您的小工具建立聯絡表單步驟 2：自訂您的通訊小工具步驟 3：指定您希望顯示通訊小工具的網站網域步驟 4：確認並複製通訊小工具程式碼和安全性金鑰

本節中的主題說明如何為您的網站建立和自訂通訊小工具。您將建立聯絡表單，判斷透過小工具建立之聯絡人的行為，然後自訂小工具的外觀和功能。

步驟 1：為您的小工具建立聯絡表單

在此步驟中，您將建立並自訂檢視，以判斷透過小工具建立之聯絡人的行為。

登入 Amazon Connect 管理網站，網址為 https://instance name.my.connect.aws/。在路由索引標籤下，選取流程。
在左上角，按一下檢視。
選取建立檢視。
您可以在這裡使用無程式碼建置器為客戶設定聯絡表單。一些重要秘訣：
- 使用表單元件可讓您在建立時將表單輸入連結至您的聯絡人。表單連結可讓您直接從與您的小工具互動的任何人取得輸入，並在聯絡建立期間使用他們包含在表單中的資訊。
- Connect 動作元件是建立聯絡人表單中最重要的元素。此元件應該在沒有表單中任何其他按鈕類型元件的情況下使用。
- 必須有完全一個連線動作元件，才能搭配聯絡表單小工具使用檢視。
- Connect 動作元件的 ConnectActionType 支援三個選項：
  - StartEmailContact
  - StartTaskContact
  - StartChatContact
  電子郵件和任務都可以在聯絡表單中使用。若要為聊天聯絡人建立聊天前表單，請參閱將聊天使用者介面新增至 Amazon Connect 託管的網站。
- 檢視元件有許多樣式選項，可讓您自訂表單以符合您的環境。
將 Connect 動作按鈕新增至表單後，您可以透過將表單建立的聯絡人連結至 Connect 動作按鈕中的選項，來設定這些聯絡人的值。您要連結的元件在檢視中的格式必須與連線動作按鈕相同。

表單連結支援下列元件：
- 表單輸入
- 下拉式清單（關閉多選）
- 日期選擇器
- 文字區域
- 時間選擇器
準備好檢視後，請選取發佈。

在此步驟中，您可以為客戶自訂通訊小工具的體驗。

登入 Amazon Connect 管理網站，網址為 https://instance name.my.connect.aws/。選擇自訂通訊小工具。
在通訊小工具頁面上，選擇新增通訊小工具以開始自訂新的通訊小工具體驗。若要編輯、刪除或複製現有的通訊小工具，請從動作欄下方的選項中進行選擇。
輸入聊天小工具的名稱和描述。

注意
對於在 Amazon Connect 執行個體中建立的每個通訊小工具，名稱必須是唯一的。
在通訊選項區段中，選取新增聯絡表單。
選取您在上一個步驟中設定的檢視。如果檢視中的 Connect 動作元件未設定聯絡流程，您將需要在此處設定聯絡流程。
按一下 Save and Continue (儲存並繼續)。

在建立通訊小工具頁面上，選擇小工具按鈕樣式，並顯示名稱和樣式。當您選擇這些選項時，小工具預覽會自動更新，讓您可以了解客戶的體驗。

注意

預覽不會顯示您已建立的檢視聯絡表單。只會顯示標頭樣式。

顯示類型

您可以在聯絡表單小工具的兩種顯示類型之間進行選擇：

浮動動作按鈕可讓您將小工具釘選為網頁右下角的可互動按鈕
內嵌內嵌可讓您直接將小工具內嵌在網頁中，而不需要按下按鈕即可載入小工具

按鈕樣式

輸入十六進位值 (HTML 顏色代碼)，以選擇按鈕背景的顏色。
選擇白色或黑色作為圖示顏色。無法自訂圖示顏色。

提供標題訊息和顏色，以及小工具背景顏色的值。
標誌 URL：從 Amazon S3 儲存貯體或其他線上來源插入標誌橫幅的 URL。

重要

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

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

如需如何將標誌橫幅等檔案上傳到 S3 的指示，請參閱 Amazon Simple Storage Service 使用者指南中的上傳物件。
確認影像權限已正確設定，讓通訊小工具擁有存取影像的許可。如需如何公開存取 S3 物件的詳細資訊，請參閱設定網站存取許可主題中的步驟 2：新增儲存貯體政策。

輸入您要放置通訊小工具的網站網域。小工具只會載入您在此步驟中選取的網站。

選擇 新增網域，最多可以新增 50 個網域。
重要
- 仔細檢查您的網站 URL 是否有效而且沒有錯誤。請包含以 https://開頭的完整 URL。
- 我們建議您在生產環境網站和應用程式中使用 https://。
在為您的通訊小工具新增安全性下，我們建議您選擇是，並與您的網站管理員合作設定您的 Web 伺服器，為新的聯絡請求發出 JSON Web Token JWTs)。這可讓您在啟動新聯絡人時獲得更多控制，包括驗證傳送至 Amazon Connect 的請求是否來自已驗證的使用者。

選擇是會產生下列情況：
- Amazon Connect 會在下一頁提供 44 個字元的安全金鑰，您可以用來建立 JSON 網路記號 (JWT)。
- Amazon Connect 在通訊小工具內嵌指令碼中新增回呼函數，在啟動聯絡時檢查 JSON Web Token (JWT)。
  
  您必須在內嵌程式碼片段中實作回呼函數，如下列範例所示。
```
amazon_connect('authenticate', function(callback) {
  window.fetch('/token').then(res => {
    res.json().then(data => {
      callback(data.data);
    });
  });
});
```
如果您選擇此選項，在下一個步驟中，您會收到在網站上啟動的所有聯絡請求的安全金鑰。請您的網站管理員設定您的網頁伺服器，使用此安全金鑰發出 JWT。
選擇儲存。

在此步驟中，您將確認您的選擇，複製通訊小工具的程式碼，並將其嵌入您的網站中。如果您選擇在步驟 3 中使用 JWTs，您也可以複製秘密金鑰來建立秘密金鑰。

使用此 44 個字符的安全金鑰，從您的 Web 伺服器生成 JSON Web 權杖。如果您需要變更這些金鑰，也可以將其更新或輪換。當您執行此操作時，Amazon Connect 會為您提供新的金鑰，並保留先前的金鑰，直到您有機會更換為止。部署新金鑰後，您可以返回 Amazon Connect 並刪除先前的金鑰。

當您的客戶與網站上的通訊小工具互動時，小工具會向您的 Web 伺服器請求 JWT。提供此 JWT 時，小工具會將其包含在最終客戶對 Amazon Connect 的聯絡請求中。然後，Amazon Connect 使用該密鑰解密權杖。如果成功，這將確認您的 Web 伺服器發出 JWT，Amazon Connect 會將聯絡請求路由到您的聯絡中心客服人員。

JSON Web 權杖詳細資訊

演算法：HS256
宣告：
- sub：widgetId
  
  將 widgetId 取代為您自己的 widgetId。若要尋找您的 widgetId，請參閱範例通訊小工具文字記錄。
- iat：*發行時間。
- exp：*有效期限 (最多 10 分鐘)。
- segmentAttributes （選用）：一組系統定義的鍵/值對，儲存在使用屬性映射的個別聯絡區段上。如需詳細資訊，請參閱 StartChatContact API 中的 SegmentAttributes。
- 屬性（選用）：具有string-to-string鍵值對的物件。聯絡屬性必須遵循 StartChatContact API 設定的限制。
- relatedContactId （選用）：具有有效聯絡 ID 的字串。relatedContactId 必須遵循 StartChatContact API 設定的限制。
- customerId （選用）：這可以是 Amazon Connect Customer Profiles ID 或外部系統的自訂識別符，例如 CRM。
* 如需有關日期格式的資訊，請參閱下列 Internet Engineering Task Force (IETF) 文件：JSON Web Token (JWT)，第 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 範例。此指令碼會在您的網站右下角顯示小工具。

注意

使用內嵌內嵌樣式時，請在網頁的 <body> 標籤中包含小工具指令碼。

當您的網站載入時，客戶會先看到小工具圖示。當他們選擇此圖示時，通訊小工具會開啟，客戶可以啟動與您的客服人員的聯絡。

若要隨時變更通訊小工具，請選擇編輯。

注意

儲存的變更會在幾分鐘內更新客戶體驗。在保存之前確認您的小工具組態。

要更改網站上的小工具圖示，您將收到一個新的程式碼片段，以直接更新您的網站。

您的瀏覽器已停用或無法使用 Javascript。

您必須啟用 Javascript，才能使用 AWS 文件。請參閱您的瀏覽器說明頁以取得說明。

文件慣用形式

設定 SNS 訊息

啟用 Apple Messages for Business

將 Connect 小工具新增至您的網站，以接受聊天、任務、電子郵件和網路通話聯絡人

目錄

步驟 1：為您的小工具建立聯絡表單

步驟 2：自訂您的通訊小工具

注意

注意

顯示類型

按鈕樣式

小工具標頭

重要

步驟 3：指定您希望顯示通訊小工具的網站網域

重要

步驟 4：確認並複製通訊小工具程式碼和安全性金鑰

安全金鑰

JSON Web 權杖詳細資訊

通訊小工具文字記錄

注意

注意