您已經使用 Amazon Lex 搭建了非常棒的聊天機器人，並使用 Amazon Lex 控制檯進行了測試。現在您可以將它部署在自己的網站上。

雖然您可以建立自己的機器人使用者介面 (UI)，但這似乎非常耗時耗力。您需要處理對不同裝置和瀏覽器的支援、身份驗證、語音記錄等等方面。您想肯定有人已經這樣做過了，如果運氣好的話可以找到可重複使用的解決方案。

Amazon Lex 聊天機器人 UI

我們的示範 Amazon Lex Web UI 被稱為聊天機器人 UI，已經完成了與搭建全功能的 Amazon Lex 聊天機器人網路客戶端有關的絕大部分工作。您可以快速利用這些功能，減少聊天機器人所支援應用程式的價值變現時間。

您可以將其作為全頁面聊天機器人 UI 使用：

或作為聊天機器人外掛嵌入到網站中：

聊天機器人 UI 支援下列功能：

• 支援移動裝置的應答 UI，提供全屏和嵌入式外掛模式
• 完全支援語音和文字，可以無縫切換
• 語音功能包括自動靜音檢測、謄錄、錄音和回放，可以中斷 Amazon Lex 應答回放
• 支援語音和文字的應答卡
• 可以通過程式設計從託管網站與聊天機器人互動
• 多種部署方案

部署和整合方案

聊天機器人 UI 有四種部署和整合方案：

1. 使用 AWS CloudFormation。
2. 使用 AWS Mobile Hub。
3. 使用預先搭建的分配庫。
4. 使用預先封裝的 Vue 元件。

最簡單方便的方式是使用 AWS CloudFormation，下面我們將介紹具體方法。有關所有方案的更多資訊，請參閱 GitHub README。

AWS CloudFormation 部署方案簡介

部署聊天機器人 UI 以檢查效果。

1. 按下 Launch Stack 按鈕：
   
   
2. 接受所有預設引數。
   這將會在您的帳戶中部署演示環境 (us-east-1 AWS 區域) 並安裝 OrderFlowersBot。
3. 在 AWS CloudFormation 啟動堆疊後 (狀態為 CREATE_COMPLETE)，開啟 Outputs 選項卡。選擇 WebAppUrl 或 ParentPageUrl 來試驗聊天機器人 UI：
   

堆疊會部署下列架構。它是完全無伺服器的——根據您的服務使用量收費。

在瞭解聊天機器人的執行原理後，在自己的 Amazon Lex 聊天機器人上嘗試，並整合到自己的網站中。方法如下：

1. 啟動 AWS CloudFormation 堆疊。
   
2. 在 Lex Bot Configuration Parameters 部分，在 BotName 欄位鍵入您的聊天機器人名。
3. 在 Web Application Parameters 部分，填寫各項引數。
   注意：WebAppParentOrigin 引數必須填寫您網站的源地址。
4. 在 AWS CloudFormation 啟動堆疊後 (狀態為 CREATE_COMPLETE)，您將在 Outputs 選項卡的 SnippetUrl 輸出值中看到一個連結：
   
5. 瀏覽此 SnippetUrl 頁面，您將看到與您貼上到應用程式中的程式碼片段相似的程式碼片段：

有關將聊天機器人 UI 整合到網站並進行配置的程式碼示例和更多選項，請參閱 GitHub 上的 Amazon Lex UI 儲存庫。

請告訴我們您的意見

我們希望您能嘗試示範聊天機器人 UI。請在此博末尾的評論部分告訴我們您的意見。

我們還希望聽到您對改進和功能的建議。報告錯誤並在專案 GitHub 儲存庫中提交功能請求。如能將您的增強作為 Pull 請求提交當然更好！

補充閱讀

作者簡介

Oliver Atoa 和 Bob Strahan 是 AWS 專業服務團隊的高階顧問。他們與我們的客戶合作，為各種各樣的專案提供指導，幫助他們加快使用 AWS 實現價值的步伐。