Intégrer un widget chatbot sur un site internet

Un widget de chatbot s'intègre presque toujours de la même façon : l'outil fournit une balise <script>, vous la placez sur les pages du site, et elle affiche une bulle en bas de l'écran. Ce qui change d'un site à l'autre, c'est l'endroit où l'on colle ce code et les blocages qui peuvent l'empêcher de fonctionner. Cette page donne la méthode générale ; WordPress, Shopify et Wix ont chacun leur page.

Trois formes d'affichage

La bulle est la plus répandue. La fenêtre intégrée convient à une page d'aide. La page dédiée ne touche pas du tout au site : utile quand le client ne peut pas ajouter de code.

Où coller le code, outil par outil

Le cas de Squarespace

L'aide Squarespace précise que le code ajouté dans le champ « Footer » est injecté avant la balise de fermeture </body> sur toutes les pages. On peut aussi injecter du code page par page (icône d'engrenage de la page, puis « Advanced »), mais seulement dans l'en-tête de la page. Trois limites à connaître : les pages de paiement n'acceptent pas de code, l'injection n'apparaît pas sur les pages d'accueil de type « Index », et l'équipe de support de Squarespace n'aide pas à ajouter ou dépanner du code personnalisé.

Charger le script sans bloquer la page

Sans attribut, un script est téléchargé et exécuté immédiatement, et le navigateur arrête de lire la page en attendant. La documentation de référence MDN décrit deux attributs qui évitent ce blocage :

• defer : le script se télécharge pendant la lecture de la page et s'exécute une fois la page lue, dans l'ordre d'apparition ;
• async : le script se télécharge pendant la lecture et s'exécute dès qu'il est prêt, sans ordre garanti.

Ces attributs ne fonctionnent qu'avec une balise qui pointe vers un fichier (src). Si l'outil fournit un petit code « en ligne » qui crée lui-même la balise, c'est ce code qui décide du chargement : ne le modifiez pas sans l'accord du fournisseur. Pour aller plus loin, voyez l'effet d'un chatbot sur la vitesse du site.

Ne charger l'assistant que là où il sert

Un script ajouté à toutes les pages se charge partout, y compris sur les mentions légales ou le blog. Wix permet de choisir des pages précises, WPCode de poser des conditions, Squarespace d'injecter du code page par page dans l'en-tête. Demandez-vous avec le client où une conversation a du sens : contact, tarifs, réservation, fiches produits.

Les blocages qui empêchent le widget de s'afficher

Le domaine n'est pas autorisé. Certains outils demandent la liste des domaines où le widget peut s'afficher. Dans les mesures publiées par chatbot.fr le 06/08/2026, deux widgets ont cessé de se charger faute de domaine autorisé. Pensez à ajouter le domaine de préproduction pour vos tests, puis le domaine définitif.

La politique de sécurité du contenu. Certains sites envoient un en-tête HTTP Content-Security-Policy (CSP), qui liste les sources que le navigateur a le droit de charger. Un widget de chat peut en concerner plusieurs directives :

• script-src pour le fichier JavaScript ;
• connect-src pour les échanges avec le serveur de l'outil ;
• frame-src si la fenêtre est une iframe ;
• style-src pour ses feuilles de style.

Si une directive manque, c'est default-src qui s'applique. Pour tester sans risque, l'en-tête Content-Security-Policy-Report-Only signale les violations sans rien bloquer. Demandez au fournisseur la liste de ses domaines.

L'emplacement n'existe pas dans la formule. Sur Squarespace comme sur Wix, l'ajout de code dépend de la formule ou de l'état du site. Vérifiez-le avant de promettre l'assistant dans un devis.

La recette avant livraison

Testez toujours sur la version en ligne, pas seulement dans l'éditeur :

1. la bulle apparaît sur les pages prévues, et seulement sur elles ;
2. elle ne recouvre aucun bouton important, sur mobile comme sur ordinateur ;
3. la console du navigateur n'affiche pas d'erreur de chargement ou de politique de sécurité ;
4. aucun cookie de l'outil n'est déposé avant le choix du visiteur, si l'outil en a besoin d'un (voir chatbot et consentement aux cookies) ;
5. la fenêtre s'utilise au clavier (voir les tests d'accessibilité) ;
6. le message d'accueil dit qu'il s'agit d'une IA (voir les mentions à ajouter au site).

Gardez dans le dossier du client le code installé, son emplacement et le compte de l'outil : c'est ce qui permettra de le retrouver lors de la prochaine maintenance.