CDN / Balise de script

Ajoutez le widget vocal ThunderPhone à n’importe quel site web sans bundler

La build CDN intègre React en interne. Vous pouvez donc utiliser le widget sur des sites statiques, WordPress, Webflow ou toute page où vous pouvez ajouter du HTML. Aucun npm, bundler ou framework n’est requis.

URL CDN

Latest (recommended)

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>

Pinned version

<!-- Each stable release also publishes an immutable /widget/vX.Y.Z/ path
     matching the @thunderphone/widget npm version (v1.1.2 at the time of
     writing). If you pin, you own updating the URL for new releases. -->
<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/v1.1.2/style.css" />
<script src="https://cdn.thunderphone.com/widget/v1.1.2/widget.js"></script>

Utilisation de base

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
</head>
<body>
 
  <div id="thunderphone"></div>
 
  <script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
  <script>
    ThunderPhone.mount({
      element: '#thunderphone',
      publishableKey: 'pk_live_your_publishable_key',
    })
  </script>
 
</body>
</html>

Le widget est monté dans l’élément cible et s’affiche sous la forme d’une barre à position fixe dans un coin de la fenêtre d’affichage (par défaut bottom-right, contrôlé par l’option position). L’élément de montage est uniquement la racine React -- son emplacement dans la page n’affecte pas l’endroit où le widget s’affiche.

Options de montage

ThunderPhone.mount() accepte les mêmes options que le composant React, auxquelles s’ajoute la propriété element :

Option	Type	Obligatoire	Par défaut	Description
`element`	`string \| HTMLElement`	Oui	--	Sélecteur CSS (par exemple, `'#thunderphone'`) ou référence à un élément DOM.
`publishableKey`	`string`	Oui	--	Clé API publiable (`pk_live_...`). L’agent est résolu automatiquement à partir de la configuration du widget de la clé.
`theme`	`'light' \| 'dark'`	Non	`'light'`	Palette de couleurs.
`primaryColor`	`string`	Non	`'#000000'` (clair) / `'#ffffff'` (foncé)	Chaîne de couleur CSS utilisée comme couleur d’accentuation.
`title`	`string`	Non	`'Voice assistant'`	Texte affiché dans la barre du widget.
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	Non	`'bottom-right'`	Position fixe dans la fenêtre d’affichage.
`apiBase`	`string`	Non	`'https://api.thunderphone.com/v1'`	Remplacement de l’URL de base de l’API.
`language`	`string`	Non	--	Remplacement de langue par session -- un code de langue ou des paramètres régionaux tels que `en`, `es` ou `fr-FR`. Lorsqu’elle n’est pas définie, la langue configurée de l’agent s’applique.
`voice`	`string`	Non	--	Remplacement de voix par session -- un nom de voix tel que `maria`. Lorsqu’elle n’est pas définie, la voix configurée de l’agent s’applique.
`context`	`string`	Non	--	Contexte factuel de page ou de site par session transmis à l’agent. Tronqué côté serveur à 12 000 caractères.
`onConnect`	`() => void`	Non	--	Appelé lorsque la session vocale se connecte.
`onDisconnect`	`() => void`	Non	--	Appelé lorsque la session se termine.
`onError`	`(error) => void`	Non	--	Appelé en cas d’erreur. L’erreur comporte les champs `error` (code) et `message`.
`ringtone`	`boolean \| string`	Non	`false`	Joue une sonnerie pendant la connexion. `true` pour la sonnerie par défaut, ou une chaîne URL pour un audio personnalisé.

Nettoyage

ThunderPhone.mount() renvoie une instance de widget avec des méthodes de nettoyage :

<script>
  var widget = ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
  })
 
  // Later, when you want to remove the widget:
  widget.unmount()
 
  // Or equivalently:
  widget.destroy()
</script>

unmount() et destroy() font la même chose : elles déconnectent toute session vocale active et suppriment le widget du DOM. Utilisez celle qui s’intègre le mieux à votre code.

Exemples

Thème sombre avec couleur personnalisée

<div id="thunderphone"></div>
 
<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    theme: 'dark',
    primaryColor: '#8b5cf6',
    title: 'Talk to our AI',
  })
</script>

Position personnalisée

<div id="thunderphone"></div>
 
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    position: 'bottom-left',
  })
</script>

Avec des rappels d’événements

<div id="thunderphone"></div>
 
<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    onConnect: function () {
      console.log('Call started')
    },
    onDisconnect: function () {
      console.log('Call ended')
    },
    onError: function (error) {
      console.error('Widget error:', error.error, error.message)
    },
  })
</script>

Avec sonnerie

<div id="thunderphone"></div>
 
<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    ringtone: true, // or a custom URL: 'https://example.com/ringtone.mp3'
  })
</script>

Utilisation d’une référence d’élément DOM

<div id="thunderphone"></div>
 
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  var container = document.getElementById('thunderphone')
 
  ThunderPhone.mount({
    element: container,
    publishableKey: 'pk_live_your_publishable_key',
  })
</script>

Intégration WordPress / CMS

Ajoutez ceci à un bloc HTML personnalisé ou au pied de page de votre thème :

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
 
<div id="thunderphone-widget"></div>
<script>
  ThunderPhone.mount({
    element: '#thunderphone-widget',
    publishableKey: 'pk_live_your_publishable_key',
  })
</script>

Dépannage

Le widget n’apparaît pas

Assurez-vous que les fichiers CSS et JS sont tous deux chargés. Vérifiez la console du navigateur pour détecter les erreurs réseau. Vérifiez que l’élément cible existe dans le DOM avant d’appeler ThunderPhone.mount().

ThunderPhone n’est pas défini

Le script n’est pas encore chargé. Assurez-vous que la balise <script> pour widget.js apparaît avant votre appel de montage, ou encapsulez l’appel de montage dans un écouteur DOMContentLoaded.

Erreur de domaine non autorisé

Ajoutez votre domaine à la liste des domaines autorisés dans les paramètres Développeurs sur app.thunderphone.com. N’oubliez pas que localhost est toujours autorisé.

Étapes suivantes

Style

Personnalisez l’apparence du widget avec des propriétés CSS personnalisées.

Composant React

Vous utilisez React ? L’intégration du composant est plus simple.