Penataan gaya - ThunderPhone

Widget dirender sebagai bilah bergaya glassmorphism dengan tema terang dan gelap bawaan. Kustomisasi tersedia dalam tiga tingkat: prop untuk opsi umum, properti kustom CSS untuk tema, dan override class CSS untuk kontrol penuh.

Opsi gaya ini berlaku untuk widget siap pakai yang dirender oleh komponen React ThunderPhoneWidget dan metode CDN ThunderPhone.mount(). Jika Anda memerlukan UI yang sepenuhnya kustom, gunakan hook headless.

Tema

Prop theme mengontrol skema warna widget. Prop ini menerapkan class tp--light atau tp--dark ke elemen akar widget:

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

Tema	Class	Deskripsi
`'light'`	`tp--light`	Latar belakang terang dengan teks gelap. Default.
`'dark'`	`tp--dark`	Latar belakang gelap dengan teks terang.

Kedua tema menggunakan desain bilah bergaya glassmorphism dengan blur latar belakang dan transparansi halus.

Properti Kustom CSS

Widget mengekspos properti kustom CSS (variabel) yang dapat Anda timpa untuk mengubah warna tanpa menyentuh setiap class. Properti ini ditentukan oleh class tema (.tp--light atau .tp--dark) yang diterapkan pada root .tp-widget:

Properti	Default (terang)	Default (gelap)	Deskripsi
`--tp-accent`	`#000`	`#fff`	Warna aksen: tombol mulai, batang waveform, titik penghubung, teks status terhubung. Ditentukan secara inline dari prop `primaryColor`.
`--tp-bg`	`rgba(255, 255, 255, 0.82)`	`rgba(15, 15, 15, 0.85)`	Latar belakang bar (translusen; diburamkan oleh `--tp-glass`).
`--tp-surface`	`rgba(0, 0, 0, 0.04)`	`rgba(255, 255, 255, 0.07)`	Latar belakang tombol bisukan.
`--tp-surface-hover`	`rgba(0, 0, 0, 0.07)`	`rgba(255, 255, 255, 0.12)`	Latar belakang hover tombol bisukan.
`--tp-border`	`rgba(0, 0, 0, 0.08)`	`rgba(255, 255, 255, 0.1)`	Batas bar dan tombol.
`--tp-border-hover`	`rgba(0, 0, 0, 0.14)`	`rgba(255, 255, 255, 0.18)`	Warna batas saat hover.
`--tp-text`	`rgba(0, 0, 0, 0.88)`	`rgba(255, 255, 255, 0.95)`	Teks utama (judul, nama agen).
`--tp-text-2`	`rgba(0, 0, 0, 0.5)`	`rgba(255, 255, 255, 0.55)`	Teks sekunder (subjudul, baris status, timer panggilan).
`--tp-glass`	`blur(32px) saturate(180%)`	`blur(32px) saturate(180%)`	`backdrop-filter` yang menciptakan efek kaca pada bar.
`--tp-shadow`	tumpukan bayangan tiga lapisan	tumpukan bayangan tiga lapisan	`box-shadow` bar (lapisan cincin + dekat + jauh).
`--tp-shadow-hover`	tumpukan bayangan tiga lapisan	tumpukan bayangan tiga lapisan	Dideklarasikan untuk elevasi saat hover; saat ini tidak diterapkan oleh aturan apa pun.
`--tp-glow`	`inset 0 1px 0 0 rgba(255,255,255,0.5)`	`inset 0 1px 0 0 rgba(255,255,255,0.06)`	Sorotan atas bagian dalam yang dilapiskan pada bayangan bar.
`--tp-connected`	`#059669`	`#34d399`	Warna indikator status terhubung (titik status).
`--tp-error`	`#dc2626`	`#fb7185`	Warna teks status keadaan error.
`--tp-end-bg`	`rgba(239, 68, 68, 0.08)`	`rgba(251, 113, 133, 0.12)`	Latar belakang tombol akhiri panggilan.
`--tp-end-color`	`#ef4444`	`#fb7185`	Warna ikon tombol akhiri panggilan.
`--tp-end-border`	`rgba(239, 68, 68, 0.12)`	`rgba(251, 113, 133, 0.15)`	Batas tombol akhiri panggilan.
`--tp-end-hover`	`rgba(239, 68, 68, 0.14)`	`rgba(251, 113, 133, 0.2)`	Latar belakang hover tombol akhiri panggilan.
`--tp-idle-opacity`	`0.4`	`0.3`	Dideklarasikan untuk peredupan keadaan idle; saat ini tidak diterapkan oleh aturan apa pun.

Menimpa Properti Kustom

Atur warna aksen melalui prop primaryColor:

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

--tp-accent ditetapkan sebagai gaya inline dari prop primaryColor, sehingga penimpaan --tp-accent melalui stylesheet tidak berpengaruh. Ubah aksen dengan prop tersebut. Setiap properti kustom lainnya dapat ditimpa dalam CSS.

Timpa properti kustom lainnya dengan CSS. Gunakan selector dua class (.tp-widget.tp--light / .tp-widget.tp--dark) agar aturan Anda memiliki prioritas lebih tinggi daripada class tema yang menentukan default, terlepas dari urutan stylesheet:

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

Kelas CSS

Semua kelas widget diawali dengan tp- untuk menghindari konflik dengan gaya yang sudah ada.

