本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 在 Amazon Connect 中設定現成的通訊小工具
<a name="config-com-widget1"></a>

使用此選項可建立桌上型電腦和行動裝置的[瀏覽器](connect-supported-browsers.md#browsers-inapp)的通訊小工具。在此程序結束時，Amazon Connect 會產生一個自訂 HTML 程式碼片段，您可以將其複製到網站的原始程式碼中。

1. 使用 Amazon Connect 管理員帳戶或具有**頻道和流程**的使用者帳戶、**通訊小工具 - 在安全性設定檔中建立**許可，登入管理員網站。

1. 在 Amazon Connect左側導覽功能表中，選擇**頻道**、**通訊小工具**。

1. 該精靈會逐步引導您完成接下來的三個步驟。

## 步驟 1：選擇通訊頻道
<a name="widgetdetails"></a>

1. 在**通訊小工具**頁面上，輸入通訊小工具的**名稱**和**描述**。
**注意**  
對於在 Amazon Connect 執行個體中建立的每個通訊小工具，名稱必須是唯一的。

1. 在**通訊選像**區段中，選擇客戶如何與您的小工具互動。下圖顯示允許客戶進行 Web 通話、視訊和螢幕共用的選項。  
![\[為 Web 通話、視訊和螢幕共用設定的通訊小工具頁面。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/comm-widget-page-call.png)

1. 在 **Web 通話**區段中，選擇是否要為您的客戶啟用視訊和螢幕共用體驗。上圖顯示了客戶可以觀看客服視訊、開啟其視訊，以及允許客服和客戶共用其螢幕的選項。如需設定螢幕共用限制的相關資訊，請參閱[啟用螢幕共用的 URL 限制](screen-sharing-url-restriction.md)。

1. 選擇**儲存並繼續**。

## 步驟 2：自訂小工具
<a name="customizewidget"></a>

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

![\[通訊小工具的預覽。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/netra-call-preview.png)


**定義小工具存取按鈕樣式**

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)。

## 步驟 3：為小工具新增您的網域
<a name="widgetdomain"></a>

此步驟讓您可以保護通訊小工具，只能從您的網站啟動。

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

   選擇 **新增網域**，最多可以新增 50 個網域。  
![\[新增網域選項。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/chatwidget-add-domain.png)
**重要**  
仔細檢查您的網站 URL 是否有效而且沒有錯誤。請包含以 https://開頭的完整 URL。
我們建議您在生產環境網站和應用程式中使用 https://。

1. 在**為您的通訊小工具要求新增安全性**下，為了感受最快的設定體驗，請選擇**否-我將略過**。

   我們建議您選擇**是**，以確認使用者是否已驗證。如需詳細資訊，請參閱[在 Amazon Connect 中個人化應用程式內、Web 和視訊通話的客戶體驗](optional-widget-steps.md)。

1. 選擇**儲存並繼續**。

   成功！您的小工具已建立。複製產生的程式碼並將其貼到您希望通訊小工具顯示的網站的每個頁面上。

## 為您的客服啟用應用程式內、Web、視訊通話和螢幕共用
<a name="agent-cx-cw"></a>

若要讓客服可以使用視訊通話和螢幕共用，請將**聯絡人控制台 (CCP)**、**視訊通話 - 存取**許可指派給其安全性設定檔。

 Amazon Connect 客服人員工作區支援應用程式 Amazon Connect 內、Web 和視訊通話，以及螢幕共用。可以使用與電話通話和聊天相同的配置、轉接、分析和客服人員應用程式。若要開始使用，唯一的步驟是啟用客服的安全性設定檔，其許可您進行視訊通話和螢幕共用。

對於自訂客服人員桌面，應用程式 Amazon Connect 內和 Web 呼叫不需要變更。啟用客服的安全性設定檔，其許可您進行視訊通話和螢幕共用，然後遵循以下指南，了解如何將視訊通話整合至客服桌面。

## 用戶端裝置如何啟動應用程式內或網路通話
<a name="diagram-option1"></a>

下圖顯示用戶端裝置 (行動應用程式或瀏覽器) 啟動應用程式內或網路通話的事件順序。

![\[顯示用戶端裝置如何啟動通話的概念圖表。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/netra-gs-diagram-option1.png)


1. (可選) 您可以傳遞在網站中取得的屬性，並使用 JSON Web 記號 (JWT) 進行驗證。

1. 客戶按一下您網站或行動應用程式中的通訊小工具。

1. 通訊小工具 Amazon Connect 會透過傳遞 JWT 中包含的屬性來啟動對 的 Web 呼叫。

1. 聯絡人會到達流程、ㄓ晚接並放置在佇列中。

1. 客服人員接受聯絡案例。

1. (可選) 如果客戶和客服人員已啟用視訊，他們就可以開始視訊。

## 其他資訊
<a name="cw-more-resources"></a>

如需有關應用程式內、網路和視訊通話功能需求的其他資訊，請參閱下列主題：
+ [Amazon Connect 中應用程式、Web 和視訊通話的客服工作站要求](videocalling-networking-requirements.md)
+ [支援應用程式內、網路和視訊通話功能的瀏覽器和行動作業系統](connect-supported-browsers.md#browsers-inapp)