將生成式人工智慧體驗嵌入您的網站或網頁應用程式，使用 Amazon Q

生成式人工智慧（Generative AI）為您作為軟體提供者和最終用戶帶來許多好處。人工智慧助手可以幫助使用者生成見解、獲得幫助，並找到可能難以用傳統方式獲得的信息。此外，它們還可以幫助您的員工減少重複性任務，專注於更有價值的工作。然而，將生成式人工智慧助手添加到您的網站或網路應用程式需要相當的領域知識和技術專業知識，以構建、部署和維護基礎設施和最終用戶體驗。這些挑戰超出了某些軟體提供者的核心領域，造成了向用戶提供人工智慧助手的障礙。

Amazon Q Business 是一個生成式人工智慧助手，可以回答問題、提供摘要、生成內容，並根據您企業系統中的數據和信息安全地完成任務。Amazon Q Business 安全地將不同的數據整合在一起，並提供超過 40 個內建連接器，連接到流行的企業應用程式、文件庫、聊天應用程式和知識管理系統。您可以使用自然語言請求信息或協助生成內容。Amazon Q Business 處理部署和維護生成式人工智慧助手所需的基礎設施的複雜性，讓您可以專注於創造愉快的最終用戶體驗。

Amazon Q 嵌入（Amazon Q embedded）是一個功能，讓您可以在您的網站或應用程式中嵌入一個托管的 Amazon Q Business 助手，創造更個性化的體驗，提升最終用戶的生產力。您可以配置助手的安全措施，以定義您環境的全局和主題級別控制。使用嵌入的 Amazon Q Business 助手，最終用戶可以從您的數據來源獲得即時的、考慮權限的回應，並附上引用。

在這篇文章中，我們將演示如何使用 Amazon Q 嵌入功能，通過基本的 HTML 或 React 將 Amazon Q Business 助手添加到您的網站或網路應用程式。我們還將展示如何在內容管理系統（如 WordPress 和 Drupal）中使用此功能。這篇文章包括一個 Amazon Q Business 的示範網頁，讓您可以快速測試和演示您的人工智慧助手。這樣您可以在完善 Amazon Q Business 配置的同時，並行開發您網站或應用程式的變更。

解決方案概述

嵌入 Amazon Q Business 使您的用戶可以在不離開您的網站或網路應用程式的情況下訪問生成式人工智慧助手。整合助手的過程包括創建 Amazon Q Business 應用程式、添加用戶或群組、連接相關數據來源、允許您的域名，最後將 HTML 內聯框架（iframe）元素添加到您的網站或網路應用程式中。

前置條件

在本節中，我們將介紹如何設置 Amazon Q Business 應用程式、權限和用戶訪問。

Amazon Q Business 應用程式

Amazon Q 嵌入功能需要一個 Amazon Q Business 應用程式。如果您沒有現有的應用程式，可以創建一個與 AWS IAM 身份中心（AWS IAM Identity Center）或 AWS 身份與訪問管理（AWS Identity and Access Management, IAM）身份聯邦集成的應用程式。如果您需要創建新應用程式，請參考使用 AWS IAM 身份中心配置 Amazon Q Business 應用程式或通過 IAM 創建使用身份聯邦的 Amazon Q Business 應用程式。

權限

配置 Amazon Q 嵌入功能的 IAM 權限，以便您可以使用和管理 Amazon Q Business。您的權限政策必須至少允許 Amazon Q Business 的 CreateWebExperience 和 UpdateWebExperience 操作：

“Action”: “qbusiness:CreateWebExperience”,
“Action”: “qbusiness:UpdateWebExperience”,

在創建 IAM 權限政策時，IAM 視覺政策創建器是一個很好的工具，可以查看可用的選項。使用最小特權訪問的方法，您可以限制權限授予的資源到特定的 AWS 區域、帳戶 ID、應用程式 ID 和網頁體驗 ID。

“Resource”: “arn:aws:qbusiness:us-east-1:123456789012:application/<replace-with-id>”
“Resource”: “arn:aws:qbusiness:us-east-1:123456789012:application/<replace-with-id>/web-experience/<replace-with-id>”

您可以在 Amazon Q Business 控制台的應用程式設置中找到您的應用程式 ID，或從 AWS 命令行介面（AWS CLI）中的 list-applications 命令中找到。您可以使用 list-web-experiences AWS CLI 命令找到您的網頁體驗 ID。例如：

