本指南介绍了如何使用预构建的 SDK 选项集成和配置 Omnichannel Gateway 的开箱即用 WebChat 体验 。您将了解如何将浮动聊天小部件部署到您的网站，并让其路由到您配置的智能体。
准备工作
确保您已配置受支持的智能体在 Omnichannel Gateway 中，并且已 配置指向该智能体的 端点配置。此外，请确保您 已完成HowTo 概览中所述的初始项目设置。
此外，您还应有一个要嵌入聊天小部件的 Web 应用。这可以是任何安全来源网页，包括本地 Web 开发服务器（例如使用 python -m http.server 启动本地服务器）或部署在 Cloud Run 等服务上的服务。
创建来源端点配置
如需通过 Omnichannel Gateway 路由传入的 WebChat 消息传递流量，您应 创建来源端点配置。 在以下示例中，我们将展示如何直接连接到智能体，但如需利用 Omnichannel Gateway 的路由功能，您需要 来源端点配置。我们建议您立即创建一个。
如需将智能体与 Omnichannel Gateway 连接，请运行以下 示例命令来创建端点配置。将占位符替换为您的目标项目：
curl
curl -i -X POST \ -H "Authorization: Bearer $(gcloud auth application-default print-access-token)" \ -H "Content-Type: application/json" \ "https://agenticapplications.googleapis.com/v1alpha/projects/PROJECT_ID/locations/LOCATION/omnichannelEndpointConfigs" \ -d @- <<EOF { "displayName": "WebChat Source Configuration", "sourceConfig": { "webChatSdkConfig": {} } } EOF
设置令牌代理
Omnichannel Gateway 需要使用 不记名令牌 进行身份验证的请求，才能使用 WebChat。如需让最终用户安全地使用聊天小部件，您必须实现一种用于颁发令牌的方法。Omnichannel Gateway 提供了一项开箱即用服务，称为 令牌代理资源，用于生成客户端小部件可用于调用 Google API 的访问令牌。
如需快速创建可供任何人使用的默认令牌代理，请继续阅读。
如需详细了解安全模型和架构，请参阅了解令牌代理。如需了解高级配置和自定义选项（包括限制公开访问），请参阅高级概念下的自定义令牌代理。
为令牌代理创建服务帐号
专门为令牌代理创建一个服务帐号。 为其分配以下角色：
roles/agenticapplications.user
在 gcloud 下提供了一组示例命令来执行此操作：
gcloud
gcloud iam service-accounts create token-broker \ --description="Service account for the token broker application" \ --display-name="Service account for Token Broker" \ --project="PROJECT_ID" gcloud projects add-iam-policy-binding PROJECT_ID \ --member="serviceAccount:token-broker@PROJECT_ID." \ --role="roles/agenticapplications.user"
创建令牌代理资源
执行以下 c网址 命令以初始化代理。请记得根据需要替换变量：
curl
curl -i -X POST \ -H "Authorization: Bearer $(gcloud auth application-default print-access-token)" \ -H "Content-Type: application/json" \ "https://agenticapplications.googleapis.com/v1alpha/projects/PROJECT_ID/locations/LOCATION/omnichannelTokenBrokers" \ -d @- <<EOF { "displayName": "A broker", "issuerServiceAccount": "YOUR_BROKER_SERVICE_ACCOUNT_HERE" } EOF
安装并初始化预构建的 SDK
Web 聊天小部件可以嵌入到您的网站中，以便为最终用户提供一个即时入口点，让他们可以使用 Omnichannel Gateway 与您的虚拟智能体互动。
在您的网站上嵌入聊天小部件
首先，按照在您的网站上嵌入小部件中的说明嵌入并初始化此小部件。
如需将小部件连接到 Omnichannel Gateway，请按如下方式在 Web 应用中配置 chat-messenger 元素。将项目 ID、位置和端点配置详细信息替换为您的资源：
<chat-messenger
project-id="PROJECT_ID"
enable-audio-input="false"
location="LOCATION"
service='{"name":"omnichannel", "endpointConfig": "projects/PROJECT_ID/locations/LOCATION/omnichannelEndpointConfigs/ENDPOINT_CONFIG_ID"}'
language-code="en"
url-allowlist="https://gstatic.com/"
></chat-messenger>
您可以为 endpointConfig 值使用 来源端点配置（我们在此处创建）或 目标端点配置。我们建议使用 目标端点配置 来测试您的智能体，因为使用 来源端点配置 需要配置路由规则。如需详细了解如何在来源渠道和目标智能体之间配置路由，请参阅为智能体配置路由概览。
使用预构建的 SDK 引导身份验证
使用 chatSdk 和创建的令牌代理资源为聊天小部件建立安全、经过身份验证的通信会话：
<script>
window.addEventListener("chat-messenger-loaded", async () => {
const context = await window.chatSdk.prebuilts.concorde.createContext({
tokenBroker: {
tokenBrokerName: "projects/PROJECT_ID/locations/LOCATION/omnichannelTokenBrokers/TOKEN_BROKER_NAME",
},
});
window.chatSdk.registerContext(context);
});
</script>
测试 WebChat
加载 Web 应用时，聊天小部件将显示在页面上，并通过 Omnichannel Gateway 安全地路由传入的消息。您应该能够输入消息、点击“发送”并从配置的智能体收到回复。对于本地测试，您可以通过在终端中运行 python -m http.server 并在浏览器中前往 http://localhost:8000 来提供 Web 应用文件。
后续步骤
- 了解如何为智能体配置路由。