Widget

Widget vocal intégrable

Ajoutez un agent vocal IA à n’importe quel site web avec quelques lignes de code

Le widget vocal intégrable ThunderPhone permet aux visiteurs de votre site web de parler à un agent IA directement depuis le navigateur. Aucun appel téléphonique requis : les utilisateurs cliquent sur un bouton et démarrent une conversation vocale en temps réel propulsée par ThunderPhone.

Le widget s’affiche sous la forme d’une barre avec effet glassmorphism qui s’adapte aux thèmes clairs et sombres, avec des couleurs d’accentuation et un positionnement personnalisables. Il est distribué sous forme de package npm @thunderphone/widget et est également disponible via CDN pour les environnements sans bundler.

Prérequis#

Avant d’intégrer le widget, effectuez ces trois étapes dans le Dashboard ThunderPhone :

1. Créer une clé API publiable

   Accédez à Développeurs dans les paramètres du dashboard et créez une clé publiable. Les clés publiables commencent par pk_live_ et peuvent être incluses sans risque dans le code côté client.

2. Configurer les domaines autorisés

   Dans les mêmes paramètres Développeurs, ajoutez les domaines où le widget sera intégré. localhost est toujours autorisé pour le développement. Les caractères génériques sont pris en charge (par exemple, *.example.com).

3. Créer un widget web

   Accédez à Widgets Web dans le dashboard et créez un widget. Sélectionnez l’agent que vous souhaitez exposer et la clé publiable à utiliser. L’agent est déterminé automatiquement à partir de la configuration de votre clé publiable.

Démarrage rapide#

Installez le package :

npm install @thunderphone/widget

Ajoutez le widget à votre application :

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
    />
  )
}

C’est tout. Vos utilisateurs verront une barre d’appel avec effet glassmorphism qui les connecte à votre agent IA en un seul clic.

Personnalisation#

Le widget possède quatre props d’apparence :

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  primaryColor="#8b5cf6"
  title="Ask our AI"
/>

Trois props supplémentaires personnalisent la session plutôt que l’apparence ; elles sont toutes transmises à la requête de session lorsqu’un appel démarre :

Consultez la référence du composant React pour le tableau complet des props.

Pour une interface utilisateur entièrement personnalisée, utilisez le hook headless pour gérer la session vocale pendant que vous créez votre propre interface. Le hook expose les niveaux audio en temps réel pour créer des visualisations réactives à l’audio.

Options d’intégration#

Choisissez la méthode d’intégration adaptée à votre stack :

Style#

Le widget inclut des thèmes clair et sombre intégrés, contrôlés par la prop theme, ainsi qu’une couleur d’accent contrôlée par la prop primaryColor. Pour une personnalisation plus poussée, vous pouvez remplacer les propriétés et classes CSS personnalisées. Consultez le guide de style pour plus de détails.