Kelas	Elemen	Deskripsi
`.tp-widget`	Wrapper root	Container berposisi tetap (`position: fixed`, sudut ditetapkan oleh prop `position`, `z-index: 9999`). Memuat kelas tema dan pengaturan font dasar; tidak memiliki elemen visual sendiri.
`.tp--light` / `.tp--dark`	Modifier tema	Diterapkan pada `.tp-widget` bersama tema; menentukan semua properti kustom `--tp-*`.
`.tp-bar`	Bar	Elemen pil glassmorphism itu sendiri: latar belakang, blur latar, border, radius `99px`, bayangan. Lebar `300px`.
`.tp-meta`	Blok teks	Container untuk semua teks — judul dan subjudul saat siaga, nama agen dan status selama panggilan.
`.tp-name`	Label utama	Menampilkan prop `title` saat siaga, serta nama agen yang terhubung (kembali ke `title` jika tidak tersedia) selama panggilan.
`.tp-sub`	Subjudul	Baris “Tersedia sekarang” yang ditampilkan saat siaga.
`.tp-start`	Tombol panggilan saat siaga	Tombol mulai beraksen berbentuk lingkaran (42px). Menggunakan `--tp-accent` sebagai latar belakang.
`.tp-dot`	Titik penghubung	Titik aksen berdenyut yang ditampilkan di sebelah kiri bar saat menghubungkan.
`.tp-wave` / `.tp-wave--idle`	Bentuk gelombang	Bentuk gelombang lima batang. `--idle` menambahkan animasi bernapas yang lambat; selama panggilan, batang merespons audio.
`.tp-button`	Tombol saat panggilan	Gaya dasar untuk kontrol saat panggilan (42px, sudut membulat 12px).
`.tp-button-group`	Baris tombol	Membungkus tombol bisukan dan akhiri selama panggilan.
`.tp-button--start`	Varian tombol hubungkan	Varian berwarna aksen yang ditampilkan saat panggilan dimulai.
`.tp-button--mute`	Tombol bisukan	Membisukan/mengaktifkan suara mikrofon selama panggilan. Menggunakan `--tp-surface`.
`.tp-button--end`	Tombol akhiri panggilan	Mengakhiri panggilan. Menggunakan palet `--tp-end-*`.
`.tp-button--loading`	Modifier pemuatan	Meredupkan tombol saat menghubungkan.
`.tp-icon` / `.tp-spin`	Ikon	Pengaturan ukuran ikon tombol; `tp-spin` menganimasikan spinner penghubung.
`.tp-status`	Blok status saat panggilan	Membungkus baris status selama status menghubungkan/terhubung/error.
`.tp-status__text`	Baris status	Teks status koneksi (misalnya, “Menghubungkan…”) atau timer panggilan. Mendapatkan `.tp-status--connected` (warna aksen) atau `.tp-status--error` (warna error) sesuai status.
`.tp-status__name`	Slot nama agen	Bagian dari blok status, tetapi tidak dirender dalam tata letak bar saat ini — nama agen ditampilkan di `.tp-name`.
`.tp-status__dot`	Titik status	Gaya titik status terhubung yang berdenyut (menggunakan `--tp-connected`).

Contoh

Aksen Kustom melalui Prop

Cara paling sederhana untuk memberi identitas merek pada widget:

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

Warna Kustom melalui CSS

Timpa properti kustom untuk kontrol warna penuh. Ingat bahwa aksen berasal dari prop primaryColor, bukan CSS:

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

Ukuran Kustom

Buat widget lebih besar atau lebih kecil dengan menyesuaikan dimensi bilah, tombol, dan teks:

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

Sembunyikan Label Teks

Semua teks widget berada di .tp-meta. Sembunyikan seluruhnya agar hanya waveform dan tombol yang tersisa:

.tp-meta {
  display: none;
}

Atau sembunyikan bagian tertentu:

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

Label saat idle berada di .tp-name/.tp-sub, bukan .tp-status — menyembunyikan .tp-status saja tetap menampilkan judul saat widget idle.

Override Khusus Tema

Targetkan tema tertentu dengan kelas tema:

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

Pembatasan Cakupan dengan className

Saat menggunakan komponen React, teruskan prop className untuk membatasi cakupan override Anda ke instance widget tertentu:

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

Kemudian targetkan kelas tersebut dalam CSS Anda:

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

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

Ini memungkinkan Anda memiliki beberapa instance widget pada halaman yang sama dengan gaya berbeda. Berikan setiap instance aksennya sendiri melalui prop primaryColor (CSS tidak dapat menimpa --tp-accent — properti ini ditetapkan secara inline).

UI Sepenuhnya Kustom

Jika override CSS belum cukup, hook headless memberi Anda kontrol penuh. Anda menyediakan semua HTML dan styling, sementara useThunderPhone menangani sesi suara. Hook ini juga menyediakan audioLevelRef untuk membuat visualisasi reaktif terhadap audio seperti waveform.

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

Hook headless adalah pilihan tepat saat Anda memerlukan animasi reaktif terhadap audio, tata letak kustom, atau integrasi ke dalam library komponen yang sudah ada. Override CSS dan properti kustom lebih baik untuk penyesuaian tema yang cepat.

​Tema

​Properti Kustom CSS

​Menimpa Properti Kustom

​Kelas CSS

​Contoh

​Aksen Kustom melalui Prop

​Warna Kustom melalui CSS

​Ukuran Kustom

​Sembunyikan Label Teks

​Override Khusus Tema

​Pembatasan Cakupan dengan className

​UI Sepenuhnya Kustom

Tema

Properti Kustom CSS

Menimpa Properti Kustom

Kelas CSS

Contoh

Aksen Kustom melalui Prop

Warna Kustom melalui CSS

Ukuran Kustom

Sembunyikan Label Teks

Override Khusus Tema

Pembatasan Cakupan dengan className

UI Sepenuhnya Kustom