---
title: "在控制台中创建网页小组件"
description: "在“网页小组件”页面为您的网站设置一键通话小组件——无需调用 API。"
---

**Web Widgets** 页面（`/dashboard/web-widgets`）用于创建和管理为 ThunderPhone 可嵌入式语音组件提供支持的可发布密钥。
本指南的 [API 版本](/zh/guides/embed-web-widget)通过 cURL 完成的所有操作，此页面均可通过表单完成——此外还会为您生成嵌入代码。

## 创建组件

<Steps>
  <Step title="点击“新建小组件”并选择模式">
    - **智能体模式**——小组件始终运行您从下拉菜单中选择的一个智能体。
      这是最简单的设置。
    - **Webhook 模式**——每次小组件会话时，ThunderPhone 都会调用
      您的 webhook URL，您的服务器会返回该访客的智能体配置
      （按页面路由、已登录用户、逐步发布）。
      将 URL 留空以使用您组织的默认 webhook；
      输入新 URL 后，您也可以将其设为组织默认值。
  </Step>
  <Step title="列出允许的域名">
    至少需要一个域名，浏览器只能从您列出的主机名启动
    会话。允许使用子域名通配符，例如
    `*.example.com`（匹配子域名，不匹配裸域名）；
    不接受裸通配符，例如 `*`。该列表可防止您的密钥被随意
    复用于其他网站，但并非身份验证：浏览器外的脚本
    可以发送任何 `Origin` 标头。生产环境不会自动允许 `localhost`；
    请将其添加到列表中，以便针对生产 API 进行本地测试。
  </Step>
  <Step title="选择浏览器覆盖设置">
    勾选您的页面发送的每项会话设置：**页面上下文**、
    **变量**、**语音**、**语言**。新小组件默认不接受任何设置，且
    携带已关闭设置的会话请求会以 `400` 失败。
    您的密钥是公开的，因此只允许您实际使用的设置。请参阅
    [浏览器覆盖设置](/zh/guides/embed-web-widget)。
  </Step>
  <Step title="命名、启用并创建">
    **启用小组件** 开关控制该密钥是否接受
    会话——您可以先创建已禁用的小组件，并在发布时将其开启。
  </Step>
</Steps>

## 获取嵌入代码

创建后立即可获取（或通过每一行的 **嵌入** 按钮），嵌入对话框会生成已填入您的可发布密钥、可直接粘贴的代码：

- **React** —— 适用于使用打包工具的应用的 `<ThunderPhoneWidget />` 代码片段。
- **脚本标签** —— 适用于任何网站的 CDN `<script>` 与样式表组合。

该对话框还会预览基本外观选项——标题、主色、角落位置以及浅色/深色主题——并将您的选择写入代码片段。有关完整的属性参考、样式钩子和无头选项，请参阅 [组件 SDK 文档](/zh/widget/overview)。

<Note>
  可发布密钥（`pk_live_…`）按设计即为公开——可安全地发布在前端代码中。您可以随时通过所在行的复制按钮复制密钥。
</Note>

## 从列表管理组件

每一行均可原地编辑：

- **模式 / 智能体** —— 使用行内选择器在智能体模式与 webhook 模式之间切换，或重新指定智能体。
- **域名** —— 以标签形式添加或移除允许的域名。
- **启用/禁用** —— 每个组件都有一个开关；禁用的组件会立即停止接受会话。
- **转移到组织** —— 将组件复制或移动到您所属的另一个组织（移动后会从此处移除）。
- **删除** —— 撤销可发布密钥；该组件会立即在所有域名上停止运行。此操作无法撤销。

组件会话会显示在[通话记录](/zh/guides/review-calls)中，并具备与电话通话相同的转录文本、录音和评分。

## 后续步骤

<CardGroup cols={2}>
  <Card title="组件 SDK 参考" icon="window-maximize" href="/zh/widget/overview">
    React 组件、无头钩子和 CDN 脚本详情。
  </Card>
  <Card title="Webhook 模式路由" icon="bolt" href="/zh/guides/dynamic-call-config">
    从您的服务器返回按访客区分的智能体配置。
  </Card>
</CardGroup>