---
title: "עיצוב"
description: "התאימו אישית את המראה של רכיב הקול של ThunderPhone באמצעות CSS"
---

הווידג'ט מוצג כסרגל בעל עיצוב זכוכיתי עם ערכות עיצוב בהירות וכהות מובנות. ההתאמה האישית זמינה בשלוש רמות: props לאפשרויות נפוצות, מאפיינים מותאמים אישית של CSS לעיצוב, ודריסות של מחלקות CSS לשליטה מלאה.

<Note>
  אפשרויות עיצוב אלה חלות על הווידג'ט המובנה שמוצג באמצעות רכיב React בשם `ThunderPhoneWidget` ושיטת ה-CDN `ThunderPhone.mount()`. אם אתם זקוקים לממשק משתמש מותאם אישית לחלוטין, השתמשו במקום זאת ב-[וו ה-headless](/he/widget/headless-hook).
</Note>

---

## ערכות עיצוב

ה-prop `theme` שולט בערכת הצבעים של הווידג'ט. הוא מחיל מחלקה `tp--light` או `tp--dark` על רכיב הבסיס של הווידג'ט:

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

| ערכת עיצוב | מחלקה | תיאור |
|-------|-------|-------------|
| `'light'` | `tp--light` | רקע בהיר עם טקסט כהה. ברירת המחדל. |
| `'dark'` | `tp--dark` | רקע כהה עם טקסט בהיר. |

שתי ערכות העיצוב משתמשות בעיצוב הסרגל הזכוכיתי עם טשטוש רקע ושקיפות עדינה.

---

## מאפיינים מותאמים אישית של CSS

הווידג'ט חושף מאפיינים מותאמים אישית של CSS (משתנים) שתוכלו לדרוס כדי לשנות צבעים בלי לגעת במחלקות בודדות. הם מוגדרים על ידי מחלקת ערכת הנושא (`.tp--light` או `.tp--dark`) שמוחלת על רכיב הבסיס `.tp-widget`:

| מאפיין | ברירת מחדל (בהיר) | ברירת מחדל (כהה) | תיאור |
|----------|-----------------|-----------------|-------------|
| `--tp-accent` | `#000` | `#fff` | צבע הדגשה: לחצן התחלה, עמודות צורת הגל, נקודת התחברות וטקסט סטטוס מחובר. מוגדר **באופן מוטבע** מתוך ה-prop `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` | מוגדר לעמעום במצב סרק; אינו מוחל כרגע על ידי אף כלל. |

### דריסת מאפיינים מותאמים אישית

הגדירו את צבע ההדגשה באמצעות ה-prop `primaryColor`:

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

<Warning>
  `--tp-accent` מוגדר כ-**סגנון מוטבע** מתוך ה-prop `primaryColor`, לכן דריסות בגיליון סגנונות של `--tp-accent` אינן משפיעות. שנו את צבע ההדגשה באמצעות ה-prop. ניתן לדרוס ב-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`, הפינה מוגדרת באמצעות ה-prop `position`, `z-index: 9999`). נושא את מחלקת ערכת הנושא ואת הגדרות הגופן הבסיסיות; ללא עיצוב חזותי משל עצמו. |
| `.tp--light` / `.tp--dark` | משני ערכת נושא | מוחלים על `.tp-widget` לצד ערכת הנושא; מגדירים את כל המאפיינים המותאמים אישית `--tp-*`. |
| `.tp-bar` | הסרגל | קפסולת הזכוכית עצמה: רקע, טשטוש רקע, גבול, רדיוס `99px`, צל. רוחב `300px`. |
| `.tp-meta` | בלוק טקסט | מכל לכל הטקסט — כותרת וכותרת משנה במצב המתנה, ושם הסוכן והסטטוס במהלך שיחה. |
| `.tp-name` | תווית ראשית | מציג את ה-prop `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

דרסו את המאפיינים המותאמים אישית כדי לקבל שליטה מלאה בצבעים. זכרו שצבע ההדגשה מגיע מה-prop `primaryColor`, ולא מ-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);
}
```

### גודל מותאם אישית

הגדילו או הקטינו את הווידג'ט באמצעות התאמת הממדים של הסרגל, הכפתור והטקסט:

```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, העבירו prop מסוג `className` כדי לתחום את הדריסות שלכם למופע וידג'ט מסוים:

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

כך תוכלו להציג כמה מופעי וידג'ט באותו עמוד, כל אחד עם עיצוב שונה. העניקו לכל מופע צבע הדגשה משלו באמצעות ה-prop `primaryColor` שלו (CSS אינו יכול לדרוס את `--tp-accent` -- הוא מוגדר בתוך השורה).

---

## ממשק משתמש מותאם אישית לחלוטין

אם דריסות CSS אינן מספיקות, ה-[hook ללא ממשק](/he/widget/headless-hook) מעניק לכם שליטה מלאה. אתם מספקים את כל ה-HTML והעיצוב, בעוד `useThunderPhone` מטפל בשיחת הקול. ה-hook מספק גם את `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>
  ה-hook ללא ממשק הוא הבחירה הנכונה כשאתם זקוקים לאנימציות המגיבות לאודיו, לפריסות מותאמות אישית או לשילוב בספריית רכיבים קיימת. דריסות CSS ומאפיינים מותאמים אישית מתאימים יותר להתאמות עיצוב מהירות.
</Tip>