Comment ajouter un chatbot à WordPress (sans code)

WordPress fait tourner plus de 40 % du web, ce qui veut dire qu’il y a de bonnes chances que votre site en fasse partie. Ajouter un chatbot à WordPress est simple. Vous n’avez besoin ni d’un développeur, ni d’un plugin sur mesure, ni d’aucune expérience en code. Ce guide passe en revue trois méthodes, de l’approche par plugin la plus simple à l’installation au niveau du thème, et couvre les pièges les plus courants.

Avant de commencer

Deux éléments sont nécessaires avant d’ajouter le chatbot à votre site WordPress.

1. Un compte Agentkit avec un chatbot entraîné.

Si ce n’est pas encore fait, inscrivez-vous gratuitement et créez votre premier chatbot. Entraînez-le sur le contenu de votre site, vos pages FAQ, votre documentation, ou tout autre contenu sur lequel vos visiteurs posent des questions. Consultez le guide d’entraînement pour plus de détails.

2. Votre balise de script d’intégration.

Une fois votre chatbot entraîné, rendez-vous dans les Paramètres de votre chatbot puis dans l’onglet Publier, dans le tableau de bord Agentkit. Vous y verrez une balise de script qui ressemble à ceci :

<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>

Copiez cet extrait. Vous allez le coller dans WordPress à l’aide de l’une des trois méthodes ci-dessous.

Comparatif des méthodes

Choisissez la méthode adaptée à votre niveau de confort. L’approche par plugin est recommandée pour la plupart des utilisateurs, car c’est la plus simple et la plus résistante aux mises à jour de thème.

Méthode 1 : approche par plugin (recommandée)

C’est la méthode la plus simple. Vous installez un plugin gratuit qui vous permet d’ajouter des extraits de code à votre site sans toucher aux fichiers du thème.

Avec WPCode (Insert Headers and Footers)

WPCode est un plugin WordPress gratuit comptant plus de 2 millions d’installations. Il vous permet d’ajouter du code à l’en-tête ou au pied de page de votre site sans modifier les fichiers du thème.

Étape 1 : installez le plugin

1. Dans votre administration WordPress, allez dans Plugins puis Add New.
2. Recherchez « WPCode » (le nom complet est WPCode - Insert Headers, Footers, and Code Snippets).
3. Cliquez sur Install Now, puis sur Activate.

Étape 2 : ajoutez l’extrait du chatbot

1. Dans la barre latérale d’administration WordPress, allez dans Code Snippets puis Header & Footer.
2. Repérez la section Footer.
3. Collez votre balise de script d’intégration Agentkit dans le champ Footer.
4. Cliquez sur Save Changes.

C’est tout. Le widget du chatbot apparaît désormais sur chaque page de votre site WordPress.

Étape 3 : vérifiez que ça fonctionne

1. Ouvrez votre site web dans un nouvel onglet de navigateur (pas l’administration WordPress).
2. Vous devriez voir la bulle de discussion en bas à droite.
3. Cliquez dessus et envoyez un message de test pour confirmer qu’il répond correctement.

Avec Insert Headers and Footers (alternative)

Si vous préférez un autre plugin, « Insert Headers and Footers » de WPBeginner fonctionne de la même façon :

1. Installez et activez le plugin.
2. Allez dans Settings puis Insert Headers and Footers.
3. Collez le script d’intégration dans le champ Scripts in Footer.
4. Enregistrez.

Contrôler les pages où le chatbot s’affiche

WPCode et les plugins similaires prennent en charge la logique conditionnelle. Si vous voulez le chatbot uniquement sur certaines pages :

1. Dans WPCode, au lieu d’utiliser la section Header & Footer, créez un nouveau Code Snippet.
2. Réglez le type de code sur « HTML Snippet ».
3. Collez votre script d’intégration.
4. Sous Insertion, choisissez « Site Wide Footer ».
5. Sous Smart Conditional Logic, ajoutez des conditions telles que :
   • La page est « Contact » ou « Support » ou « Pricing »
   • Le type de contenu est « Product »
   • L’URL contient « /help »
6. Enregistrez et activez l’extrait.

Cela vous donne un contrôle précis sans avoir à créer plusieurs chatbots.

Méthode 2 : bloc HTML personnalisé (pages spécifiques)

Si vous voulez le chatbot sur une ou deux pages seulement et ne voulez pas installer de plugin, vous pouvez utiliser l’éditeur de blocs de WordPress.

Étape 1 : modifiez la page où vous voulez le chatbot.

