עיצוב - ThunderPhone

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

אפשרויות עיצוב אלה חלות על הווידג’ט המובנה שמוצג באמצעות רכיב React בשם ThunderPhoneWidget ושיטת ה-CDN ThunderPhone.mount(). אם אתם זקוקים לממשק משתמש מותאם אישית לחלוטין, השתמשו במקום זאת ב-וו ה-headless.

ערכות עיצוב

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

<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:

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

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

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

.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

הדרך הפשוטה ביותר למתג את הווידג’ט:

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

צבעים מותאמים אישית באמצעות CSS

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

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

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

/* 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. הסתירו אותו לחלוטין כדי להשאיר רק את צורת הגל והכפתורים:

.tp-meta {
  display: none;
}

לחלופין, הסתירו רכיבים נפרדים:

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

תווית מצב ההמתנה נמצאת ב-.tp-name/.tp-sub, ולא ב-.tp-status — הסתרת .tp-status בלבד עדיין מציגה את הכותרת כשהווידג’ט במצב המתנה.

דריסות ספציפיות לעיצוב

מקדו עיצוב מסוים באמצעות מחלקת העיצוב:

/* 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 כדי לתחום את הדריסות שלכם למופע וידג’ט מסוים:

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

לאחר מכן, מקדו את המחלקה הזו ב-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 ללא ממשק מעניק לכם שליטה מלאה. אתם מספקים את כל ה-HTML והעיצוב, בעוד useThunderPhone מטפל בשיחת הקול. ה-hook מספק גם את audioLevelRef לבניית המחשות חזותיות המגיבות לאודיו, כגון צורות גל.

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

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

​ערכות עיצוב

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

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

​מחלקות CSS

​דוגמאות

​צבע הדגשה מותאם אישית באמצעות Props

​צבעים מותאמים אישית באמצעות CSS

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

​הסתרת תוויות הטקסט

​דריסות ספציפיות לעיצוב

​תחימה באמצעות className

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

ערכות עיצוב

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

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

מחלקות CSS

דוגמאות

צבע הדגשה מותאם אישית באמצעות Props

צבעים מותאמים אישית באמצעות CSS

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

הסתרת תוויות הטקסט

דריסות ספציפיות לעיצוב

תחימה באמצעות className

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