---
title: "സ്റ്റൈലിംഗ്"
description: "CSS ഉപയോഗിച്ച് ThunderPhone വോയ്‌സ് വിജറ്റിന്റെ രൂപഭാവം ഇഷ്ടാനുസൃതമാക്കുക"
---

വിഡ്ജറ്റ് ഉൾനിർമ്മിത ലൈറ്റ്, ഡാർക്ക് തീമുകളുള്ള ഗ്ലാസ്മോർഫിക് ബാറായി റെൻഡർ ചെയ്യുന്നു. കസ്റ്റമൈസേഷൻ മൂന്ന് തലങ്ങളിൽ ലഭ്യമാണ്: പൊതുവായ ഓപ്ഷനുകൾക്കായുള്ള പ്രോപ്സ്, തീമിംഗിനായുള്ള CSS കസ്റ്റം പ്രോപ്പർട്ടികൾ, പൂർണ്ണ നിയന്ത്രണത്തിനായുള്ള CSS ക്ലാസ് ഓവർറൈഡുകൾ.

<Note>
  ഈ സ്റ്റൈലിംഗ് ഓപ്ഷനുകൾ `ThunderPhoneWidget` React കോംപോണന്റും `ThunderPhone.mount()` CDN മെത്തഡും റെൻഡർ ചെയ്യുന്ന മുൻകൂട്ടി നിർമിച്ച വിഡ്ജറ്റിന് ബാധകമാണ്. നിങ്ങൾക്ക് പൂർണ്ണമായും കസ്റ്റം UI ആവശ്യമുണ്ടെങ്കിൽ, പകരം [ഹെഡ്‌ലെസ് ഹുക്ക്](/ml/widget/headless-hook) ഉപയോഗിക്കുക.
</Note>

---

## തീമുകൾ

`theme` പ്രോപ് വിഡ്ജറ്റിന്റെ കളർ സ്കീം നിയന്ത്രിക്കുന്നു. ഇത് വിഡ്ജറ്റ് റൂട്ടിൽ `tp--light` അല്ലെങ്കിൽ `tp--dark` ക്ലാസ് പ്രയോഗിക്കുന്നു:

```tsx
<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-bg` | `rgba(255, 255, 255, 0.82)` | `rgba(15, 15, 15, 0.85)` | ബാറിന്റെ പശ്ചാത്തലം (അർദ്ധസുതാര്യം; `--tp-glass` ഉപയോഗിച്ച് ബ്ലർ ചെയ്യുന്നു). |
| `--tp-surface` | `rgba(0, 0, 0, 0.04)` | `rgba(255, 255, 255, 0.07)` | മ്യൂട്ട് ബട്ടൺ പശ്ചാത്തലം. |
| `--tp-surface-hover` | `rgba(0, 0, 0, 0.07)` | `rgba(255, 255, 255, 0.12)` | മ്യൂട്ട് ബട്ടൺ ഹോവർ പശ്ചാത്തലം. |
| `--tp-border` | `rgba(0, 0, 0, 0.08)` | `rgba(255, 255, 255, 0.1)` | ബാർ, ബട്ടൺ ബോർഡറുകൾ. |
| `--tp-border-hover` | `rgba(0, 0, 0, 0.14)` | `rgba(255, 255, 255, 0.18)` | ഹോവറിലെ ബോർഡർ നിറം. |
| `--tp-text` | `rgba(0, 0, 0, 0.88)` | `rgba(255, 255, 255, 0.95)` | പ്രാഥമിക ടെക്സ്റ്റ് (തലക്കെട്ട്, ഏജന്റ് പേര്). |
| `--tp-text-2` | `rgba(0, 0, 0, 0.5)` | `rgba(255, 255, 255, 0.55)` | ദ്വിതീയ ടെക്സ്റ്റ് (ഉപതലക്കെട്ട്, സ്റ്റാറ്റസ് ലൈൻ, കോൾ ടൈമർ). |
| `--tp-glass` | `blur(32px) saturate(180%)` | `blur(32px) saturate(180%)` | ബാറിൽ ഗ്ലാസ് ഇഫക്റ്റ് സൃഷ്ടിക്കുന്ന `backdrop-filter`. |
| `--tp-shadow` | മൂന്ന്-ലെയർ ഷാഡോ സ്റ്റാക്ക് | മൂന്ന്-ലെയർ ഷാഡോ സ്റ്റാക്ക് | ബാറിന്റെ `box-shadow` (റിംഗ് + നിയർ + ഫാർ ലെയറുകൾ). |
| `--tp-shadow-hover` | മൂന്ന്-ലെയർ ഷാഡോ സ്റ്റാക്ക് | മൂന്ന്-ലെയർ ഷാഡോ സ്റ്റാക്ക് | ഹോവർ എലിവേഷനായി പ്രഖ്യാപിച്ചിരിക്കുന്നു; നിലവിൽ ഒരു റൂളും പ്രയോഗിക്കുന്നില്ല. |
| `--tp-glow` | `inset 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-bg` | `rgba(239, 68, 68, 0.08)` | `rgba(251, 113, 133, 0.12)` | കോൾ അവസാനിപ്പിക്കൽ ബട്ടൺ പശ്ചാത്തലം. |
| `--tp-end-color` | `#ef4444` | `#fb7185` | കോൾ അവസാനിപ്പിക്കൽ ബട്ടൺ ഐക്കൺ നിറം. |
| `--tp-end-border` | `rgba(239, 68, 68, 0.12)` | `rgba(251, 113, 133, 0.15)` | കോൾ അവസാനിപ്പിക്കൽ ബട്ടൺ ബോർഡർ. |
| `--tp-end-hover` | `rgba(239, 68, 68, 0.14)` | `rgba(251, 113, 133, 0.2)` | കോൾ അവസാനിപ്പിക്കൽ ബട്ടൺ ഹോവർ പശ്ചാത്തലം. |
| `--tp-idle-opacity` | `0.4` | `0.3` | ഐഡിൽ-സ്റ്റേറ്റ് ഡിമ്മിംഗിനായി പ്രഖ്യാപിച്ചിരിക്കുന്നു; നിലവിൽ ഒരു റൂളും പ്രയോഗിക്കുന്നില്ല. |

