স্টাইলিং

উইজেটটি বিল্ট-ইন হালকা ও গাঢ় থিমসহ একটি গ্লাসমরফিক বার হিসেবে রেন্ডার হয়। তিনটি স্তরে কাস্টমাইজেশন উপলভ্য: সাধারণ বিকল্পের জন্য 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 ক্লাসসমূহ

আপনার বিদ্যমান স্টাইলের সঙ্গে সংঘাত এড়াতে সব উইজেট ক্লাসের আগে 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>
  )
}