---
title: "在控制台建立網頁小工具"
description: "在「網頁小工具」頁面為你的網站設定點擊通話小工具——無需 API 呼叫。"
---

**Web Widgets** 頁面（`/dashboard/web-widgets`）用於建立及管理為 ThunderPhone 可嵌入語音小工具提供支援的可發佈金鑰。
本指南的 [API 版本](/yue/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 />` 程式碼片段。
- **Script 標籤** —— 適用於任何網站的 CDN `<script>` 加樣式表組合。

對話框亦會預覽基本外觀選項——標題、主色、角落位置及淺色／深色主題——並將你的選擇寫入程式碼片段。如需完整的 prop 參考、樣式掛鈎及無介面選項，請參閱 [小工具 SDK 文件](/yue/widget/overview)。

<Note>
  可發佈金鑰（`pk_live_…`）按設計屬公開資訊——可安全地部署於前端程式碼。你可隨時透過所屬列的複製按鈕複製金鑰。
</Note>

## 從清單管理小工具

每一列均可原地編輯：

- **模式／智能體** —— 使用內嵌選單切換智能體與 webhook 模式，或重新指定智能體。
- **網域** —— 以標籤形式新增或移除允許的網域。
- **啟用／停用** —— 每個小工具各有一個切換掣；停用的小工具會立即停止接受工作階段。
- **轉移至組織** —— 將小工具複製或轉移至你所屬的另一個組織（轉移後會從此處移除）。
- **刪除** —— 撤銷可發佈金鑰；小工具會立即在所有網域停止運作。此操作無法復原。

小工具工作階段會顯示於[通話記錄](/yue/guides/review-calls)，並提供與電話通話相同的逐字稿、錄音及評分。

## 後續步驟

<CardGroup cols={2}>
  <Card title="小工具 SDK 參考資料" icon="window-maximize" href="/yue/widget/overview">
    React 元件、無介面掛鈎及 CDN script 詳情。
  </Card>
  <Card title="Webhook 模式路由" icon="bolt" href="/yue/guides/dynamic-call-config">
    從你的伺服器傳回按訪客而設的智能體設定。
  </Card>
</CardGroup>