Comment installer un chatbot IA dans WordPress pas à pas
Une configuration WordPress champ par champ avec intégration flottante et intégrée, règles de domaine exactes, une question de test réelle et des correctifs pratiques de cache.
Un chatbot IA pour WordPress nécessite plus qu'une extension activée : l'assistant correct, le domaine autorisé, l'emplacement et la réponse en direct doivent tous être vérifiés.
L'extension WebChatAgent connecte WordPress sans modifier de fichier de thème. WordPress stocke uniquement l'identifiant du chatbot (Chatbot ID) et l'état d'activation du widget flottant. L'apparence, les connaissances, les outils et le comportement des réponses restent dans le tableau de bord WebChatAgent.
Ce tutoriel utilise un site local jetable WordPress nommé Northstar Support Demo et un compte de test WebChatAgent en anglais (Light Mode). Nous installons l'extension en version 1.1.3, connectons un assistant, publions une page de chat intégrée et vérifions le résultat sans toucher à un site de production.
Ne considérez pas un bouton de chat visible comme le test final. Le nom d'hôte doit être autorisé, le bon assistant doit répondre et une question basée sur vos sources doit renvoyer l'information attendue.
Lecteur vidéo respectueux de la vie privée (en deux clics)
Comment installer un chatbot IA dans WordPress (pas à pas)
Installez un chatbot IA sur WordPress : extension officielle, identifiant d'assistant, domaine autorisé, shortcode et test réel.
Le lecteur YouTube reste bloqué jusqu'à ce que vous cliquiez sur Lecture. Son chargement connecte votre navigateur à YouTube et peut transmettre des données techniques à Google.
Ouvrir directement sur YouTubeCe que vous maîtriserez à la fin
- L'extension officielle installée et activée
- Le nom d'hôte WordPress exact autorisé dans WebChatAgent
- Le bon Chatbot ID enregistré avec le widget flottant activé
- Une page de chat intégrée créée avec le bloc ou le shortcode
- Une vérification reproductible de la réponse réelle et des erreurs de domaine
Avant de commencer
- Un accès administrateur à WordPress
- Un chatbot WebChatAgent avec une source indexée
- Les noms d'hôte exacts de production et de préproduction (staging)
- Une question basée sur vos sources avec une réponse attendue connue
- L'autorisation de vider les caches de WordPress, du constructeur de page et du CDN
Un seul identifiant relie deux environnements
WebChatAgent gère la configuration de l'assistant. L'extension WordPress injecte les scripts et transmet le Chatbot ID sélectionné aux emplacements flottants et intégrés.
Allowed websites constitue la barrière de sécurité. Un identifiant correct peut toujours afficher une erreur de configuration ou aucun widget fonctionnel lorsque le nom d'hôte de la page est manquant.
01–11
Configuration pas à pas
Trouver et activer l'extension officielle
Confirmez le nom de l'extension, l'éditeur et la version avant l'activation.
Dans l'administration de WordPress, ouvrez Plugins → Add Plugin et recherchez “WebChatAgent”. Choisissez AI Chatbot & Live Chat – WebChatAgent par WebChatAgent. Installez-la depuis le répertoire, puis sélectionnez Activate.
Le test contrôlé a utilisé la version 1.1.3 sur WordPress 7.0. Une version compatible plus récente est préférable lorsque le répertoire en propose une ; ne téléversez pas un fichier ZIP inconnu provenant d'un site tiers.
Confirmer l'extension active et le nouveau menu
WordPress signale l'activation et ajoute WebChatAgent au menu principal.
Revenez à Installed Plugins. La ligne WebChatAgent doit afficher Deactivate, et non Activate, et la notification verte “Plugin activated” doit apparaître une fois. Le menu de premier niveau WebChatAgent sur la gauche est votre prochaine destination.
Si l'activation échoue, vérifiez les prérequis WordPress et PHP indiqués dans le répertoire des extensions avant de modifier un quelconque paramètre WebChatAgent.
Copier le Chatbot ID complet de l'assistant souhaité
L'UUID détermine quel assistant apparaît dans WordPress.
Ouvrez l'assistant concerné dans le tableau de bord WebChatAgent en anglais. Utilisez Chatbot actions → Copy chatbot ID, ou copiez l'UUID affiché dans Widget Integration. L'identifiant est également le dernier segment de l'URL du tableau de bord.
Comparez le nom de l'assistant avant de copier. L'exemple vérifié utilise Northstar Support ; coller par erreur l'identifiant d'un bot commercial peut sembler fonctionner techniquement tout en produisant de mauvaises réponses.
Autoriser chaque nom d'hôte WordPress exact
Les noms d'hôte de production, www et staging sont des entrées distinctes.
Dans WebChatAgent, ouvrez Settings et ajoutez les noms d'hôte exacts sous Allowed websites. Saisissez les noms d'hôte sans `https://`, port ou chemin de page, puis appuyez sur Entrée après chacun d'eux.
Par exemple, `www.northstar-demo.example` n'autorise pas automatiquement `support.northstar-demo.example`. Ajoutez uniquement les hôtes qui chargent réellement le widget. Le test a délibérément reproduit l'erreur de domaine de l'extension avant que la liste autorisée ne soit correcte.
Ouvrir l'onglet General de l'extension WordPress
Seules deux valeurs sont stockées localement pour le widget flottant.
Sélectionnez WebChatAgent dans le menu principal de WordPress. L'onglet General explique que WordPress stocke le Chatbot ID et l'interrupteur du widget flottant. Les autres onglets reflètent les valeurs en lecture seule du tableau de bord.
Avant la connexion, la page affiche un lien pour créer ou ouvrir un compte WebChatAgent ainsi qu'une zone d'aperçu. Gardez le tableau de bord WebChatAgent ouvert dans un autre onglet afin de pouvoir comparer facilement le nom de l'assistant et son identifiant.
Coller l'ID et activer le widget flottant
Enregistrez un UUID complet sans espaces.
Collez l'UUID copié dans Chatbot ID, activez “Enable the chat widget on your site” et sélectionnez Save Settings. L'interrupteur contrôle uniquement le bouton flottant ; les intégrations en ligne fonctionnent de manière indépendante.
Ne recopiez pas un identifiant à la main depuis une capture d'écran. Copiez-le directement, puis comparez les quatre premiers et quatre derniers caractères avant d'enregistrer.
Lire l'état enregistré et faire confiance au message d'erreur
Enregistré localement ne signifie pas autorisé par WebChatAgent.
Une notification verte “Settings saved successfully” prouve seulement que WordPress a stocké les valeurs. Lorsque la configuration du chatbot ne peut pas être chargée, le même écran indique de vérifier Allowed Domains et Chatbot ID.
Il s'agit d'un échec contrôlé utile. Vérifiez à nouveau le nom d'hôte exact, le sous-domaine `www` ou de staging, et l'UUID complet. Enregistrez d'abord dans WebChatAgent, puis rechargez WordPress. Ne désactivez pas la restriction de domaine pour masquer le problème.
Choisir le bloc Gutenberg ou le shortcode pour le chat intégré
Les deux réutilisent l'identifiant enregistré, sauf si une surcharge spécifique à la page est définie.
Ouvrez l'onglet Inline Embed. Utilisez le bloc WebChatAgent Inline Chat dans Gutenberg, ou `[webchatagent_inline]` dans l'éditeur classique, un bloc shortcode, un constructeur de page ou un widget de texte.
Un bot spécifique à une page est possible avec `[webchatagent_inline chatbot-id="OTHER_UUID"]`. Documentez soigneusement les surcharges, car elles peuvent expliquer pourquoi le chat intégré et le bouton flottant affichent des assistants différents.
Ajouter le chat intégré à une page réelle
La page d'exemple utilise un bloc Shortcode standard.
Créez une page nommée “Ask Northstar Support”, ajoutez le bloc Shortcode WordPress et collez `[webchatagent_inline]`. Avec le bloc natif WebChatAgent, recherchez “WebChatAgent Inline Chat” et laissez l'ID facultatif vide pour réutiliser les réglages de l'onglet General.
Conservez suffisamment d'espace vertical autour de l'intégration et vérifiez les aperçus tablette et mobile de l'éditeur avant de publier.
Publier et noter l'URL de test exacte
Une page publiée vous offre une cible de test reproductible dans le navigateur.
Sélectionnez Publish, vérifiez la visibilité et l'URL, puis confirmez avec Publish. Ouvrez l'URL publique finale dans une fenêtre de navigation privée afin que les cookies d'administrateur et un état de widget obsolète ne masquent pas un problème.
Pour un environnement de staging, gardez la page hors des résultats de recherche et supprimez-la après validation. La page du tutoriel local contenait uniquement des données fictives sur Northstar.
Vérifier l'emplacement, l'identité de l'assistant et une vraie réponse
Testez l'expérience visiteur complète, pas seulement le chargement du script.
La page publiée affiche le chat intégré dans le contenu et le bouton flottant Open chat en bas à droite. Si vous ne souhaitez qu'un seul emplacement, désactivez l'interrupteur flottant ou retirez le bloc intégré.
Requête de test exacte : “What is the internal escalation code for an urgent service incident?” Résultat attendu et observé : `NORDSTERN-42`. Le cadre vérifié de 1440 × 1000 montre la réponse réelle basée sur les sources sur le site jetable WordPress après avoir autorisé le nom d'hôte local exact.
Si le widget est manquant, videz les caches de WordPress, du constructeur de page et du CDN. Excluez `web-chat-agent.js` et, pour les pages avec chat intégré, `chat-widget-inline.js` des règles de report/différé ou de combinaison de scripts, puis retestez dans une nouvelle fenêtre privée.
Exemple et résultat
Découvrez le test pratique et son résultat
Chaque tutoriel présente une saisie précise, le résultat attendu et le récapitulatif transparent des vérifications effectuées localement.
Exemple pratique : Installer le chatbot IA WebChatAgent dans WordPress : guide complet pour débutant
Ce cas d'usage exact a été exécuté sur un compte de démonstration temporaire.
Données de test exactes
Open the WordPress sample page and ask: “What is the internal escalation code for an urgent service incident?”
Résultat attendu
Le widget se charge une seule fois, s'ouvre correctement et renvoie la valeur du PDF indexé.
Ce qui a été réellement vérifié
La page jetable WordPress a chargé les intégrations en ligne et flottante. Le widget en ligne réel a répondu : “The support verification code is NORDSTERN-42.”
Conseils et astuces
Rendre la configuration fiable et pérenne
Testez toujours avec des cas réalistes, documentez votre état de référence et n'appliquez qu'un changement à la fois. C'est la seule façon de mesurer de réels progrès.
Traitez les noms d'hôte comme des entrées de sécurité strictes
Ajoutez séparément les hôtes de production, www et staging requis. Supprimez les hôtes jetables après validation.
Choisissez le modèle avant le contrôle qualité WordPress
Utilisez le modèle le plus rapide et économique qui réussit les mêmes tests de réponse connue et d'inconnu avoué. WordPress ne modifie pas la qualité du modèle.
Retestez après chaque mise à jour de source
Supprimez les pages en double et les PDF obsolètes, réindexez, puis répétez les mêmes questions d'évaluation sur la page publique WordPress.
Que faire en cas de problème ?
Dépannage
Vérifiez méthodiquement l'état du service, les autorisations d'accès et les données de test avant de modifier le modèle ou le prompt.
L'option attendue est manquante
Confirmez le forfait du compte, les autorisations de fonctionnalités et le chatbot sélectionné. Les fonctionnalités payantes ou bêta peuvent être masquées lorsque les prérequis ne sont pas remplis.
Le résultat du test est incohérent
Réinitialisez la conversation de test, conservez une saisie identique et modifiez un seul paramètre à la fois pour que la cause reste mesurable.
Prêt pour un test en conditions réelles ?
Répétez le test de réponse sur la page d'accueil, une page interne mise en cache et sur un écran mobile. Confirmez les emplacements prévus, le comportement du consentement et l'identité de l'assistant avant le lancement.