Widget chatbot pour site web : guide d'installation complet

Comment fonctionne l'intégration d'un widget chatbot

Un widget chatbot s'intègre à votre site via un tag script HTML. Ce code léger, placé avant la balise de fermeture </body> de vos pages, charge le widget de chat depuis les serveurs de votre solution SaaS. L'ensemble du rendu visuel, des conversations et de la logique IA est géré côté serveur — votre site n'est pas alourdi.

Depuis votre tableau de bord Mira AI, accédez à la section « Intégration » de votre chatbot. Vous y trouvez votre code d'intégration unique, prêt à copier. Ce code ressemble à ceci :

Installation sur WordPress

WordPress est le CMS le plus utilisé au monde. Il existe deux méthodes pour y ajouter votre widget chatbot, selon que vous avez accès au code du thème ou non.

Méthode 1 : via l'éditeur de thème (recommandée)

1. 1.Connectez-vous à votre administration WordPress
2. 2.Allez dans Apparence > Éditeur de thème > Thème enfant (ou thème actif)
3. 3.Ouvrez le fichier footer.php
4. 4.Collez votre code Mira AI juste avant la ligne </body>
5. 5.Cliquez sur « Mettre à jour le fichier »
6. 6.Vérifiez que le widget apparaît sur votre site en ouvrant une page en navigation privée

Méthode 2 : via un plugin d'injection de code

Si vous ne souhaitez pas toucher au code du thème, installez un plugin comme « Insert Headers and Footers » (gratuit). Allez dans Réglages > Insert Headers and Footers, collez votre code dans la section « Scripts in Footer » et sauvegardez.

Installation sur Shopify

1. 1.Dans votre admin Shopify, allez dans Boutique en ligne > Thèmes
2. 2.Cliquez sur « Actions » puis « Modifier le code »
3. 3.Dans le dossier « Layout », ouvrez le fichier theme.liquid
4. 4.Repérez la ligne </body> en fin de fichier
5. 5.Collez votre code Mira AI juste avant cette ligne
6. 6.Cliquez sur « Enregistrer » et vérifiez sur votre boutique

Installation sur Wix

1. 1.Depuis le tableau de bord Wix, allez dans Paramètres
2. 2.Cliquez sur « Code personnalisé » dans la section Avancé
3. 3.Cliquez sur « + Ajouter un code personnalisé »
4. 4.Collez votre script Mira AI dans le champ prévu
5. 5.Sélectionnez « Corps — fin » pour le placement
6. 6.Appliquez à « Toutes les pages » et validez

Installation sur Webflow

1. 1.Ouvrez votre projet Webflow dans le Designer
2. 2.Allez dans Paramètres du projet (icône engrenage)
3. 3.Cliquez sur l'onglet « Code personnalisé »
4. 4.Dans « Code pied de page », collez votre script Mira AI
5. 5.Publiez votre site pour que le changement prenne effet

Installation sur Squarespace

1. 1.Dans votre admin Squarespace, allez dans Paramètres > Avancé
2. 2.Cliquez sur « Injection de code »
3. 3.Dans la section « Pied de page », collez votre script
4. 4.Enregistrez et prévisualisez pour vérifier l'affichage

Installation sur HTML statique

Pour un site HTML statique, ouvrez chaque fichier .html dans votre éditeur de code. Repérez la balise </body> en fin de fichier et collez votre code Mira AI juste avant. Si votre site utilise un template ou un layout commun (header/footer inclus), il suffit de l'ajouter une seule fois dans ce fichier de footer.

Vérifier que l'installation fonctionne

• Ouvrez votre site en navigation privée (pour éviter le cache)
• Vérifiez que le widget de chat apparaît en bas à droite (ou gauche selon votre configuration)
• Cliquez sur le widget et envoyez un message de test
• Vérifiez que la réponse arrive correctement dans le chat
• Contrôlez l'affichage sur mobile en réduisant la fenêtre du navigateur
• Vérifiez dans votre tableau de bord Mira AI que la conversation test est bien enregistrée