> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thunderphone.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Penataan gaya

> Sesuaikan tampilan widget suara ThunderPhone dengan CSS

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.

<Note>
  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](/id/widget/headless-hook).
</Note>

***

## Tema

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

```tsx theme={null}
<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`:

```tsx theme={null}
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#e11d48"
/>
```

<Warning>
  `--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.
</Warning>

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:

```css theme={null}
.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:

```tsx theme={null}
<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:

```tsx theme={null}
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#059669"
/>
```

```css theme={null}
/* 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:

```css theme={null}
/* 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:

```css theme={null}
.tp-meta {
  display: none;
}
```

Atau sembunyikan bagian tertentu:

```css theme={null}
/* 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;
}
```

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

### Override Khusus Tema

Targetkan tema tertentu dengan kelas tema:

```css theme={null}
/* 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:

```tsx theme={null}
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  className="support-widget"
/>
```

Kemudian targetkan kelas tersebut dalam CSS Anda:

```css theme={null}
.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](/id/widget/headless-hook) 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.

```tsx theme={null}
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>
  )
}
```

<Tip>
  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.
</Tip>