aws qbusiness list-applications
aws qbusiness list-web-experiences –application-id a1b2c3d4-5678-90ab-cdef-EXAMPLE11111

用戶訪問

Amazon Q Business 需要身份驗證，才能讓用戶與助手互動。如果您使用 AWS IAM 身份中心，您可以通過將用戶或群組添加到您的 Amazon Q Business 應用程式來授予用戶訪問助手的權限。如果您使用 IAM 身份聯邦，Amazon Q Business 會自動訂閱用戶到您在創建應用程式時選擇的訂閱類型。欲了解更多有關管理用戶的信息，請參考管理 IAM 身份中心集成應用程式的用戶訂閱，或查看更新和取消使用 IAM 聯邦的應用程式的用戶訂閱。

允許您的網站或網路應用程式

要在您的網站或網路應用程式中嵌入 Amazon Q Business，您必須首先允許您的域名。這樣可以將您的助手限制為僅在您信任的網站上運行，並防止其他人嵌入您的助手。您可以為不同的服務或用於測試的開發實例添加多個域名。請完成以下步驟：

打開 Amazon Q Business 控制台。
接下來，選擇您的 Amazon Q Business 應用程式。
從菜單中選擇增強功能（Enhancements）下的 Amazon Q 嵌入，然後選擇添加允許的網站。
在輸入網站 URL 的地方，輸入您想要允許的 Amazon Q Business 的網站或網路應用程式的基本 URL，例如 https://www.example.com（結尾的 / 不是必需的），然後選擇添加。

Amazon Q Business 在 AWS 域上托管網頁體驗。要找到 URL，請導航到您的 Amazon Q Business 應用程式的主頁，並複製 Web 體驗設置部分中的 Deployed URL 值，例如 https://1234abcdef5678.chat.qbusiness.example.on.aws/。現在，您可以將此助手嵌入到您允許的域名上托管的網站或網路應用程式中。

自訂用戶體驗

您可以自訂組織的用戶體驗外觀和感覺。自訂選項包括助手的標題、副標題、歡迎信息、字體、顏色和標誌。您還可以啟用範例提示。請參考自訂 Amazon Q Business 網頁體驗以查看可用的自訂選項。

以下截圖顯示了默認的 Amazon Q Business 用戶體驗（左）和具有自訂標題、副標題和歡迎信息的 Amazon Q Business 用戶體驗（右）。

將 Amazon Q Business 添加到您的網站或網路應用程式

在繼續之前，請確保您已按照前面所述允許您的域名。

您可以選擇以下嵌入選項：

使用 HTML iframe 元素
使用 React 組件
使用內容管理系統

使用 HTML iframe 元素嵌入 Amazon Q Business

您可以使用 iframe 元素在您的網站或網路應用程式中嵌入 Amazon Q Business，這是一個 HTML 元素，您可以用來將另一個 HTML 頁面插入到當前頁面中。其他嵌入選項基於這個基礎的 HTML 元素。以下是一個示範的 iframe 元素：

您可以使用各種屬性自訂 iframe 元素，例如寬度、高度和標題。將 Amazon Q Business 部署的 URL 設置為 src 屬性的值將在 iframe 中顯示 Amazon Q Business 網頁體驗。以下代碼顯示了一個示範的 iframe 元素，其中 id、title、width、height 和 src 屬性設置為示範值：

請參考 <iframe>: 內聯框架元素以了解更多有關 iframe 元素的信息。

使用 React 組件嵌入 Amazon Q Business

您可以使用 React 組件在您的網站或網路應用程式中嵌入 Amazon Q Business。React 組件提供比標準 iframe 更多的自訂和模組化。在這篇文章中，我們包含了一個示範的 React 組件，它包裝了一個 iframe 元素，並添加了擴展和收縮聊天介面以及在頁面首次加載時顯示加載指示器等功能。

要使用此 React 組件，請從 GitHub 倉庫下載嵌入 GenAI 聊天的示範代碼，並將其添加到您的 React 源代碼中。然後，您可以將該組件導入到您的網站或網路應用程式中，並添加 Chat 元素，至少將 embedUrl 屬性設置為您的 Amazon Q Business 應用程式的部署 URL。以下示範代碼顯示了示範 React 組件的選項：

import Chat from “../components/embed”;
…
<Chat
embedUrl=”https://1234abcdef5678.chat.qbusiness.example.on.aws/”
embedWidth={600} // 可選
embedHeight={650} // 可選
embedOffsetRightPc={5} // 可選
headerText=”聊天” // 可選
headerInfo=”與我們聊天” // 可選
/>

