如何端對端設定您的客服人員自助服務聊天體驗

注意

協調 AI 客服人員需要啟用聊天聯絡人的聊天串流。如果未啟用聊天串流，某些訊息將無法轉譯。請參閱為採用 AI 技術的聊天啟用訊息串流。

什麼是 AI 訊息串流？

AI 訊息串流是一項 Amazon Connect 功能，可在聊天互動期間逐步顯示 AI 客服人員回應。串流不會在向客戶顯示任何內容之前等待 AI 產生完整的回應，而是在產生文字時顯示文字，從而建立更自然的對話體驗。

運作方式

透過標準聊天回應，客戶會在 AI 產生整個回應時等待，然後完整訊息會一次全部顯示。使用 AI 訊息串流時，客戶會看到不斷增加的文字氣泡，隨著 AI 產生的文字逐漸出現，類似於即時觀看某人的類型。

注意

官方文件：如需完整的技術參考，請參閱為採用 AI 技術的聊天啟用訊息串流。

漸進式文字顯示的優點

AI 訊息串流為客戶體驗提供了幾個主要優勢：

縮短感知等待時間 - 客戶看到立即活動，而不是注視載入旋轉器
更自然的對話流程 - 漸進式文字模擬人工輸入，建立更吸引人的互動
提高參與度 - 客戶可以在回應仍在產生時開始讀取回應
履行訊息 - AI 代理器可以在處理期間提供臨時訊息，例如「當我檢閱您的帳戶一會兒」

標準聊天與串流聊天

下表比較標準聊天和串流聊天之間的客戶體驗：

面向	標準聊天	串流聊天
回應顯示	完成訊息一次全部顯示	文字逐漸出現（泡泡增加）
客戶體驗	等待載入指示器的完整回應	查看即時出現的單字
感知的等待時間	較長（等待完全回應）	較短（立即視覺回饋）
對話感覺	交易	自然，例如與人聊天
履行訊息	不適用	AI 可以傳送臨時狀態更新
Lex 逾時處理	受限於 Lex 逾時限制	消除 Lex 逾時限制

啟用狀態

AI 訊息串流可用性取決於 Amazon Connect 執行個體的建立時間和設定方式。

自動啟用新執行個體

在 2025 年 12 月之後建立的 Amazon Connect 執行個體預設會啟用 AI 訊息串流。這些MESSAGE_STREAMING執行個體的執行個體屬性會自動設定為 true ，因此不需要額外的組態。

重要

如果您使用 AWS 帳戶搭配 2025 年 12 月之前建立的 Amazon Connect 執行個體，您可能需要手動啟用 AI 訊息串流。遵循啟用 AI 支援聊天功能訊息串流文件中的指示，檢查執行個體的MESSAGE_STREAMING屬性並視需要啟用它。

Amazon Lex Bot 許可

AI 訊息串流需要 lex:RecognizeMessageAsync許可才能正常運作。此許可允許 Amazon Connect 叫用啟用串流回應的非同步訊息辨識 API。

對於新的 Lex 機器人關聯：當您將新的 Amazon Lex 機器人與 Amazon Connect 執行個體建立關聯時，所需的lex:RecognizeMessageAsync許可會自動包含在機器人的資源型政策中。不需要額外的組態。

重要

如果您有在啟用 AI 訊息串流之前與 Amazon Connect 執行個體相關聯的 Amazon Amazon Lex 機器人，您可能需要更新機器人的資源型政策，以包含 lex:RecognizeMessageAsync許可。

若要更新現有的 Lex 機器人政策：

導覽至 Amazon Lex 主控台
選取您的機器人並前往以資源為基礎的政策
將 lex:RecognizeMessageAsync動作新增至授予 Amazon Connect 存取權的政策陳述式
儲存更新的政策

如需詳細說明，請參閱 AWS 文件中的 Lex 機器人許可一節。

Amazon Connect Communications Widget 是可內嵌的聊天介面，您可以新增至任何網站。在本節中，您將建立並設定小工具來測試 AI 訊息串流。如果您打算使用自己的客戶聊天小工具，可以略過本節。

在 Amazon Connect 主控台中，導覽至您的執行個體
按一下左側導覽選單中的頻道
按一下通訊小工具
您將看到 Communications Widget 管理頁面

注意

什麼是 Communications Widget？ Communications Widget 是 Amazon Connect out-of-the-box聊天解決方案。它提供功能完整的聊天界面，您可以使用簡單的 JavaScript 程式碼片段嵌入網站。小工具可處理建立連線、管理工作階段和顯示訊息的所有複雜性。

按一下新增小工具以建立新的通訊小工具
輸入下列詳細資訊：
- 名稱: AI-Streaming-Demo-Widget
- 描述: Widget for testing AI Message Streaming
在通訊選項下，確保已選取新增聊天
選取自助服務測試流程作為聊天聯絡流程
按一下儲存並繼續前往組態頁面