Étape 2 : ajoutez un bloc Custom HTML en bas du contenu de la page.

Étape 3 : collez votre script d’intégration Agentkit dans le bloc :

<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>

Étape 4 : mettez à jour ou publiez la page.

Le chatbot n’apparaîtra que sur cette page spécifique. Répétez l’opération pour d’autres pages si besoin.

Limites de cette méthode :

• Le script se charge en tant que partie du contenu de la page, il peut donc se charger un peu plus tard qu’un placement en pied de page.
• Si vous voulez le chatbot sur de nombreuses pages, cela devient fastidieux. Utilisez plutôt la méthode par plugin.
• Certains constructeurs de pages (Elementor, Divi) peuvent retirer les balises de script des blocs HTML. Si cela arrive, utilisez la méthode par plugin.

Méthode 3 : pied de page du thème (footer.php)

Cette méthode ajoute le chatbot au niveau du thème. C’est l’approche la plus directe, mais elle nécessite de modifier des fichiers du thème.

Important : si vous modifiez directement le fichier footer.php de votre thème, vos changements seront perdus à la prochaine mise à jour du thème. Utilisez un thème enfant pour rendre la modification permanente.

Avec un thème enfant

Étape 1 : si vous n’avez pas encore de thème enfant, créez-en un. La plupart des développeurs de thèmes fournissent des instructions. Vous pouvez aussi utiliser le plugin « Child Theme Configurator ».

Étape 2 : dans votre administration WordPress, allez dans Appearance puis Theme File Editor.

Étape 3 : sélectionnez votre thème enfant dans le menu déroulant.

Étape 4 : ouvrez footer.php. S’il n’existe pas dans votre thème enfant, créez-le en copiant le footer.php du thème parent.

Étape 5 : repérez la balise fermante </body>. Collez le script d’intégration juste avant :

<!-- Agentkit Chatbot -->
<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>
</body>
</html>

Étape 6 : enregistrez le fichier.

Sans thème enfant (non recommandé)

Si vous modifiez directement le footer.php du thème parent, suivez les mêmes étapes, mais sachez qu’une mise à jour du thème écrasera vos changements. Si vous choisissez cette voie, conservez une copie de votre footer.php modifié afin de pouvoir le réappliquer après chaque mise à jour.

Tester votre installation

Une fois le chatbot ajouté avec l’une ou l’autre méthode, passez en revue cette liste de vérification.

Vérification de base

Liste de vérification pour vider le cache

La mise en cache est la principale raison pour laquelle les gens ajoutent le script du chatbot sans le voir apparaître sur leur site. Videz les caches dans cet ordre :

1. Plugin de cache WordPress (WP Super Cache, W3 Total Cache, WP Rocket, LiteSpeed Cache) : allez dans les paramètres du plugin et purgez tous les caches.
2. Cache au niveau de l’hébergeur (SiteGround, WP Engine, Cloudflare) : vérifiez le tableau de bord de votre hébergeur pour une option de purge du cache.
3. Cache CDN (Cloudflare, StackPath, Fastly) : si vous utilisez un CDN, purgez également le cache à cet endroit.
4. Cache du navigateur : ouvrez votre site dans une fenêtre de navigation privée pour contourner le cache local du navigateur.

Si le chatbot n’apparaît toujours pas après avoir vidé tous les caches, vérifiez la console de développement du navigateur (F12 sur ordinateur) pour repérer d’éventuelles erreurs JavaScript.

Dépannage des problèmes courants

Le chatbot n’apparaît pas

Cause : mise en cache. C’est le problème le plus fréquent. Suivez la liste de vérification pour vider le cache ci-dessus.

Cause : emplacement de la balise de script. Assurez-vous que le script se trouve à l’intérieur de la balise <body>, et non dans le <head>. Certains plugins d’en-tête/pied de page placent le code dans le <head> par défaut.

Cause : Content Security Policy. Certains plugins de sécurité ajoutent des en-têtes Content Security Policy qui bloquent les scripts externes. Vérifiez si votre plugin de sécurité (Wordfence, Sucuri, iThemes Security) dispose de paramètres CSP et ajoutez cdn.agentkit.ai aux sources de script autorisées.

Cause : conflit avec un constructeur de pages. Certains constructeurs de pages retirent les balises de script des zones de contenu. Utilisez la méthode par plugin (Méthode 1) plutôt que le bloc HTML personnalisé.

Le chatbot apparaît mais ne répond pas

