સ્ટાઇલિંગ

વિજેટ બિલ્ટ-ઇન લાઇટ અને ડાર્ક થીમ્સ સાથે ગ્લાસમોર્ફિક બાર તરીકે રેન્ડર થાય છે. કસ્ટમાઇઝેશન ત્રણ સ્તરે ઉપલબ્ધ છે: સામાન્ય વિકલ્પો માટે પ્રોપ્સ, થીમિંગ માટે 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>
  )
}