> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thunderphone.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 在控制台中创建网页小组件

> 在“网页小组件”页面为您的网站设置一键通话小组件——无需调用 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` 的子域名通配符（它们匹配子域名，不匹配裸域名）；不允许使用如 `*` 的裸通配符。
    始终允许使用 `localhost` 和 `127.0.0.1`，因此本地开发无需将其列出。
  </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>