> ## 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.

# ダッシュボードでWebウィジェットを作成

> Webウィジェットページからサイト用のクリック通話ウィジェットを設定。API呼び出しは不要です。

**Web Widgets** ページ（`/dashboard/web-widgets`）では、ThunderPhone の埋め込み可能な音声ウィジェットを動作させる公開可能キーを作成・管理できます。
[このガイドの API 版](/ja/guides/embed-web-widget)で cURL を使って行うすべての操作を、このページではフォームで行えます。さらに、埋め込みコードも生成されます。

## ウィジェットを作成

<Steps>
  <Step title="新しいウィジェットをクリックしてモードを選択">
    * **エージェントモード** — ウィジェットはドロップダウンで選択した 1 つのエージェントを常に実行します。最もシンプルな設定です。
    * **Webhook モード** — ウィジェットセッションごとに、ThunderPhone が webhook URL を呼び出し、サーバーがその訪問者向けのエージェント設定を返します（ページごとのルーティング、ログインユーザー、ロールアウト）。URL を空欄のままにすると組織のデフォルト webhook が使用されます。新しい URL を入力した場合は、組織のデフォルトとして設定することもできます。
  </Step>

  <Step title="許可するドメインを一覧に追加">
    公開可能キーはオリジンにロックされます。少なくとも 1 つのドメインが必要で、ウィジェットは一覧に追加したホスト名でのみ動作します。`*.example.com` のようなサブドメインワイルドカードは使用できます（ベアドメインではなくサブドメインに一致します）。`*` のようなベアワイルドカードは拒否されます。
    `localhost` と `127.0.0.1` は常に許可されるため、一覧に追加しなくてもローカル開発を行えます。
  </Step>

  <Step title="名前を付け、有効化して作成">
    **ウィジェットを有効化**トグルは、キーがセッションを受け付けるかどうかを制御します。無効な状態でウィジェットを作成し、公開時に有効化できます。
  </Step>
</Steps>

## 埋め込みコードを取得

作成直後、または各行の **埋め込み** ボタンから、公開可能キーが入力済みのそのまま貼り付けられるコードを生成する埋め込みダイアログを開けます。

* **React** — バンドラーアプリ向けの `<ThunderPhoneWidget />` スニペット。
* **スクリプトタグ** — あらゆるサイト向けの CDN `<script>` とスタイルシートの組み合わせ。

このダイアログでは、タイトル、メインカラー、コーナー位置、ライト/ダークテーマといった基本的な外観オプションもプレビューでき、選択内容がスニペットに反映されます。完全なプロパティリファレンス、スタイリングフック、ヘッドレスオプションについては、[ウィジェット SDK ドキュメント](/ja/widget/overview)を参照してください。

<Note>
  公開可能キー（`pk_live_…`）は、設計上公開されています。フロントエンドコードに含めても安全です。各行のコピーボタンからいつでもコピーできます。
</Note>

## リストからウィジェットを管理

各行で直接編集できます。

* **モード / エージェント** — インラインセレクトで、エージェントモードと webhook モードを切り替えたり、エージェントを変更したりできます。
* **ドメイン** — 許可するドメインをチップとして追加または削除できます。
* **有効化/無効化** — ウィジェットごとのスイッチです。無効化したウィジェットは直ちにセッションの受け付けを停止します。
* **組織に転送** — 所属する別の組織にウィジェットをコピーまたは移動します（移動すると、ここからは削除されます）。
* **削除** — 公開可能キーを無効化します。ウィジェットはすべてのドメインで直ちに動作しなくなります。この操作は元に戻せません。

ウィジェットセッションは、電話と同じトランスクリプト、録音、評価とともに[通話履歴](/ja/guides/review-calls)に表示されます。

## 次のステップ

<CardGroup cols={2}>
  <Card title="ウィジェット SDK リファレンス" icon="window-maximize" href="/ja/widget/overview">
    React コンポーネント、ヘッドレスフック、CDN スクリプトの詳細。
  </Card>

  <Card title="Webhook モードのルーティング" icon="bolt" href="/ja/guides/dynamic-call-config">
    サーバーから訪問者ごとのエージェント設定を返します。
  </Card>
</CardGroup>