--- title: "CDN / Balise de script" description: "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 ```html Latest (recommended) ``` ```html Pinned version ``` 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 ```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'` | Thème de couleurs. | | `primaryColor` | `string` | Non | `'#000000'` (clair) / `'#ffffff'` (sombre) | 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 la langue par session -- un code de langue ou un paramètre régional tel que `en`, `es` ou `fr-FR`. Lorsqu’elle n’est pas définie, la langue configurée de l’agent s’applique. Nécessite `language` dans les [remplacements du navigateur](/fr/guides/embed-web-widget) de la clé. | | `voice` | `string` | Non | -- | Remplacement de la 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. Nécessite `voice` dans les [remplacements du navigateur](/fr/guides/embed-web-widget) de la clé. | | `context` | `string` | Non | -- | Contexte factuel de la page ou du site par session transmis à l’agent. Tronqué côté serveur à 12 000 caractères. Nécessite `context` dans les [remplacements du navigateur](/fr/guides/embed-web-widget) de la clé. | | `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 contient 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 : ```html ``` `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 ```html

``` ### Position personnalisée ```html

``` ### Avec des rappels d’événements ```html

``` ### Avec sonnerie ```html

``` ### Utilisation d’une référence d’élément DOM ```html

``` ### Intégration WordPress / CMS Ajoutez ceci à un bloc HTML personnalisé ou au pied de page de votre thème : ```html ``` Le `

` 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 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()`. Le script n’est pas encore chargé. Assurez-vous que la balise `