Stil - ThunderPhone

Widget, yerleşik açık ve koyu temalara sahip cam efektli bir çubuk olarak oluşturulur. Özelleştirme üç düzeyde yapılabilir: yaygın seçenekler için prop’lar, tema oluşturma için CSS özel özellikleri ve tam kontrol için CSS sınıf geçersiz kılmaları.

Bu stil seçenekleri, ThunderPhoneWidget React bileşeni ve ThunderPhone.mount() CDN yöntemi tarafından oluşturulan önceden hazırlanmış widget için geçerlidir. Tamamen özel bir kullanıcı arayüzüne ihtiyacınız varsa bunun yerine headless hook’u kullanın.

Temalar

theme prop’u, widget’ın renk şemasını kontrol eder. Widget köküne tp--light veya tp--dark sınıfını uygular:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
/>

Tema	Sınıf	Açıklama
`'light'`	`tp--light`	Koyu metinli açık arka plan. Varsayılan.
`'dark'`	`tp--dark`	Açık metinli koyu arka plan.

Her iki tema da arka plan bulanıklığı ve hafif saydamlık içeren cam efektli çubuk tasarımını kullanır.

CSS Özel Özellikleri

Widget, tek tek sınıflara dokunmadan renkleri değiştirmek için geçersiz kılabileceğiniz CSS özel özelliklerini (değişkenlerini) sunar. Bunlar, .tp-widget köküne uygulanan tema sınıfı (.tp--light veya .tp--dark) tarafından tanımlanır:

Özellik	Varsayılan (açık)	Varsayılan (koyu)	Açıklama
`--tp-accent`	`#000`	`#fff`	Vurgu rengi: başlat düğmesi, dalga biçimi çubukları, bağlanma noktası, bağlı durum metni. `primaryColor` prop’u aracılığıyla satır içi olarak ayarlanır.
`--tp-bg`	`rgba(255, 255, 255, 0.82)`	`rgba(15, 15, 15, 0.85)`	Çubuk arka planı (yarı saydam; `--tp-glass` tarafından bulanıklaştırılır).
`--tp-surface`	`rgba(0, 0, 0, 0.04)`	`rgba(255, 255, 255, 0.07)`	Sessize alma düğmesi arka planı.
`--tp-surface-hover`	`rgba(0, 0, 0, 0.07)`	`rgba(255, 255, 255, 0.12)`	Sessize alma düğmesinin üzerine gelindiğindeki arka planı.
`--tp-border`	`rgba(0, 0, 0, 0.08)`	`rgba(255, 255, 255, 0.1)`	Çubuk ve düğme kenarlıkları.
`--tp-border-hover`	`rgba(0, 0, 0, 0.14)`	`rgba(255, 255, 255, 0.18)`	Üzerine gelindiğindeki kenarlık rengi.
`--tp-text`	`rgba(0, 0, 0, 0.88)`	`rgba(255, 255, 255, 0.95)`	Birincil metin (başlık, ajan adı).
`--tp-text-2`	`rgba(0, 0, 0, 0.5)`	`rgba(255, 255, 255, 0.55)`	İkincil metin (alt başlık, durum satırı, arama zamanlayıcısı).
`--tp-glass`	`blur(32px) saturate(180%)`	`blur(32px) saturate(180%)`	Çubuk üzerinde cam efektini oluşturan `backdrop-filter`.
`--tp-shadow`	üç katmanlı gölge yığını	üç katmanlı gölge yığını	Çubuğun `box-shadow` değeri (halka + yakın + uzak katmanlar).
`--tp-shadow-hover`	üç katmanlı gölge yığını	üç katmanlı gölge yığını	Üzerine gelindiğinde yükselme efekti için tanımlanmıştır; şu anda hiçbir kural tarafından uygulanmaz.
`--tp-glow`	`inset 0 1px 0 0 rgba(255,255,255,0.5)`	`inset 0 1px 0 0 rgba(255,255,255,0.06)`	Çubuk gölgesine katman olarak eklenen iç üst vurgulama.
`--tp-connected`	`#059669`	`#34d399`	Bağlı durum göstergesi rengi (durum noktası).
`--tp-error`	`#dc2626`	`#fb7185`	Hata durumu metin rengi.
`--tp-end-bg`	`rgba(239, 68, 68, 0.08)`	`rgba(251, 113, 133, 0.12)`	Aramayı sonlandır düğmesi arka planı.
`--tp-end-color`	`#ef4444`	`#fb7185`	Aramayı sonlandır düğmesi simge rengi.
`--tp-end-border`	`rgba(239, 68, 68, 0.12)`	`rgba(251, 113, 133, 0.15)`	Aramayı sonlandır düğmesi kenarlığı.
`--tp-end-hover`	`rgba(239, 68, 68, 0.14)`	`rgba(251, 113, 133, 0.2)`	Aramayı sonlandır düğmesinin üzerine gelindiğindeki arka planı.
`--tp-idle-opacity`	`0.4`	`0.3`	Boşta durumunda karartma için tanımlanmıştır; şu anda hiçbir kural tarafından uygulanmaz.

