ಶೈಲೀಕರಣ

ವಿಜೆಟ್ ಅಂತರ್ನಿರ್ಮಿತ ಲೈಟ್ ಮತ್ತು ಡಾರ್ಕ್ ಥೀಮ್‌ಗಳೊಂದಿಗೆ ಗ್ಲಾಸ್‌ಮಾರ್ಫಿಕ್ ಬಾರ್‌ನಂತೆ ರೆಂಡರ್ ಆಗುತ್ತದೆ. ಕಸ್ಟಮೈಸೇಶನ್ ಮೂರು ಹಂತಗಳಲ್ಲಿ ಲಭ್ಯವಿದೆ: ಸಾಮಾನ್ಯ ಆಯ್ಕೆಗಳಿಗಾಗಿ ಪ್ರಾಪ್‌ಗಳು, ಥೀಮಿಂಗ್‌ಗಾಗಿ 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 ಪ್ರಾಪ್ ಮೂಲಕ ಆಕ್ಸೆಂಟ್ ಬಣ್ಣವನ್ನು ಹೊಂದಿಸಿ:

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