---
title: "ダッシュボードでWebウィジェットを作成"
description: "Webウィジェットページからサイト用のクリック通話ウィジェットを設定。API呼び出しは不要です。"
---

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

## ウィジェットを作成

<Steps>
  <Step title="「新しいウィジェット」をクリックしてモードを選択">
    - **エージェントモード** — ウィジェットは常に、ドロップダウンから選択した 1 つのエージェントを実行します。
      最も簡単な設定です。
    - **Webhook モード** — ウィジェットセッションごとに ThunderPhone が
      Webhook URL を呼び出し、サーバーがその訪問者向けのエージェント設定を
      返します（ページごとのルーティング、ログイン済みユーザー、段階的ロールアウト）。
      組織のデフォルト Webhook を使用するには URL を空白のままにします。
      新しい URL を入力すると、組織のデフォルトとして設定することもできます。
  </Step>
  <Step title="許可するドメインを一覧に追加">
    少なくとも 1 つのドメインが必要です。ブラウザがセッションを開始できるのは、
    一覧に記載したホスト名からのみです。`*.example.com` のようなサブドメインの
    ワイルドカードは使用できます（ベアドメインではなくサブドメインに一致します）。
    `*` のようなベアワイルドカードは拒否されます。この一覧により、他のサイトでの
    キーの安易な再利用を防止できますが、認証ではありません。ブラウザ外のスクリプトは
    任意の `Origin` ヘッダーを送信できます。本番環境では `localhost` は自動的に
    許可されません。本番 API に対してローカルでテストするには、一覧に追加してください。
  </Step>
  <Step title="ブラウザのオーバーライドを選択">
    ページから送信する各セッション設定にチェックを入れます: **ページコンテキスト**、
    **変数**、**音声**、**言語**。新しいウィジェットではいずれも許可されておらず、
    無効な設定を含むセッションリクエストは `400` で失敗します。
    キーは公開されるため、使用するものだけを許可してください。
    [ブラウザのオーバーライド](/ja/guides/embed-web-widget)を参照してください。
  </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>