స్టైలింగ్

విడ్జెట్ అంతర్నిర్మిత లైట్ మరియు డార్క్ థీమ్‌లతో గ్లాస్‌మార్ఫిక్ బార్‌గా రెండర్ అవుతుంది. అనుకూలీకరణ మూడు స్థాయిల్లో అందుబాటులో ఉంది: సాధారణ ఎంపికల కోసం ప్రాప్స్, థీమింగ్ కోసం CSS కస్టమ్ ప్రాపర్టీలు, మరియు పూర్తి నియంత్రణ కోసం CSS క్లాస్ ఓవర్‌రైడ్‌లు.

థీమ్‌లు

theme ప్రాప్ విడ్జెట్ రంగుల పథకాన్ని నియంత్రిస్తుంది. ఇది విడ్జెట్ రూట్‌కు tp--light లేదా tp--dark క్లాస్‌ను వర్తింపజేస్తుంది:

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

రెండు థీమ్‌లు బ్యాక్‌డ్రాప్ బ్లర్ మరియు సూక్ష్మ పారదర్శకతతో గ్లాస్‌మార్ఫిక్ బార్ డిజైన్‌ను ఉపయోగిస్తాయి.

CSS అనుకూల ప్రాపర్టీలు

ప్రతి క్లాస్‌ను విడిగా మార్చాల్సిన అవసరం లేకుండా రంగులను మార్చడానికి మీరు ఓవర్‌రైడ్ చేయగల CSS అనుకూల ప్రాపర్టీలను (వేరియబుల్స్) విడ్జెట్ అందిస్తుంది. ఇవి .tp-widget రూట్‌కు వర్తించే థీమ్ క్లాస్ (.tp--light లేదా .tp--dark) ద్వారా నిర్వచించబడతాయి:

అనుకూల ప్రాపర్టీలను ఓవర్‌రైడ్ చేయడం

primaryColor prop ద్వారా యాక్సెంట్ రంగును సెట్ చేయండి:

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

ఇతర అనుకూల ప్రాపర్టీలను 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- ఉపసర్గ ఉంటుంది.

ఉదాహరణలు

ప్రాప్స్ ద్వారా అనుకూల యాక్సెంట్

విడ్జెట్‌కు బ్రాండింగ్ ఇవ్వడానికి అత్యంత సులభమైన మార్గం:

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

CSS ద్వారా అనుకూల రంగులు

పూర్తి రంగు నియంత్రణ కోసం అనుకూల ప్రాపర్టీలను ఓవర్‌రైడ్ చేయండి. యాక్సెంట్ CSS నుండి కాకుండా primaryColor ప్రాప్ నుండి వస్తుందని గుర్తుంచుకోండి:

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

థీమ్-నిర్దిష్ట ఓవర్‌రైడ్‌లు

థీమ్ క్లాస్‌తో నిర్దిష్ట థీమ్‌ను లక్ష్యంగా చేసుకోండి:

/* 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 ప్రాప్‌ను పంపండి:

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

దీనివల్ల ఒకే పేజీలో విభిన్న శైలులతో అనేక విడ్జెట్ ఇన్‌స్టాన్స్‌లను కలిగి ఉండవచ్చు. ప్రతి ఇన్‌స్టాన్స్‌కు దాని primaryColor ప్రాప్ ద్వారా ప్రత్యేక యాక్సెంట్ ఇవ్వండి (CSS --tp-accentను ఓవర్‌రైడ్ చేయలేదు -- ఇది ఇన్‌లైన్‌గా సెట్ చేయబడుతుంది).

పూర్తిగా అనుకూల UI

CSS ఓవర్‌రైడ్‌లు సరిపోకపోతే, హెడ్‌లెస్ హుక్ మీకు పూర్తి నియంత్రణను ఇస్తుంది. useThunderPhone వాయిస్ సెషన్‌ను నిర్వహిస్తుండగా, మీరు మొత్తం HTML మరియు స్టైలింగ్‌ను అందిస్తారు. వేవ్‌ఫార్మ్‌ల వంటి ఆడియో-ప్రతిస్పందన విజువలైజేషన్‌లను రూపొందించడానికి హుక్ 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>
  )
}