Cause : chatbot non entraîné. Allez dans votre tableau de bord Agentkit et vérifiez que votre chatbot dispose de données d’entraînement. Un chatbot non entraîné n’a rien sur quoi s’appuyer.

Cause : ID de chatbot incorrect. Vérifiez que le data-chatbot de votre code d’intégration correspond à l’ID affiché dans votre tableau de bord Agentkit.

Cause : restriction de domaine. Si vous avez configuré des restrictions de domaine dans les paramètres de votre chatbot, assurez-vous que votre domaine WordPress figure dans la liste des domaines autorisés.

Le chatbot entre en conflit avec un autre plugin de chat

Si vous utilisez un autre plugin de chat en direct ou de chatbot (Tidio, Intercom, Drift, Crisp), les deux widgets peuvent se chevaucher ou interférer l’un avec l’autre.

Solutions :

• Retirez l’autre plugin de chat si vous passez entièrement à Agentkit.
• Si vous avez besoin des deux, utilisez la méthode du bloc HTML personnalisé d’Agentkit pour ne l’afficher que sur les pages où l’autre plugin n’est pas actif.
• Ajustez la position du widget dans les paramètres de votre tableau de bord Agentkit si les deux doivent coexister.

Ralentissement du chargement de page après l’ajout du chatbot

Le widget Agentkit se charge de manière asynchrone (l’attribut async dans la balise de script), il ne devrait donc pas bloquer le rendu de votre page. Si vous constatez un ralentissement :

1. Confirmez que l’attribut async est présent dans votre balise de script.
2. Effectuez un test de vitesse (Google PageSpeed Insights, GTmetrix) et vérifiez si le script Agentkit est signalé. Les scripts asynchrones affectent rarement les scores de performance.
3. Si vous utilisez un plugin de performance qui retarde le JavaScript, ajoutez cdn.agentkit.ai à la liste d’autorisation pour l’empêcher d’interférer avec le chargement du widget.

Configurer le chatbot pour WordPress

Une fois le chatbot en ligne sur votre site WordPress, envisagez ces étapes de configuration dans votre tableau de bord Agentkit.

Restriction de domaine

Dans les Paramètres de votre chatbot, définissez le domaine autorisé sur le domaine de votre site WordPress (par exemple yourdomain.com). Cela empêche quiconque de copier votre code d’intégration et d’utiliser votre chatbot sur un autre site.

Entraînement sur le contenu WordPress

La meilleure source pour l’entraînement est le contenu réel de votre site web. Dans Agentkit, ajoutez l’URL de votre site WordPress comme source d’entraînement, et l’outil d’exploration indexera vos pages automatiquement. Si votre site utilise un rendu JavaScript, l’outil d’exploration propulsé par Firecrawl s’en accommode.

Concentrez votre entraînement sur :

• Les pages FAQ ou base de connaissances
• Les pages produits ou services
• La page tarifs
• La page à propos
• La documentation d’assistance
• Les articles de blog qui répondent aux questions courantes

Évitez d’entraîner sur des pages au contenu pauvre, des pages de connexion ou des pages nécessitant une authentification.

Pour un guide d’entraînement complet, consultez Comment entraîner un chatbot sur le contenu de votre site web.

Collecte de prospects

Activez l’action de collecte de prospects pour recueillir les e-mails et noms des visiteurs directement dans le chat. Les prospects collectés apparaissent dans votre tableau de bord Agentkit et peuvent être envoyés vers votre CRM via Zapier ou des webhooks. Consultez la documentation sur la collecte de prospects pour la configuration.

Documentation d’intégration spécifique à WordPress

Pour les instructions de configuration les plus récentes et toute fonctionnalité spécifique à WordPress, consultez la documentation d’intégration WordPress.

Récapitulatif du comparatif des méthodes

Pour la plupart des utilisateurs WordPress, la méthode par plugin est le bon choix. Elle est rapide, sûre, et offre le plus de flexibilité sans mettre en danger les fichiers de votre thème.

Prochaines étapes

Une fois votre chatbot en ligne sur WordPress, passez quelques minutes dans le Playground d’Agentkit à tester les réponses. Si le chatbot ne répond pas bien sur certains sujets, ajoutez davantage de données d’entraînement pour ces domaines. Le Playground vous permet d’itérer rapidement sans avoir à tester sur votre site en ligne à chaque fois.

Explorez ensuite comment connecter votre chatbot à vos autres outils. Le guide d’intégration couvre les workflows Zapier, les webhooks et l’API REST pour des configurations plus avancées.

Créez votre chatbot gratuitement →

Aucune carte bancaire requise.