CDN / Balise de script - ThunderPhone

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

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

<!-- 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>

Les URL latest sont celles générées par l’extrait d’intégration du tableau de bord. Elles sont mises en cache pendant 5 minutes et récupèrent automatiquement les nouvelles versions stables. Les chemins épinglés /widget/vX.Y.Z/ sont immuables et mis en cache à long terme — si vous épinglez une version, faites-la correspondre à la version npm @thunderphone/widget avec laquelle vous développez.

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.

Nettoyez toujours le widget lorsque vous quittez une page dans les applications monopages ou lorsque l’élément conteneur est supprimé. Cela garantit que les sessions vocales actives sont correctement déconnectées.

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>

Le <div> peut être placé n’importe où : il sert uniquement de point de montage. Le widget lui-même s’affiche comme une superposition fixe dans un coin de la fenêtre d’affichage (défini par l’option position) et ne suit pas le flux du contenu environnant.

Dépannage

Le widget n’apparaît pas

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.

​URL CDN

​Utilisation de base

​Options de montage

​Nettoyage

​Exemples

​Thème sombre avec couleur personnalisée

​Position personnalisée

​Avec des rappels d’événements

​Avec sonnerie

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

​Intégration WordPress / CMS

​Dépannage

​Étapes suivantes

Style

Composant React

URL CDN

Utilisation de base

Options de montage

Nettoyage

Exemples

Thème sombre avec couleur personnalisée

Position personnalisée

Avec des rappels d’événements

Avec sonnerie

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

Intégration WordPress / CMS

Dépannage

Étapes suivantes