埋め込み可能な音声ウィジェット
数行のコードで、あらゆるウェブサイトに音声AIエージェントを追加
ThunderPhone の埋め込み音声ウィジェットを使用すると、Web サイトの訪問者はブラウザから直接 AI エージェントと会話できます。電話は不要です -- ユーザーはボタンをクリックするだけで、ThunderPhone を利用したリアルタイム音声会話を開始できます。
このウィジェットは、ライトテーマとダークテーマに対応するグラスモーフィックなバーとして表示され、アクセントカラーと配置をカスタマイズできます。@thunderphone/widget npm パッケージとして配布されており、バンドラーを使用しない環境向けに CDN からも利用できます。
前提条件
ウィジェットを埋め込む前に、ThunderPhone ダッシュボードで次の 3 つの手順を完了してください。
- 公開可能 API キーを作成
ダッシュボード設定の 開発者 に移動し、公開可能キーを作成します。公開可能キーは
pk_live_で始まり、クライアントサイドコードに含めても安全です。 - 許可するドメインを設定
同じ開発者設定で、ウィジェットを埋め込むドメインを追加します。開発時は常に
localhostが許可されます。ワイルドカードもサポートされています（例:*.example.com）。 - Web ウィジェットを作成
ダッシュボードの Web ウィジェット に移動し、ウィジェットを作成します。公開するエージェントと使用する公開可能キーを選択します。エージェントは、公開可能キーの設定から自動的に解決されます。
クイックスタート
パッケージをインストールします。
npm install @thunderphone/widgetアプリにウィジェットを追加します。
import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
function App() {
return (
<ThunderPhoneWidget
publishableKey="pk_live_your_publishable_key"
theme="dark"
primaryColor="#8b5cf6"
/>
)
}以上です。ユーザーには、ワンクリックで AI エージェントに接続できるグラスモーフィックな通話バーが表示されます。
カスタマイズ
ウィジェットには、外観を設定する 4 つの props があります。
| Prop | デフォルト | 説明 |
|---|---|---|
theme | 'light' | 白いガラスには 'light'、暗いガラスには 'dark' |
primaryColor | '#000000'（ライト）/ '#ffffff'（ダーク） | 開始ボタン、波形、接続中インジケーターのアクセントカラー |
title | 'Voice assistant' | ウィジェットに表示するテキスト |
position | 'bottom-right' | ビューポートの隅: 'bottom-right'、'bottom-left'、'top-right'、'top-left' |
<ThunderPhoneWidget
publishableKey="pk_live_your_publishable_key"
/><ThunderPhoneWidget
publishableKey="pk_live_your_publishable_key"
theme="dark"
primaryColor="#8b5cf6"
title="Ask our AI"
/>外観ではなくセッションをカスタマイズする props がさらに 3 つあります。いずれも通話開始時にセッションリクエストへ転送されます。
| Prop | 説明 |
|---|---|
language | セッションごとの言語オーバーライド -- en、es、fr-FR などのコードまたはロケール |
voice | セッションごとの音声オーバーライド -- maria などの音声名 |
context | エージェントに渡すページまたはサイトの事実情報コンテキスト（サーバー側で 12,000 文字に切り詰められます） |
完全な props の一覧については、React コンポーネントリファレンスを参照してください。
完全にカスタムな UI を作成する場合は、ヘッドレスフックを使用して、独自のインターフェースを構築しながら音声セッションを管理します。このフックは、音声に反応するビジュアライゼーションを構築するためのリアルタイム音量レベルを公開します。
統合オプション
スタックに適した統合方法を選択します。
通話コントロールとステータス表示を組み込んだ事前構築済みUIコンポーネントです。インポートしてpropsを渡すだけで完了します。
UIを完全に制御できます。独自のインターフェースを構築しながら、useThunderPhoneフックで音声セッションを管理します。
バンドラーは不要です。静的サイト、WordPress、その他のReact以外の環境では、スクリプトタグでウィジェットを読み込みます。
スタイリング
ウィジェットには、theme propで制御するライトテーマとダークテーマ、およびprimaryColor propで制御するアクセントカラーが組み込まれています。さらに細かくカスタマイズするには、CSSカスタムプロパティとクラスをオーバーライドします。詳細はスタイリングガイドを参照してください。