---
title: "在控制台建立網頁小工具"
description: "從「網頁小工具」頁面為你的網站設定點擊通話小工具——無需進行 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` 的子網域萬用字元
    （會比對子網域，不會比對裸網域）；如 `*` 的裸萬用字元會遭到拒絕。此清單可防止
    他人在其他網站隨意重複使用你的金鑰，但不屬於驗證機制：瀏覽器外部的
    指令碼可以傳送任何 `Origin` 標頭。正式環境不會自動允許 `localhost`；
    請將其加入清單，以便在本機針對正式 API 進行測試。
  </Step>
  <Step title="選擇瀏覽器覆寫設定">
    勾選你的頁面會傳送的每個工作階段設定：**頁面內容**、
    **變數**、**語音**、**語言**。新小工具預設不接受任何設定，而
    工作階段請求若包含已關閉的設定，將會以 `400` 失敗。
    你的金鑰是公開的，因此只允許你會使用的設定。請參閱
    [瀏覽器覆寫設定](/zh-Hant/guides/embed-web-widget)。
  </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>