Widget

Personnalisation visuelle

Personnalisez l’apparence du widget vocal ThunderPhone avec CSS

Le widget s’affiche sous la forme d’une barre au style glassmorphique avec des thèmes clair et sombre intégrés. La personnalisation est disponible à trois niveaux : les props pour les options courantes, les propriétés personnalisées CSS pour les thèmes et les remplacements de classes CSS pour un contrôle total.

Thèmes#

La prop theme contrôle le jeu de couleurs du widget. Elle applique une classe tp--light ou tp--dark à la racine du widget :

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

Les deux thèmes utilisent le design de barre glassmorphique avec un flou d’arrière-plan et une transparence subtile.

Propriétés personnalisées CSS#

Le widget expose des propriétés personnalisées CSS (variables) que vous pouvez remplacer pour modifier les couleurs sans toucher aux classes individuelles. Elles sont définies par la classe de thème (.tp--light ou .tp--dark) appliquée à la racine .tp-widget :

Remplacer des propriétés personnalisées#

Définissez la couleur d’accentuation via la prop primaryColor :

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

Remplacez les autres propriétés personnalisées avec CSS. Utilisez un sélecteur à deux classes (.tp-widget.tp--light / .tp-widget.tp--dark) afin que votre règle l’emporte sur la classe de thème qui définit les valeurs par défaut, quel que soit l’ordre de la feuille de style :

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

Classes CSS#

Toutes les classes du widget sont préfixées par tp- afin d’éviter les conflits avec vos styles existants.

Exemples#

Accent personnalisée via les props#

La manière la plus simple de personnaliser l'image de marque du widget :

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

Couleurs personnalisées via CSS#

Remplacez les propriétés personnalisées pour contrôler entièrement les couleurs. N'oubliez pas que l'accent provient de la prop primaryColor, et non du 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);
}

Taille personnalisée#

Agrandissez ou réduisez le widget en ajustant les dimensions de la barre, des boutons et du texte :

/* 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;
}

Masquer les libellés textuels#

Tout le texte du widget se trouve dans .tp-meta. Masquez-le entièrement pour ne conserver que la forme d'onde et les boutons :

.tp-meta {
  display: none;
}

Vous pouvez également masquer des éléments individuels :

/* 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;
}

Remplacements spécifiques au thème#

Ciblez un thème spécifique avec la classe de thème :

/* 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);
}

Délimitation avec className#

Lorsque vous utilisez le composant React, transmettez une prop className pour limiter vos remplacements à une instance spécifique du widget :

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  className="support-widget"
/>

Ciblez ensuite cette classe dans votre CSS :

.support-widget.tp--dark {
  --tp-bg: rgba(30, 30, 46, 0.9);
}
 
.support-widget .tp-name {
  font-weight: 700;
}

Cela vous permet d'avoir plusieurs instances du widget sur la même page avec des styles différents. Donnez à chaque instance son propre accent via sa prop primaryColor (le CSS ne peut pas remplacer --tp-accent -- il est défini en ligne).

Interface utilisateur entièrement personnalisée#

Si les remplacements CSS ne suffisent pas, le hook headless vous donne un contrôle total. Vous fournissez tout le HTML et le style, tandis que useThunderPhone gère la session vocale. Le hook fournit également audioLevelRef pour créer des visualisations réactives à l'audio, comme des formes d'onde.

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