Στυλ

Το widget αποδίδεται ως μπάρα με εφέ γυαλιού και ενσωματωμένα φωτεινά και σκούρα θέματα. Η προσαρμογή είναι διαθέσιμη σε τρία επίπεδα: props για συνήθεις επιλογές, προσαρμοσμένες ιδιότητες CSS για θεματοποίηση και παρακάμψεις κλάσεων CSS για πλήρη έλεγχο.

Θέματα

Το prop theme ελέγχει το συνδυασμό χρωμάτων του widget. Εφαρμόζει μια κλάση tp--light ή tp--dark στη ρίζα του widget:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
/>

Και τα δύο θέματα χρησιμοποιούν τον σχεδιασμό μπάρας με εφέ γυαλιού, με θόλωση φόντου και διακριτική διαφάνεια.

Προσαρμοσμένες ιδιότητες CSS

Το widget εκθέτει προσαρμοσμένες ιδιότητες CSS (μεταβλητές) τις οποίες μπορείτε να παρακάμψετε για να αλλάξετε χρώματα χωρίς να τροποποιήσετε μεμονωμένες κλάσεις. Ορίζονται από την κλάση θέματος (.tp--light ή .tp--dark) που εφαρμόζεται στη ρίζα .tp-widget:

Παράκαμψη προσαρμοσμένων ιδιοτήτων

Ορίστε το χρώμα έμφασης μέσω του prop primaryColor:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  primaryColor="#e11d48"
/>

Παρακάμψτε τις άλλες προσαρμοσμένες ιδιότητες με CSS. Χρησιμοποιήστε έναν επιλογέα δύο κλάσεων (.tp-widget.tp--light / .tp-widget.tp--dark), ώστε ο κανόνας σας να υπερισχύει της κλάσης θέματος που ορίζει τις προεπιλογές, ανεξάρτητα από τη σειρά του stylesheet:

.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- για την αποφυγή διενέξεων με τα υπάρχοντα στυλ σας.

Παραδείγματα

Προσαρμοσμένο χρώμα έμφασης μέσω ιδιοτήτων

Ο απλούστερος τρόπος να εφαρμόσετε την επωνυμία σας στο γραφικό στοιχείο:

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

Προσαρμοσμένα χρώματα μέσω CSS

Παρακάμψτε τις προσαρμοσμένες ιδιότητες για πλήρη έλεγχο των χρωμάτων. Θυμηθείτε ότι το χρώμα έμφασης προέρχεται από την ιδιότητα primaryColor, όχι από 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 για να περιορίσετε τις παρακάμψεις σας σε ένα συγκεκριμένο στιγμιότυπο γραφικού στοιχείου:

<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 του (το CSS δεν μπορεί να παρακάμψει το --tp-accent -- ορίζεται ενσωματωμένα).

Πλήρως προσαρμοσμένο περιβάλλον χρήστη

Αν οι παρακάμψεις 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>
  )
}