---
title: "Urembeshaji"
description: "Binafsisha mwonekano wa wijeti ya sauti ya ThunderPhone kwa CSS"
---

Wijeti huonyeshwa kama upau wenye athari ya glassmorphism na mandhari ya mwanga na giza yaliyojengewa ndani. Ubinafsishaji unapatikana katika viwango vitatu: props kwa chaguo za kawaida, sifa maalum za CSS kwa mandhari, na ubatilishaji wa madarasa ya CSS kwa udhibiti kamili.

<Note>
  Chaguo hizi za mtindo zinatumika kwa wijeti iliyoundwa mapema inayoonyeshwa na kijenzi cha React `ThunderPhoneWidget` na mbinu ya CDN `ThunderPhone.mount()`. Ikiwa unahitaji UI maalum kabisa, tumia [hook isiyo na kiolesura](/sw/widget/headless-hook) badala yake.
</Note>

---

## Mandhari

Prop ya `theme` hudhibiti mpangilio wa rangi wa wijeti. Huongeza darasa la `tp--light` au `tp--dark` kwenye mzizi wa wijeti:

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

| Mandhari | Darasa | Maelezo |
|-------|-------|-------------|
| `'light'` | `tp--light` | Mandharinyuma mepesi yenye maandishi meusi. Chaguo-msingi. |
| `'dark'` | `tp--dark` | Mandharinyuma meusi yenye maandishi mepesi. |

Mandhari yote mawili hutumia muundo wa upau wenye athari ya glassmorphism, wenye ukungu wa mandharinyuma na uwazi hafifu.

---

## Sifa Maalum za CSS

Wijeti hutoa sifa maalum za CSS (vigeu) unazoweza kubatilisha ili kubadilisha rangi bila kugusa madarasa binafsi. Zinafafanuliwa na darasa la mandhari (`.tp--light` au `.tp--dark`) linalotumika kwenye mzizi wa `.tp-widget`:

| Sifa | Chaguomsingi (mwanga) | Chaguomsingi (giza) | Maelezo |
|----------|-----------------|-----------------|-------------|
| `--tp-accent` | `#000` | `#fff` | Rangi ya msisitizo: kitufe cha kuanza, pau za umbo la mawimbi, nukta ya kuunganisha, maandishi ya hali ya kuunganishwa. Weka **ndani ya mstari** kutoka kwa prop ya `primaryColor`. |
| `--tp-bg` | `rgba(255, 255, 255, 0.82)` | `rgba(15, 15, 15, 0.85)` | Mandharinyuma ya upau (ina uwazi kiasi; inatiwa ukungu na `--tp-glass`). |
| `--tp-surface` | `rgba(0, 0, 0, 0.04)` | `rgba(255, 255, 255, 0.07)` | Mandharinyuma ya kitufe cha kunyamazisha. |
| `--tp-surface-hover` | `rgba(0, 0, 0, 0.07)` | `rgba(255, 255, 255, 0.12)` | Mandharinyuma ya kitufe cha kunyamazisha unapoelea juu yake. |
| `--tp-border` | `rgba(0, 0, 0, 0.08)` | `rgba(255, 255, 255, 0.1)` | Mipaka ya upau na kitufe. |
| `--tp-border-hover` | `rgba(0, 0, 0, 0.14)` | `rgba(255, 255, 255, 0.18)` | Rangi ya mpaka unapoelea juu yake. |
| `--tp-text` | `rgba(0, 0, 0, 0.88)` | `rgba(255, 255, 255, 0.95)` | Maandishi ya msingi (kichwa, jina la ejenti). |
| `--tp-text-2` | `rgba(0, 0, 0, 0.5)` | `rgba(255, 255, 255, 0.55)` | Maandishi ya pili (kichwa kidogo, mstari wa hali, kipima muda cha simu). |
| `--tp-glass` | `blur(32px) saturate(180%)` | `blur(32px) saturate(180%)` | `backdrop-filter` inayounda athari ya kioo kwenye upau. |
| `--tp-shadow` | mkusanyiko wa vivuli vya tabaka tatu | mkusanyiko wa vivuli vya tabaka tatu | `box-shadow` ya upau (tabaka za pete + karibu + mbali). |
| `--tp-shadow-hover` | mkusanyiko wa vivuli vya tabaka tatu | mkusanyiko wa vivuli vya tabaka tatu | Imetangazwa kwa ajili ya mwinuko unapoelea juu yake; kwa sasa haitumiki na kanuni yoyote. |
| `--tp-glow` | `inset 0 1px 0 0 rgba(255,255,255,0.5)` | `inset 0 1px 0 0 rgba(255,255,255,0.06)` | Mwangaza wa ndani wa juu unaowekwa kama tabaka kwenye kivuli cha upau. |
| `--tp-connected` | `#059669` | `#34d399` | Rangi ya kiashiria cha hali ya kuunganishwa (nukta ya hali). |
| `--tp-error` | `#dc2626` | `#fb7185` | Rangi ya maandishi ya hali ya hitilafu. |
| `--tp-end-bg` | `rgba(239, 68, 68, 0.08)` | `rgba(251, 113, 133, 0.12)` | Mandharinyuma ya kitufe cha kumaliza simu. |
| `--tp-end-color` | `#ef4444` | `#fb7185` | Rangi ya ikoni ya kitufe cha kumaliza simu. |
| `--tp-end-border` | `rgba(239, 68, 68, 0.12)` | `rgba(251, 113, 133, 0.15)` | Mpaka wa kitufe cha kumaliza simu. |
| `--tp-end-hover` | `rgba(239, 68, 68, 0.14)` | `rgba(251, 113, 133, 0.2)` | Mandharinyuma ya kitufe cha kumaliza simu unapoelea juu yake. |
| `--tp-idle-opacity` | `0.4` | `0.3` | Imetangazwa kwa ajili ya kupunguza mwangaza katika hali ya kutofanya kazi; kwa sasa haitumiki na kanuni yoyote. |

