Skip to main content
ウェブウィジェットを使用すると、ブラウザのマイクを通じて、サイト訪問者がAIエージェントとクリックして会話できます。これは独立したJavaScript / React SDKであり、専用のSDKリファレンスがあります。このガイドでは、ウィジェットに必要なThunderPhone側の設定に焦点を当てます。
これらはすべてcURLなしで実行できます。ウェブウィジェットダッシュボードページ (/dashboard/web-widgets) で、ウィジェットの作成、モードとエージェントの設定、許可ドメインの管理、埋め込みスニペットの取得を行えます。

​
前提条件

1

エージェントを作成

プロンプトと音声がウィジェットセッションで使用されるエージェントです。 widget_enabled: true（デフォルト）に設定します。
2

ルーティングモードを決定

  • mode="agent" — キーごとに1つの静的エージェント。最も簡単です。
  • mode="webhook" — サーバーが web.incoming webhook を通じて訪問者ごとにエージェントを選択します。ログイン済みユーザー、A/Bテスト、ページごとのルーティングに使用します。
3

許可するドメインを一覧化

公開可能キーはオリジンにロックされます。ウィジェットを埋め込むすべてのホスト名を指定する必要があります。ローカル開発中は、localhost / 127.0.0.1 が常に許可されます。

​
公開可能キーを作成

レスポンスには、pk_live_... で始まる key が含まれます。公開可能キーは意図的に公開されています。フロントエンドバンドルに安全に含めることができます。すべてのフィールドについては、公開可能キーリファレンスを参照してください。
allowed_domains には少なくとも1つのエントリが必要です。*.example.com はサブドメイン（例: api.example.com）に一致しますが、ベアドメインには一致しません。* や *.* のようなベアワイルドカードは拒否されます。

​
サイトにウィジェットを追加

次の3つの統合オプションについて、ウィジェットSDKドキュメントで説明しています。

Reactコンポーネント

<ThunderPhoneWidget publishableKey="pk_live_..." />。

ヘッドレスフック

カスタムUI用の useThunderPhone()。

CDNスクリプトタグ

バンドラーを使用しないサイト向けの ThunderPhone.mount({...})。
3つの方法はいずれも同じ publishableKey を受け取り、マイクボタンと通話中のオーディオ要素をレンダリングします。 ウィジェットの context は12,000文字（一般的な英語テキストで約3,400トークン）で切り詰められ、プロンプトサイズ追加料金の対象になります。

​
ウィジェットモードのwebhook

mode="webhook" の場合、ThunderPhoneはセッションが開始されるたびに、web.incoming ペイロードを含めて webhook_url を呼び出します。その訪問者に対して実行するエージェント設定を返します。これは電話と同じレスポンススキーマに従います。
独自のセッションのコンテキスト（どの顧客が閲覧しているか、どのページを表示しているか）をプロンプトに組み込み、ロールアウトごとにエージェントを切り替えられます。

​
セッションを確認

ウィジェットセッションは、 GET /v1/calls で direction="widget" を指定すると表示されます。文字起こし、録音、評価、 請求は電話と同じです。direction でフィルタリングして、ウィジェット専用の ダッシュボードを構築します。

​
次のステップ

ウィジェット SDK リファレンス

React / フック / CDN 統合の詳細。

通話ごとの動的設定

mode="webhook" フローをエンドツーエンドで実装。

公開可能キーのリファレンス

キーリソースのすべてのフィールド。

マイクセッション API

ウィジェットを使わず、カスタム UI 向けに LiveKit を直接操作。