ThunderPhone 2.0、提供開始。セルフサービスで、1分あたり2¢から。発表内容を見る
始める

Widget

スタイリング

CSS で ThunderPhone 音声ウィジェットの外観をカスタマイズ

ウィジェットは、ライトテーマとダークテーマを内蔵したグラスモーフィズムのバーとして表示されます。カスタマイズは3つのレベルで可能です。一般的なオプション用のprops、テーマ設定用のCSSカスタムプロパティ、完全な制御を行うためのCSSクラスオーバーライドを使用できます。

テーマ

theme propはウィジェットの配色を制御します。ウィジェットのルートにtp--lightまたはtp--darkクラスを適用します。

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
/>
テーマクラス説明
'light'tp--light濃いテキストを使用した明るい背景。デフォルト。
'dark'tp--dark明るいテキストを使用した暗い背景。

どちらのテーマも、背景ぼかしと控えめな透明感を備えたグラスモーフィズムのバーデザインを使用します。

CSS カスタムプロパティ

このウィジェットは、個別のクラスに手を加えずに色を変更できる、オーバーライド可能な CSS カスタムプロパティ（変数）を公開しています。これらは、.tp-widget ルートに適用されるテーマクラス（.tp--light または .tp--dark）で定義されます。

プロパティデフォルト（ライト）デフォルト（ダーク）説明
--tp-accent#000#fffアクセントカラー: 開始ボタン、波形バー、接続中のドット、接続済みステータステキスト。primaryColor プロパティからインラインで設定されます。
--tp-bgrgba(255, 255, 255, 0.82)rgba(15, 15, 15, 0.85)バーの背景（半透明。--tp-glass によりぼかされます）。
--tp-surfacergba(0, 0, 0, 0.04)rgba(255, 255, 255, 0.07)ミュートボタンの背景。
--tp-surface-hoverrgba(0, 0, 0, 0.07)rgba(255, 255, 255, 0.12)ミュートボタンのホバー時の背景。
--tp-borderrgba(0, 0, 0, 0.08)rgba(255, 255, 255, 0.1)バーとボタンの境界線。
--tp-border-hoverrgba(0, 0, 0, 0.14)rgba(255, 255, 255, 0.18)ホバー時の境界線の色。
--tp-textrgba(0, 0, 0, 0.88)rgba(255, 255, 255, 0.95)プライマリテキスト（タイトル、エージェント名）。
--tp-text-2rgba(0, 0, 0, 0.5)rgba(255, 255, 255, 0.55)セカンダリテキスト（サブタイトル、ステータス行、通話タイマー）。
--tp-glassblur(32px) saturate(180%)blur(32px) saturate(180%)バーにガラス効果を作成する backdrop-filter。
--tp-shadow3層のシャドウスタック3層のシャドウスタックバーの box-shadow（リング + 近距離 + 遠距離レイヤー）。
--tp-shadow-hover3層のシャドウスタック3層のシャドウスタックホバー時の浮き上がり用に宣言されていますが、現在はいずれのルールにも適用されていません。
--tp-glowinset 0 1px 0 0 rgba(255,255,255,0.5)inset 0 1px 0 0 rgba(255,255,255,0.06)バーのシャドウに重ねられる内側上部のハイライト。
--tp-connected#059669#34d399接続済み状態のインジケーター色（ステータスドット）。
--tp-error#dc2626#fb7185エラー状態のステータステキストの色。
--tp-end-bgrgba(239, 68, 68, 0.08)rgba(251, 113, 133, 0.12)通話終了ボタンの背景。
--tp-end-color#ef4444#fb7185通話終了ボタンのアイコン色。
--tp-end-borderrgba(239, 68, 68, 0.12)rgba(251, 113, 133, 0.15)通話終了ボタンの境界線。
--tp-end-hoverrgba(239, 68, 68, 0.14)rgba(251, 113, 133, 0.2)通話終了ボタンのホバー時の背景。
--tp-idle-opacity0.40.3アイドル状態の減光用に宣言されていますが、現在はいずれのルールにも適用されていません。

カスタムプロパティのオーバーライド

アクセントカラーは primaryColor プロパティで設定します。

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#e11d48"
/>

その他のカスタムプロパティは CSS でオーバーライドします。スタイルシートの順序にかかわらず、デフォルトを定義するテーマクラスよりルールの優先度を高くするため、2クラスセレクター（.tp-widget.tp--light / .tp-widget.tp--dark）を使用してください。

.tp-widget.tp--light {
  --tp-bg: rgba(0, 0, 0, 0.9);
  --tp-text: rgba(255, 255, 255, 0.95);
  --tp-text-2: rgba(255, 255, 255, 0.55);
  --tp-border: rgba(255, 255, 255, 0.15);
}

CSS クラス

すべてのウィジェットクラスには、既存のスタイルとの競合を避けるため tp- プレフィックスが付いています。

