ਸਟਾਈਲਿੰਗ

ਵਿਜਿਟ ਬਿਲਟ-ਇਨ ਹਲਕੇ ਅਤੇ ਗੂੜ੍ਹੇ ਥੀਮਾਂ ਵਾਲੀ ਗਲਾਸਮੌਰਫਿਕ ਬਾਰ ਵਜੋਂ ਰੈਂਡਰ ਹੁੰਦਾ ਹੈ। ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਤਿੰਨ ਪੱਧਰਾਂ 'ਤੇ ਉਪਲਬਧ ਹੈ: ਆਮ ਵਿਕਲਪਾਂ ਲਈ 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 ਪ੍ਰੌਪ ਰਾਹੀਂ ਸੈੱਟ ਕਰੋ:

<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 ਰਾਹੀਂ ਕਸਟਮ ਰੰਗ

ਪੂਰੇ ਰੰਗ ਨਿਯੰਤਰਣ ਲਈ ਕਸਟਮ ਪ੍ਰਾਪਰਟੀਜ਼ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰੋ। ਯਾਦ ਰੱਖੋ ਕਿ ਐਕਸੈਂਟ 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 ਓਵਰਰਾਈਡ ਕਾਫ਼ੀ ਨਹੀਂ ਹਨ, ਤਾਂ ਹੈੱਡਲੈੱਸ ਹੁੱਕ ਤੁਹਾਨੂੰ ਪੂਰਾ ਨਿਯੰਤਰਣ ਦਿੰਦਾ ਹੈ। ਤੁਸੀਂ ਸਾਰਾ 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>
  )
}