### കസ്റ്റം പ്രോപ്പർട്ടികൾ ഓവർറൈഡ് ചെയ്യുക

`primaryColor` പ്രോപ് ഉപയോഗിച്ച് ആക്സെന്റ് നിറം സജ്ജീകരിക്കുക:

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

<Warning>
  `--tp-accent` എന്നത് `primaryColor` പ്രോപ്പിൽ നിന്ന് **ഇൻലൈൻ സ്റ്റൈൽ** ആയി സജ്ജീകരിക്കുന്നതിനാൽ, `--tp-accent`-ന്റെ സ്റ്റൈൽഷീറ്റ് ഓവർറൈഡുകൾക്ക് ഫലമുണ്ടാകില്ല. പ്രോപ് ഉപയോഗിച്ച് ആക്സെന്റ് മാറ്റുക. മറ്റെല്ലാ കസ്റ്റം പ്രോപ്പർട്ടികളും CSS-ൽ ഓവർറൈഡ് ചെയ്യാം.
</Warning>

മറ്റുള്ള കസ്റ്റം പ്രോപ്പർട്ടികൾ CSS ഉപയോഗിച്ച് ഓവർറൈഡ് ചെയ്യുക. സ്റ്റൈൽഷീറ്റ് ക്രമം പരിഗണിക്കാതെ, ഡിഫോൾട്ടുകൾ നിർവചിക്കുന്ന തീം ക്ലാസിനേക്കാൾ നിങ്ങളുടെ റൂളിന് മുൻഗണന ലഭിക്കാൻ രണ്ട്-ക്ലാസ് സെലക്ടർ (`.tp-widget.tp--light` / `.tp-widget.tp--dark`) ഉപയോഗിക്കുക:

