स्टाइलिंग

विजेट अंगभूत हलक्या आणि गडद थीमसह काचेसारख्या बारच्या स्वरूपात रेंडर होते. सानुकूलन तीन स्तरांवर उपलब्ध आहे: सामान्य पर्यायांसाठी प्रॉप्स, थीमिंगसाठी 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- उपसर्ग आहे.

उदाहरणे

Props द्वारे सानुकूल अॅक्सेंट

विजेटला ब्रँड करण्याचा सर्वात सोपा मार्ग:

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

CSS द्वारे सानुकूल रंग

संपूर्ण रंग नियंत्रणासाठी सानुकूल प्रॉपर्टीज ओव्हरराइड करा. अॅक्सेंट CSS मधून नाही, तर primaryColor prop मधून येतो हे लक्षात ठेवा:

<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 prop द्या:

<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 prop द्वारे स्वतःचा अॅक्सेंट द्या (CSS --tp-accent ओव्हरराइड करू शकत नाही -- तो इनलाइन सेट केलेला असतो).

पूर्णपणे सानुकूल UI

CSS ओव्हरराइड्स पुरेसे नसल्यास, हेडलेस हुक तुम्हाला पूर्ण नियंत्रण देतो. तुम्ही सर्व HTML आणि स्टाइलिंग प्रदान करता, तर useThunderPhone व्हॉइस सत्र हाताळतो. हा हुक वेव्हफॉर्मसारखी ऑडिओ-रिअॅक्टिव्ह व्हिज्युअलायझेशन्स तयार करण्यासाठी 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>
  )
}