### Kubatilisha Sifa Maalum

Weka rangi ya msisitizo kupitia prop ya `primaryColor`:

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

<Warning>
  `--tp-accent` huwekwa kama **mtindo wa ndani ya mstari** kutoka kwa prop ya `primaryColor`, kwa hivyo ubatilishaji wa `--tp-accent` katika stylesheet hauna athari. Badilisha rangi ya msisitizo kwa prop. Kila sifa nyingine maalum inaweza kubatilishwa katika CSS.
</Warning>

Batilisha sifa nyingine maalum kwa CSS. Tumia kiteuzi cha madarasa mawili (`.tp-widget.tp--light` / `.tp-widget.tp--dark`) ili kanuni yako izidi uzito wa darasa la mandhari linalofafanua chaguomsingi, bila kujali mpangilio wa stylesheet:

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

---

## Madarasa ya CSS

Madarasa yote ya wijeti yana kiambishi awali `tp-` ili kuepuka migongano na mitindo yako iliyopo.

| Darasa | Kipengele | Maelezo |
|-------|---------|-------------|
| `.tp-widget` | Kifungashi cha msingi | Kontena yenye nafasi isiyobadilika (`position: fixed`, kona huwekwa na prop ya `position`, `z-index: 9999`). Hubeba darasa la mandhari na mipangilio ya msingi ya fonti; haina mwonekano wake wa ziada. |
| `.tp--light` / `.tp--dark` | Virekebishaji vya mandhari | Hutumika kwenye `.tp-widget` pamoja na mandhari; hufafanua sifa zote maalum za `--tp-*`. |
| `.tp-bar` | Upau | Kidonge cha glassmorphism chenyewe: mandharinyuma, ukungu wa mandharinyuma, mpaka, radius ya `99px`, kivuli. Upana wa `300px`. |
| `.tp-meta` | Kizuizi cha maandishi | Kontena la maandishi yote -- kichwa na manukuu wakati haifanyi kazi, jina la ejenti na hali wakati wa simu. |
| `.tp-name` | Lebo ya msingi | Huonyesha prop ya `title` wakati haifanyi kazi, na jina la ejenti aliyeunganishwa (ikirejea `title`) wakati wa simu. |
| `.tp-sub` | Manukuu | Mstari wa "Inapatikana sasa" unaoonyeshwa wakati haifanyi kazi. |
| `.tp-start` | Kitufe cha simu wakati haifanyi kazi | Kitufe cha mviringo cha kuanzisha chenye rangi kuu (42px). Hutumia `--tp-accent` kama mandharinyuma. |
| `.tp-dot` | Nukta ya kuunganisha | Nukta yenye rangi kuu inayodunda inayoonyeshwa upande wa kushoto wa upau wakati wa kuunganisha. |
| `.tp-wave` / `.tp-wave--idle` | Umbo la mawimbi | Umbo la mawimbi la pau tano. `--idle` huongeza uhuishaji wa polepole wa kupumua; wakati wa simu pau huitikia sauti. |
| `.tp-button` | Vitufe vya wakati wa simu | Mtindo wa msingi wa vidhibiti vya wakati wa simu (42px, pembe za mviringo 12px). |
| `.tp-button-group` | Mstari wa vitufe | Hufunga vitufe vya kunyamazisha na kumaliza wakati wa simu. |
| `.tp-button--start` | Toleo la kitufe cha kuunganisha | Toleo lenye rangi kuu linaloonyeshwa simu inapoanza. |
| `.tp-button--mute` | Kigeuzi cha kunyamazisha | Hunyamazisha/huwasha maikrofoni wakati wa simu. Hutumia `--tp-surface`. |
| `.tp-button--end` | Kitufe cha kumaliza simu | Hukata simu. Hutumia paleti ya `--tp-end-*`. |
| `.tp-button--loading` | Kirekebishaji cha kupakia | Hupunguza mwangaza wa kitufe wakati wa kuunganisha. |
| `.tp-icon` / `.tp-spin` | Aikoni | Ukubwa wa aikoni za vitufe; `tp-spin` huweka uhuishaji kwenye kiashiria cha kuunganisha kinachozunguka. |
| `.tp-status` | Kizuizi cha hali wakati wa simu | Hufunga mstari wa hali wakati wa hali za kuunganisha/kuunganishwa/hitilafu. |
| `.tp-status__text` | Mstari wa hali | Maandishi ya hali ya muunganisho (kwa mfano, "Inaunganisha...") au kipima muda cha simu. Hupata `.tp-status--connected` (rangi kuu) au `.tp-status--error` (rangi ya hitilafu) kulingana na hali. |
| `.tp-status__name` | Nafasi ya jina la ejenti | Sehemu ya kizuizi cha hali, lakini haionyeshwi katika mpangilio wa sasa wa upau -- jina la ejenti huonekana kwenye `.tp-name` badala yake. |
| `.tp-status__dot` | Nukta ya hali | Mtindo wa nukta ya hali ya kuunganishwa inayodunda (hutumia `--tp-connected`). |