```css
.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` പ്രോപ്പ് നിർണയിക്കുന്ന കോർണർ, `z-index: 9999`). തീം ക്ലാസും അടിസ്ഥാന ഫോണ്ട് ക്രമീകരണങ്ങളും ഉൾക്കൊള്ളുന്നു; സ്വന്തമായി ദൃശ്യ ക്രോം ഇല്ല. |
| `.tp--light` / `.tp--dark` | തീം മോഡിഫയറുകൾ | തീമിനൊപ്പം `.tp-widget`-ൽ പ്രയോഗിക്കുന്നു; എല്ലാ `--tp-*` കസ്റ്റം പ്രോപ്പർട്ടികളും നിർവചിക്കുന്നു. |
| `.tp-bar` | ബാർ | ഗ്ലാസ്മോർഫിക് പിൽ തന്നെ: പശ്ചാത്തലം, ബാക്ക്ഡ്രോപ്പ് ബ്ലർ, ബോർഡർ, `99px` റേഡിയസ്, ഷാഡോ. `300px` വീതി. |
| `.tp-meta` | ടെക്സ്റ്റ് ബ്ലോക്ക് | എല്ലാ ടെക്സ്റ്റുകൾക്കുമുള്ള കണ്ടെയ്‌നർ -- നിഷ്‌ക്രിയമായിരിക്കുമ്പോൾ ടൈറ്റിലും സബ്‌ടൈറ്റിലും, കോളിനിടെ ഏജന്റിന്റെ പേരും സ്റ്റാറ്റസും. |
| `.tp-name` | പ്രാഥമിക ലേബൽ | നിഷ്‌ക്രിയമായിരിക്കുമ്പോൾ `title` പ്രോപ്പ് കാണിക്കുന്നു; കോളിനിടെ കണക്റ്റ് ചെയ്ത ഏജന്റിന്റെ പേര് കാണിക്കുന്നു (`title`-ലേക്ക് ഫാൾബാക്കോടെ). |
| `.tp-sub` | സബ്‌ടൈറ്റിൽ | നിഷ്‌ക്രിയമായിരിക്കുമ്പോൾ കാണിക്കുന്ന "ഇപ്പോൾ ലഭ്യമാണ്" വരി. |
| `.tp-start` | നിഷ്‌ക്രിയ കോൾ ബട്ടൺ | വൃത്താകൃതിയിലുള്ള ആക്സെന്റ് ആരംഭ ബട്ടൺ (42px). പശ്ചാത്തലമായി `--tp-accent` ഉപയോഗിക്കുന്നു. |
| `.tp-dot` | കണക്റ്റിംഗ് ഡോട്ട് | കണക്റ്റ് ചെയ്യുമ്പോൾ ബാറിന്റെ ഇടതുവശത്ത് കാണിക്കുന്ന പൾസ് ചെയ്യുന്ന ആക്സെന്റ് ഡോട്ട്. |
| `.tp-wave` / `.tp-wave--idle` | വേവ്ഫോം | അഞ്ച്-ബാർ വേവ്ഫോം. `--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` | സ്റ്റാറ്റസ് വരി | കണക്ഷൻ സ്റ്റേറ്റ് ടെക്സ്റ്റ് (ഉദാഹരണത്തിന്, "കണക്റ്റ് ചെയ്യുന്നു...") അല്ലെങ്കിൽ കോൾ ടൈമർ. സ്റ്റേറ്റ് അനുസരിച്ച് `.tp-status--connected` (ആക്സെന്റ് നിറം) അല്ലെങ്കിൽ `.tp-status--error` (എറർ നിറം) ലഭിക്കുന്നു. |
| `.tp-status__name` | ഏജന്റ്-നെയിം സ്ലോട്ട് | സ്റ്റാറ്റസ് ബ്ലോക്കിന്റെ ഭാഗമാണ്, പക്ഷേ നിലവിലെ ബാർ ലേഔട്ടിൽ റെൻഡർ ചെയ്യുന്നില്ല -- പകരം ഏജന്റിന്റെ പേര് `.tp-name`-ൽ കാണിക്കുന്നു. |
| `.tp-status__dot` | സ്റ്റാറ്റസ് ഡോട്ട് | പൾസ് ചെയ്യുന്ന കണക്റ്റഡ്-സ്റ്റേറ്റ് ഡോട്ട് സ്റ്റൈൽ (`--tp-connected` ഉപയോഗിക്കുന്നു). |

---

## ഉദാഹരണങ്ങൾ

### Props ഉപയോഗിച്ചുള്ള ഇഷ്ടാനുസൃത ആക്സെന്റ്

വിഡ്ജറ്റിന് ബ്രാൻഡിംഗ് നൽകാനുള്ള ഏറ്റവും ലളിതമായ മാർഗം:

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

### CSS ഉപയോഗിച്ചുള്ള ഇഷ്ടാനുസൃത നിറങ്ങൾ