聯絡流程選擇

請確定您選取的聯絡流程如下：

已設定基本設定（建立 AI 工作階段、記錄等）
搭配 AI Agent 整合的 Lex 機器人路由
有適當的中斷連線錯誤處理

如果您尚未建立聯絡流程，請先完成建立流程一節。

自訂聊天小工具的外觀和風格，以符合您的品牌，然後選取儲存並繼續。

步驟 4：設定允許的網域

Communications Widget 只會載入明確允許的網站。此安全功能可防止未經授權使用您的小工具。

向下捲動至允許的網域
按一下新增網域並新增下列網域進行 localhost 測試：
- http://localhost
選取安全性下的否
如果您計劃稍後部署到生產網站，也請新增這些網域，並確保您設定安全性（例如 https://www.example.com)

按一下儲存並繼續儲存您的小工具組態
建立之後，您會看到包含內嵌程式碼的小工具詳細資訊頁面
重要：從內嵌程式碼片段複製並儲存下列值：
- 用戶端 URI - 小工具 JavaScript 檔案的 URL
- Widget ID - 小工具的唯一識別符
- 程式碼片段 ID - Base64-encoded組態字串

步驟 6：設定本機測試環境

若要在本機測試小工具，您將建立載入通訊小工具的簡單 HTML 檔案。

在電腦上建立新資料夾進行測試（例如 ai-streaming-test)
下載示範頁面的背景映像，並將其儲存為測試資料夾中background.jpg的。
使用下列內容在index.html測試資料夾中建立名為的新檔案：


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        body {
            background-image: url("background.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
    <title>AI Message Streaming Demo</title>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript">
      (function(w, d, x, id){
        s=d.createElement('script');
        s.src='REPLACE_WITH_CLIENT_URI';
        s.async=1;
        s.id=id;
        d.getElementsByTagName('head')[0].appendChild(s);
        w[x] = w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
      })(window, document, 'amazon_connect', 'REPLACE_WITH_WIDGET_ID');
      amazon_connect('styles', {
        iconType: 'CHAT',
        openChat: { color: '#ffffff', backgroundColor: '#ff9200' },
        closeChat: { color: '#ffffff', backgroundColor: '#ff9200'}
      });
      amazon_connect('snippetId', 'REPLACE_WITH_SNIPPET_ID');
      amazon_connect('supportedMessagingContentTypes', [
        'text/plain',
        'text/markdown',
        'application/vnd.amazonaws.connect.message.interactive',
        'application/vnd.amazonaws.connect.message.interactive.response'
      ]);
      amazon_connect('customStyles', {
        global: { frameWidth: '500px', frameHeight: '900px'}
      });
    </script>
</body>
</html>

步驟 7：取代預留位置值

將 HTML 檔案中的預留位置值取代為您實際的小工具值：

預留位置	將取代為	範例
`REPLACE_WITH_CLIENT_URI`	步驟 5 中的用戶端 URI	`https://d2s9x5slqf05.cloudfront.net/amazon-connect-chat-interface-client.js`
`REPLACE_WITH_WIDGET_ID`	步驟 5 中的小工具 ID	`amazon_connect_widget_abc123`
`REPLACE_WITH_SNIPPET_ID`	步驟 5 中的程式碼片段 ID	`QVFJREFIaWJYbG...` （長 Base64 字串）

步驟 8：啟動本機 Web 伺服器

若要測試小工具，您需要從本機 Web 伺服器提供 HTML 檔案。以下是幾個選項：

選項 A：Python （如果已安裝）


python -m http.server 8001

選項 B：Node.js （如果已安裝）


npx http-server -p 8001

選項 C：VS Code Live Server Extension

在 VS 程式碼中安裝「即時伺服器」延伸模組
按一下滑鼠右鍵index.html，然後選取「使用即時伺服器開啟」

啟動伺服器後，開啟您的瀏覽器並導覽至： http://localhost:8001

您應該會在右下角看到顯示頁面，其中包含橘色聊天按鈕。

測試串流體驗

現在您的小工具已載入，是時候測試 AI 訊息串流並觀察執行中的漸進式文字顯示了。

要注意的內容：串流與非串流

了解串流和非串流回應之間的差異，可協助您驗證 AI 訊息串流是否正常運作：

Behavior (行為)	非串流（標準）	串流 (AI 訊息串流）
初始顯示	載入指標或輸入點	文字會立即開始顯示
文字外觀	完成訊息一次全部顯示	文字逐漸出現（泡泡增加）
回應時間	等待 AI 完成產生	在產生回應時查看回應
視覺化效果	"Pop" 的完整文字	流暢、流暢的文字，例如觀看某人類型

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

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

文件慣用形式

使用客服人員自助服務

（舊版）使用生成式 AI 技術的自助服務