Özel Özellikleri Geçersiz Kılma

Vurgu rengini primaryColor prop’u aracılığıyla ayarlayın:

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

--tp-accent, primaryColor prop’undan satır içi stil olarak ayarlanır; bu nedenle --tp-accent için stil sayfası geçersiz kılmaları etkili olmaz. Vurgu rengini prop ile değiştirin. Diğer tüm özel özellikler CSS’te geçersiz kılınabilir.

Diğer özel özellikleri CSS ile geçersiz kılın. Stil sayfası sırasından bağımsız olarak kuralınızın varsayılanları tanımlayan tema sınıfından daha yüksek önceliğe sahip olması için iki sınıflı bir seçici (.tp-widget.tp--light / .tp-widget.tp--dark) kullanın:

.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 Sınıfları

Mevcut stillerinizle çakışmaları önlemek için tüm widget sınıfları tp- ile başlar.

Sınıf	Öğe	Açıklama
`.tp-widget`	Kök sarmalayıcı	Sabit konumlu kapsayıcı (`position: fixed`, köşe `position` prop’u tarafından ayarlanır, `z-index: 9999`). Tema sınıfını ve temel yazı tipi ayarlarını taşır; kendine ait görsel bir çerçevesi yoktur.
`.tp--light` / `.tp--dark`	Tema değiştiricileri	Temayla birlikte `.tp-widget` öğesine uygulanır; tüm `--tp-*` özel özelliklerini tanımlar.
`.tp-bar`	Çubuk	Cam görünümlü hap şeklinin kendisi: arka plan, arka plan bulanıklığı, kenarlık, `99px` yarıçap, gölge. `300px` genişliğindedir.
`.tp-meta`	Metin bloğu	Tüm metinlerin kapsayıcısıdır — boşta başlık ve alt başlık, arama sırasında ajan adı ve durum.
`.tp-name`	Birincil etiket	Boştayken `title` prop’unu, arama sırasında ise bağlı yapay zeka ajanının adını (`title` yedek olarak kullanılır) gösterir.
`.tp-sub`	Alt başlık	Boştayken gösterilen “Şimdi kullanılabilir” satırı.
`.tp-start`	Boşta arama düğmesi	Dairesel vurgu renkli başlatma düğmesi (42px). Arka plan olarak `--tp-accent` kullanır.
`.tp-dot`	Bağlanma noktası	Bağlanırken çubuğun solunda gösterilen, titreşimli vurgu renkli nokta.
`.tp-wave` / `.tp-wave--idle`	Dalga formu	Beş çubuklu dalga formu. `--idle` yavaş nefes alma animasyonunu ekler; arama sırasında çubuklar sese duyarlıdır.
`.tp-button`	Arama sırasındaki düğmeler	Arama sırasındaki kontroller için temel stil (42px, yuvarlatılmış 12px).
`.tp-button-group`	Düğme satırı	Arama sırasında sessize alma ve sonlandırma düğmelerini sarar.
`.tp-button--start`	Bağlan düğmesi varyantı	Arama başlatılırken gösterilen vurgu renkli varyant.
`.tp-button--mute`	Sessize alma anahtarı	Arama sırasında mikrofonu sessize alır/sessizi kaldırır. `--tp-surface` kullanır.
`.tp-button--end`	Aramayı sonlandır düğmesi	Aramayı kapatır. `--tp-end-*` paletini kullanır.
`.tp-button--loading`	Yükleme değiştiricisi	Bağlanırken düğmeyi soluklaştırır.
`.tp-icon` / `.tp-spin`	Simgeler	Düğme simgesi boyutlandırması; `tp-spin` bağlanma yükleme simgesini canlandırır.
`.tp-status`	Arama sırasındaki durum bloğu	Bağlanıyor/bağlı/hata durumları sırasında durum satırını sarar.
`.tp-status__text`	Durum satırı	Bağlantı durumu metni (ör. “Bağlanıyor…”) veya arama zamanlayıcısı. Duruma göre `.tp-status--connected` (vurgu rengi) ya da `.tp-status--error` (hata rengi) alır.
`.tp-status__name`	Ajan adı alanı	Durum bloğunun bir parçasıdır, ancak mevcut çubuk düzeninde görüntülenmez — ajan adı bunun yerine `.tp-name` içinde görünür.
`.tp-status__dot`	Durum noktası	Titreşimli bağlı durum noktası stili (`--tp-connected` kullanır).