പൂർണ്ണ വർണ നിയന്ത്രണത്തിനായി കസ്റ്റം പ്രോപ്പർട്ടികൾ ഓവർറൈഡ് ചെയ്യുക. ആക്സെന്റ് CSS-ൽ നിന്നല്ല, `primaryColor` prop-ൽ നിന്നാണ് വരുന്നതെന്ന് ഓർക്കുക:

```tsx
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#059669"
/>
```

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

### ഇഷ്ടാനുസൃത വലുപ്പം

ബാർ, ബട്ടൺ, ടെക്സ്റ്റ് അളവുകൾ ക്രമീകരിച്ച് വിഡ്ജറ്റിനെ വലുതോ ചെറുതോ ആക്കുക:

```css
/* 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`-ലാണ്. വേവ്ഫോമും ബട്ടണുകളും മാത്രം നിലനിർത്താൻ ഇത് പൂർണമായി മറയ്ക്കുക:

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

അല്ലെങ്കിൽ ഓരോ ഭാഗങ്ങളും മറയ്ക്കുക:

```css
/* 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>
  നിഷ്ക്രിയ ലേബൽ `.tp-name`/`.tp-sub`-ലാണ്, `.tp-status`-ലല്ല -- `.tp-status` മാത്രം മറച്ചാലും വിഡ്ജറ്റ് നിഷ്ക്രിയമായിരിക്കുമ്പോൾ ശീർഷകം കാണിക്കും.
</Note>

### തീം-നിർദ്ദിഷ്ട ഓവർറൈഡുകൾ

തീം ക്ലാസ് ഉപയോഗിച്ച് ഒരു നിർദ്ദിഷ്ട തീമിനെ ലക്ഷ്യമിടുക:

```css
/* 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` prop നൽകുക:

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

തുടർന്ന് CSS-ൽ ആ ക്ലാസിനെ ലക്ഷ്യമിടുക:

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

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

ഇത് ഒരേ പേജിൽ വ്യത്യസ്ത സ്റ്റൈലുകളുള്ള ഒന്നിലധികം വിഡ്ജറ്റ് ഇൻസ്റ്റൻസുകൾ ഉപയോഗിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഓരോ ഇൻസ്റ്റൻസിനും അതിന്റെ `primaryColor` prop വഴി സ്വന്തം ആക്സെന്റ് നൽകുക (CSS-ന് `--tp-accent` ഓവർറൈഡ് ചെയ്യാനാകില്ല -- അത് ഇൻലൈൻ ആയി സജ്ജീകരിച്ചിരിക്കുന്നു).

---

## പൂർണമായും ഇഷ്ടാനുസൃത UI

CSS ഓവർറൈഡുകൾ മതിയാകുന്നില്ലെങ്കിൽ, [ഹെഡ്‌ലെസ് ഹുക്ക്](/ml/widget/headless-hook) നിങ്ങൾക്ക് പൂർണ്ണ നിയന്ത്രണം നൽകുന്നു. `useThunderPhone` വോയ്‌സ് സെഷൻ കൈകാര്യം ചെയ്യുമ്പോൾ, എല്ലാ HTML-ഉം സ്റ്റൈലിംഗും നിങ്ങൾ നൽകുന്നു. വേവ്ഫോമുകൾ പോലുള്ള ഓഡിയോ-റിയാക്ടീവ് ദൃശ്യവത്കരണങ്ങൾ നിർമ്മിക്കുന്നതിനായി ഹുക്ക് `audioLevelRef`-ഉം നൽകുന്നു.

```tsx
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>
  ഓഡിയോ-റിയാക്ടീവ് ആനിമേഷനുകൾ, ഇഷ്ടാനുസൃത ലേഔട്ടുകൾ, അല്ലെങ്കിൽ നിലവിലുള്ള കോംപോണന്റ് ലൈബ്രറിയുമായുള്ള സംയോജനം ആവശ്യമുള്ളപ്പോൾ ഹെഡ്‌ലെസ് ഹുക്ക് ശരിയായ തിരഞ്ഞെടുപ്പാണ്. വേഗത്തിലുള്ള തീമിംഗ് ക്രമീകരണങ്ങൾക്ക് CSS ഓവർറൈഡുകളും കസ്റ്റം പ്രോപ്പർട്ടികളും കൂടുതൽ അനുയോജ്യമാണ്.
</Tip>