クラス要素説明
.tp-widgetルートラッパー固定位置コンテナ（position: fixed、position prop で設定される角、z-index: 9999）。テーマクラスと基本フォント設定を保持し、独自の視覚的な装飾はありません。
.tp--light / .tp--darkテーマモディファイアテーマとともに .tp-widget に適用され、すべての --tp-* カスタムプロパティを定義します。
.tp-barバーグラスモーフィズムのピル本体。背景、バックドロップぼかし、ボーダー、99px の角丸、シャドウを含みます。幅は 300px です。
.tp-metaテキストブロックすべてのテキストのコンテナ。待機中はタイトルとサブタイトル、通話中はエージェント名とステータスを表示します。
.tp-nameメインラベル待機中は title prop を表示し、通話中は接続済みエージェントの名前を表示します（名前がない場合は title にフォールバックします）。
.tp-subサブタイトル待機中に表示される「Available now」の行です。
.tp-start待機中の通話ボタン円形のアクセント付き開始ボタン（42px）。背景に --tp-accent を使用します。
.tp-dot接続ドット接続中にバーの左側に表示される、パルスするアクセントドットです。
.tp-wave / .tp-wave--idle波形5本バーの波形です。--idle はゆっくりした呼吸アニメーションを追加し、通話中はバーが音声に反応します。
.tp-button通話中ボタン通話中コントロールの基本スタイルです（42px、角丸 12px）。
.tp-button-groupボタン行通話中にミュートボタンと終了ボタンをまとめます。
.tp-button--start接続ボタンバリアント通話の開始中に表示されるアクセントカラーのバリアントです。
.tp-button--muteミュート切り替え通話中にマイクをミュートまたはミュート解除します。--tp-surface を使用します。
.tp-button--end通話終了ボタン通話を終了します。--tp-end-* パレットを使用します。
.tp-button--loadingローディングモディファイア接続中にボタンを暗くします。
.tp-icon / .tp-spinアイコンボタンアイコンのサイズ設定。tp-spin は接続中のスピナーをアニメーション表示します。
.tp-status通話中ステータスブロック接続中、接続済み、エラー状態におけるステータス行を囲みます。
.tp-status__textステータス行接続状態のテキスト（例: 「Connecting...」）または通話タイマーです。状態に応じて .tp-status--connected（アクセントカラー）または .tp-status--error（エラーカラー）が適用されます。
.tp-status__nameエージェント名スロットステータスブロックの一部ですが、現在のバーのレイアウトではレンダリングされません。エージェント名は代わりに .tp-name に表示されます。
.tp-status__dotステータスドットパルスする接続済み状態のドットスタイルです（--tp-connected を使用）。

例

Props によるカスタムアクセント

ウィジェットをブランドに合わせる最も簡単な方法:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="light"
  primaryColor="#059669"
  title="Talk to support"
/>

CSS によるカスタムカラー

カスタムプロパティを上書きして、カラーを完全に制御します。アクセントは CSS ではなく primaryColor props から設定される点に注意してください:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#059669"
/>
/* Emerald theme for everything else */
.tp-widget.tp--light {
  --tp-bg: rgba(236, 253, 245, 0.85);
  --tp-text: rgba(6, 78, 59, 0.95);
  --tp-text-2: rgba(4, 120, 87, 0.8);
  --tp-border: rgba(5, 150, 105, 0.2);
}

カスタムサイズ

バー、ボタン、テキストのサイズを調整して、ウィジェットを大きくまたは小さくします:

/* Wider bar */
.tp-bar {
  width: 340px;
}
 
/* Larger buttons (42px by default) */
.tp-start,
.tp-button {
  width: 56px;
  height: 56px;
}
 
/* Larger text */
.tp-name {
  font-size: 16px;
}
 
.tp-sub,
.tp-status__text {
  font-size: 14px;
}

テキストラベルを非表示にする

ウィジェットのすべてのテキストは .tp-meta に含まれています。波形とボタンだけを残すには、これを完全に非表示にします:

.tp-meta {
  display: none;
}

または、個別の要素を非表示にします:

/* Hide only the idle "Available now" subtitle */
.tp-sub {
  display: none;
}
 
/* Hide only the in-call status line (connection state / timer) */
.tp-status {
  display: none;
}

テーマ固有の上書き

テーマクラスを使用して、特定のテーマを対象にします:

/* Only affect dark theme */
.tp--dark .tp-start {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.25);
}
 
/* Only affect light theme */
.tp-widget.tp--light {
  --tp-bg: rgba(255, 255, 255, 0.95);
}

className によるスコープ設定

React コンポーネントを使用する場合は、className props を渡して、上書きを特定のウィジェットインスタンスに限定します:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  className="support-widget"
/>

次に、CSS でそのクラスを対象にします:

.support-widget.tp--dark {
  --tp-bg: rgba(30, 30, 46, 0.9);
}
 
.support-widget .tp-name {
  font-weight: 700;
}

これにより、同じページ上に異なるスタイルのウィジェットインスタンスを複数配置できます。各インスタンスの primaryColor props を使用して、それぞれに独自のアクセントを設定します（--tp-accent はインラインで設定されるため、CSS では上書きできません）。

完全にカスタムな UI

CSS の上書きだけでは不十分な場合、ヘッドレスフック を使用すると完全に制御できます。すべての HTML とスタイリングを用意し、useThunderPhone が音声セッションを処理します。このフックは、波形のようなオーディオ反応型ビジュアライゼーションを構築するための audioLevelRef も提供します。

import { useThunderPhone } from '@thunderphone/widget'
 
function MyWidget() {
  const phone = useThunderPhone({
    publishableKey: 'pk_live_your_publishable_key',
  })
 
  return (
    <div className="my-totally-custom-widget">
      {/* Your own buttons, animations, layouts -- anything */}
      <button onClick={phone.state === 'connected' ? phone.disconnect : phone.connect}>
        {phone.state === 'connected' ? 'Hang up' : 'Call us'}
      </button>
      {phone.audio}
    </div>
  )
}