Örnekler

Props ile Özel Vurgu Rengi

Widget’ı markanıza uyarlamanın en basit yolu:

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

CSS ile Özel Renkler

Renkleri tamamen kontrol etmek için özel özellikleri geçersiz kılın. Vurgu renginin CSS’den değil, primaryColor prop’undan geldiğini unutmayın:

<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);
}

Özel Boyut

Çubuk, düğme ve metin boyutlarını ayarlayarak widget’ı büyütün veya küçültün:

/* 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;
}

Metin Etiketlerini Gizleme

Widget’taki tüm metinler .tp-meta içinde bulunur. Yalnızca dalga formunu ve düğmeleri bırakmak için bunu tamamen gizleyin:

.tp-meta {
  display: none;
}

Ya da tek tek bölümleri gizleyin:

/* 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;
}

Boşta durum etiketi .tp-name/.tp-sub içinde bulunur, .tp-status içinde değil — yalnızca .tp-status öğesini gizlemek, widget boşta olduğunda başlığı göstermeye devam eder.

Temaya Özgü Geçersiz Kılmalar

Tema sınıfıyla belirli bir temayı hedefleyin:

/* 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 ile Kapsam Belirleme

React bileşenini kullanırken, geçersiz kılmalarınızı belirli bir widget örneğiyle sınırlamak için bir className prop’u geçirin:

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

Ardından CSS’nizde bu sınıfı hedefleyin:

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

.support-widget .tp-name {
  font-weight: 700;
}

Bu sayede aynı sayfada farklı stillere sahip birden fazla widget örneği kullanabilirsiniz. Her örneğe primaryColor prop’u üzerinden kendi vurgu rengini verin (CSS, --tp-accent özelliğini geçersiz kılamaz — bu özellik satır içi olarak ayarlanır).

Tamamen Özel Arayüz

CSS geçersiz kılmaları yeterli değilse headless hook size tam kontrol sağlar. Tüm HTML’yi ve stillendirmeyi siz sağlarken, useThunderPhone ses oturumunu yönetir. Hook ayrıca dalga formları gibi sese tepki veren görselleştirmeler oluşturmak için audioLevelRef sağlar.

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>
  )
}

Sese tepki veren animasyonlara, özel düzenlere veya mevcut bir bileşen kitaplığıyla entegrasyona ihtiyacınız olduğunda headless hook doğru seçimdir. Hızlı tema ayarlamaları için CSS geçersiz kılmaları ve özel özellikler daha uygundur.

​Temalar

​CSS Özel Özellikleri

​Özel Özellikleri Geçersiz Kılma

​CSS Sınıfları

​Örnekler

​Props ile Özel Vurgu Rengi

​CSS ile Özel Renkler

​Özel Boyut

​Metin Etiketlerini Gizleme

​Temaya Özgü Geçersiz Kılmalar

​className ile Kapsam Belirleme

​Tamamen Özel Arayüz

Temalar

CSS Özel Özellikleri

Özel Özellikleri Geçersiz Kılma

CSS Sınıfları

Örnekler

Props ile Özel Vurgu Rengi

CSS ile Özel Renkler

Özel Boyut

Metin Etiketlerini Gizleme

Temaya Özgü Geçersiz Kılmalar

className ile Kapsam Belirleme

Tamamen Özel Arayüz