اسٹائلنگ

ویجیٹ بلٹ اِن ہلکے اور گہرے تھیمز کے ساتھ شیشہ نما بار کے طور پر رینڈر ہوتا ہے۔ تخصیص تین سطحوں پر دستیاب ہے: عام اختیارات کے لیے props، تھیم سازی کے لیے CSS کسٹم پراپرٹیز، اور مکمل کنٹرول کے لیے CSS کلاس اوور رائیڈز۔

تھیمز

theme prop ویجیٹ کی رنگ اسکیم کو کنٹرول کرتا ہے۔ یہ ویجیٹ روٹ پر 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 کلاسز

آپ کے موجودہ اسٹائلز کے ساتھ تنازعات سے بچنے کے لیے تمام widget کلاسز کے آغاز میں tp- ہوتا ہے۔

مثالیں

Props کے ذریعے حسب ضرورت ایکسنٹ

ویجیٹ کو برانڈ کرنے کا سب سے آسان طریقہ:

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

CSS کے ذریعے حسب ضرورت رنگ

مکمل رنگ کنٹرول کے لیے حسب ضرورت خصوصیات کو اووررائیڈ کریں۔ یاد رکھیں کہ ایکسنٹ primaryColor prop سے آتا ہے، 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;
}

تھیم کے لیے مخصوص اووررائیڈز

تھیم کلاس کے ذریعے کسی مخصوص تھیم کو ہدف بنائیں:

/* 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 اووررائیڈز کافی نہ ہوں تو ہیڈ لیس 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>
  )
}