> ## 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 呼叫。

**網頁小工具**頁面（`/dashboard/web-widgets`）可建立及管理為 ThunderPhone 可嵌入式語音小工具提供支援的可發布金鑰。
本指南的 [API 版本](/zh-Hant/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 文件](/zh-Hant/widget/overview)。

<Note>
  可發布金鑰（`pk_live_…`）在設計上就是公開的——可安全地部署在前端程式碼中。你可以隨時使用該列的複製按鈕複製金鑰。
</Note>

## 從列表管理小工具

每一列都可直接編輯：

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

小工具工作階段會顯示在[通話紀錄](/zh-Hant/guides/review-calls)中，並具備與電話通話相同的逐字稿、錄音和評分。

## 後續步驟

<CardGroup cols={2}>
  <Card title="小工具 SDK 參考資料" icon="window-maximize" href="/zh-Hant/widget/overview">
    React 元件、無介面 Hook 與 CDN 指令碼詳細資訊。
  </Card>

  <Card title="Webhook 模式路由" icon="bolt" href="/zh-Hant/guides/dynamic-call-config">
    從你的伺服器傳回每位訪客的智慧體設定。
  </Card>
</CardGroup>