---

## Mifano

### Rangi Maalum ya Msisitizo kupitia Props

Njia rahisi zaidi ya kuweka chapa kwenye wijeti:

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

### Rangi Maalum kupitia CSS

Batilisha sifa maalum ili kudhibiti rangi kikamilifu. Kumbuka kwamba rangi ya msisitizo hutoka kwenye prop ya `primaryColor`, si CSS:

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

### Ukubwa Maalum

Fanya wijeti iwe kubwa au ndogo zaidi kwa kurekebisha vipimo vya upau, kitufe na maandishi:

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

### Ficha Lebo za Maandishi

Maandishi yote ya wijeti yapo katika `.tp-meta`. Yafiche yote ili kubakiza tu umbo la mawimbi na vitufe:

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

Au ficha sehemu mahususi:

```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>
  Lebo ya hali ya kusubiri ipo katika `.tp-name`/`.tp-sub`, si `.tp-status` -- kuficha `.tp-status` pekee bado huonyesha kichwa wakati wijeti iko katika hali ya kusubiri.
</Note>

### Ubatilishaji Mahususi wa Mandhari

Lenga mandhari mahususi kwa kutumia darasa la mandhari:

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

---

## Kuweka Wigo kwa className

Unapotumia kipengele cha React, pitisha prop ya `className` ili kuweka wigo wa ubatilishaji wako kwa instancia mahususi ya wijeti:

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

Kisha lenga darasa hilo katika CSS yako:

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

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

Hii hukuruhusu kuwa na instancia nyingi za wijeti kwenye ukurasa mmoja zenye mitindo tofauti. Ipe kila instancia rangi yake ya msisitizo kupitia prop yake ya `primaryColor` (CSS haiwezi kubatilisha `--tp-accent` -- huwekwa inline).

---

## UI Maalum Kikamilifu

Ikiwa ubatilishaji wa CSS hautoshi, [hook isiyo na kiolesura](/sw/widget/headless-hook) hukupa udhibiti kamili. Unatoa HTML na mtindo wote huku `useThunderPhone` ikishughulikia kipindi cha sauti. Hook pia hutoa `audioLevelRef` kwa ajili ya kuunda vielelezo vinavyoitikia sauti kama maumbo ya mawimbi.

```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>
  Hook isiyo na kiolesura ndiyo chaguo sahihi unapohitaji animasheni zinazoitikia sauti, miundo maalum, au ujumuishaji katika maktaba ya vipengele iliyopo. Ubatilishaji wa CSS na sifa maalum ni bora zaidi kwa marekebisho ya haraka ya mandhari.
</Tip>