> ## Documentation Index > Fetch the complete documentation index at: https://docs.thunderphone.com/llms.txt > Use this file to discover all available pages before exploring further. # 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 ```html Latest (recommended) theme={null} ``` ```html Pinned version theme={null} ``` 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 theme={null}

``` 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 : ```html theme={null} ``` `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 theme={null}

``` ### Position personnalisée ```html theme={null}

``` ### Avec des rappels d’événements ```html theme={null}

``` ### Avec sonnerie ```html theme={null}

``` ### Utilisation d’une référence d’élément DOM ```html theme={null}

``` ### Intégration WordPress / CMS Ajoutez ceci à un bloc HTML personnalisé ou au pied de page de votre thème : ```html theme={null} ``` 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 `