Widget

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.

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"
/>

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:

Menimpa Properti Kustom#

Atur warna aksen melalui prop primaryColor:

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

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.

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

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