> ## Documentation Index > Fetch the complete documentation index at: https://docs.volubile.ai/llms.txt > Use this file to discover all available pages before exploring further. # Intégration > Installez le widget chatbot sur votre site web à l'aide du code généré. Une fois votre chatbot configuré, la section **Installation** fournit un code prêt à l'emploi. Copiez-le et ajoutez-le à votre site web, à l'intérieur du `` des pages sur lesquelles le widget doit apparaître. Le widget est diffusé depuis le CDN Volubile et se connecte automatiquement à votre agent. Le code est disponible en deux modes d'intégration. Section Installation affichant le code du widget et les modes d'intégration Le widget s'affiche sous la forme d'un bouton flottant qui ouvre la fenêtre de chat à la demande. Ce mode convient à la plupart des sites web et ne nécessite aucune modification de la mise en page. ```html theme={null} ``` Le widget est intégré directement dans un élément conteneur de votre page. Ce conteneur doit disposer d'une hauteur définie. Ce mode convient aux pages de support dédiées ou aux sections où le chat doit rester visible en permanence. ```html theme={null}
``` ## Options avancées `VolubileChat.init()` accepte des paramètres optionnels qui permettent d'associer une conversation à l'un de vos utilisateurs et de transmettre du contexte supplémentaire à l'agent. Ajoutez-les manuellement au code généré. Les valeurs fournies sont rattachées à la conversation et peuvent être consultées ultérieurement depuis la vue [Conversations](#consulter-les-conversations). | Option | Description | | ------------ | -------------------------------------------------------------------------------------------------------------- | | `externalId` | Un identifiant issu de votre propre système, utilisé pour relier une conversation à un utilisateur précis. | | `context` | Le contexte applicatif mis à disposition de l'agent, par exemple la page courante ou l'offre de l'utilisateur. | | `metadata` | Des données supplémentaires rattachées à la conversation, à votre usage. | ```html theme={null} ``` Le widget s'affiche dans un conteneur isolé, garantissant que ses styles n'interfèrent pas avec ceux de votre site web, et réciproquement. ## Remplacer la configuration (optionnel) La configuration définie dans l'agent s'applique à toutes les pages sur lesquelles le widget est intégré. Si nécessaire, vous pouvez remplacer n'importe lequel de ces paramètres à l'initialisation en passant un objet `localConfig` à `VolubileChat.init()`. Les valeurs fournies sont fusionnées par-dessus la configuration enregistrée : vous ne renseignez que les champs à modifier. C'est utile pour adapter le widget selon la page ou le contexte — par exemple un message d'accueil spécifique sur votre page tarifs, ou des couleurs assorties à une section particulière de votre site web. Champs remplaçables : `language`, `privacyPolicyUrl`, `theme` (`primaryColor`, `backgroundColor`, `textColor`, `borderRadius`, `fontFamily`), `display` (`title`, `welcomeMessage`) et `behaviour` (`messageSizeLimit`, `inactivityTimeout`, `attachments`). En mode flottant, `localConfig` accepte aussi `zIndex` (par défaut `99999`) — l'ordre d'empilement du widget flottant. Augmentez-le si le widget passe derrière des éléments de votre site web. En mode flottant, `localConfig.display` accepte également `iconSize` (par défaut `44`) — la taille, en pixels, du bouton de lancement flottant. ```html theme={null} ``` Les paramètres de sécurité (**origines autorisées**) ne peuvent pas être remplacés de cette manière. Ils restent appliqués côté serveur afin de protéger les emplacements où le widget peut être chargé. ## Logo personnalisé du bouton de lancement En mode flottant, vous pouvez afficher votre propre logo à la place de l'icône par défaut du bouton de lancement. Renseignez l'adresse (URL) de votre image dans `localConfig.display.launcherLogoSrc`, comme dans l'exemple ci-dessous. **Format accepté** * Une URL d'image pointant vers un fichier SVG, PNG ou WebP, ou une URI `data:` en ligne. * Le logo est rendu dans un élément ``. Pour des raisons de sécurité, tout script ou interactivité intégré à un SVG est ignoré par le navigateur — fournissez une image statique, déjà colorée. Le logo n'hérite pas de la couleur de thème du widget : intégrez les couleurs finales directement dans le fichier. **Taille & dimensions** * Utilisez une image carrée ; elle est mise à l'échelle de la taille du bouton de lancement (`iconSize`, `44` px par défaut) et centrée. * Recommandé : au moins 88×88 px (2× pour les écrans retina), fond transparent. * Gardez-la légère — ≤ 20 Ko si hébergée, ou ≤ 10 Ko pour une URI `data:` en ligne, afin de ne pas alourdir la page hôte. **Hébergement** * Doit être servi en HTTPS. * Doit être accessible publiquement (sans authentification). * Peut être hébergé sur votre propre domaine (URL absolue ou relative), sur n'importe quel hôte HTTPS, ou intégré en ligne sous forme d'URI `data:`. Aucune configuration CORS n'est nécessaire pour ``. ```html theme={null} ``` ## Consulter les conversations Dès que votre chatbot a traité au moins une conversation, une entrée **Conversations** apparaît dans le menu de navigation. Elle liste chaque échange avec sa date, son statut et son nombre d'interactions, et permet d'ouvrir une conversation pour en consulter la transcription, le résumé, les pièces jointes et les détails techniques.