使用內容管理系統嵌入 Amazon Q Business

您可以在由內容管理系統發佈的網站上嵌入 Amazon Q Business，該系統允許您將 HTML 元素添加到內容中。我們已經為 WordPress 和 Drupal 提供了示範，這兩者都可以與 Amazon Lightsail 部署。

在 WordPress 網站上嵌入

要在您的 WordPress 網站上嵌入 Amazon Q Business，首先訪問 WordPress 管理頁面。可選地，添加一個區塊組包裝器，以約束 iframe 的大小，使用您選擇的值。例如，您可以將佈局內容的高度設置為 650px，寬度設置為 620px，將 iframe 的寬度設置為 100% 以填滿容器，並選擇全尺寸區塊項目。最後，添加一個自訂 HTML 區塊並插入 iframe 代碼。以下代碼是一個示範的 iframe 元素：

以下截圖顯示了在 WordPress 網站上添加區塊的示範。

以下截圖顯示了將 iframe 添加到區塊的示範。

以下截圖顯示了 Amazon Q Business 在 WordPress 網站上的示範。

在 Drupal 網站上嵌入

要在您的 Drupal 網站上嵌入 Amazon Q Business，請完成以下步驟：

打開 Drupal 管理頁面。
選擇內容、區塊，然後添加內容區塊。
為您的內容區塊提供描述，並將文本格式更改為 HTML。
選擇來源
將您的 iframe 添加到區塊的正文部分，然後選擇保存和配置。
在配置您的內容區塊時，顯示選項是可選的，可以保留為默認值。
選擇一個區域來顯示此區塊，例如內容上方或側邊欄，然後選擇保存區塊。

以下截圖顯示了 Amazon Q Business 嵌入在內容上方的示範。

以下截圖顯示了 Amazon Q Business 嵌入在側邊欄的示範。

示範網站

為了幫助您開始嵌入 Amazon Q Business，我們提供了一個示範網站，您可以在 AWS Amplify 上使用 AWS CloudFormation 堆疊進行部署。示範網站包含一個 HTML iframe 元素，內含您的 Amazon Q Business 助手。要使用該網站，請完成以下步驟：

首先收集您的 Amazon Q Business 應用程式 ID 並記下。您可以在 Amazon Q Business 控制台中找到您的應用程式 ID，如前面所述。
將我們的 YAML 示範 CloudFormation 模板下載到您的工作站。
使用 AWS CloudFormation 控制台或 AWS CLI 部署堆疊。
上傳示範 CloudFormation 模板後，輸入堆疊名稱、網頁名稱和您的 Amazon Q Business 應用程式 ID。
您可以將所有其他設置保留為默認值。
堆疊完全部署後，導航到 AWS CloudFormation 控制台的輸出選項卡，並複製 Amplify URL。
返回 Amazon Q Business 控制台，選擇您的 Amazon Q Business 應用程式，然後選擇 Amazon Q 嵌入，將您的 Amplify URL 添加到允許的網站列表中，如前面所述。
在您的網頁瀏覽器中導航到您的 Amplify URL，以查看包含 Amazon Q Business 的示範網站。您可能需要登錄 Q Business。

清理

為了避免未來在您的帳戶中因 Amplify 而產生的費用，您可以刪除您在前一部分創建示範網站時創建的資源。

在 CloudFormation 控制台的導航窗格中，選擇堆疊。
選擇您在前一步中啟動的堆疊，然後選擇刪除。

結論

在這篇文章中，我們展示了多種嵌入 Amazon Q Business 的方法，這使得用戶能夠在您的網站或網路應用程式上進行自然語言對話並獲得有意義的幫助。我們討論了如何創建 Amazon Q Business 應用程式以及如何允許您的 URL。我們接著介紹了如何使用標準 HTML iframe、React 組件以及如何更新 WordPress 或 Drupal 網站來添加 Amazon Q Business。

要開始使用，請參考開始使用 Amazon Q Business 以創建 Amazon Q Business 應用程式。欲了解有關 Amazon Q 嵌入功能的更多信息，請參見 Amazon Q 嵌入。請參考增強 Amazon Q Business 應用程式環境以獲取有關整合您的數據來源的指導，這些數據來源可以包括您的網站內容，以豐富 Amazon Q Business 可以為您的網站或網路應用程式用戶提供的答案。