Comment ajouter le chatbot IA Asyntai à WordPress

Guide étape par étape pour les sites WordPress

Plateforme :

Étape 1 : Obtenir votre code d'intégration

Tout d'abord, rendez-vous sur votre tableau de bord Asyntai et faites défiler jusqu'à la section « Embed Code ». Copiez votre code d'intégration unique, qui ressemblera à ceci :

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Note : Le code ci-dessus n'est qu'un exemple. Vous devez copier votre propre code d'intégration depuis votre Tableau de bord car il contient votre identifiant de widget personnel.

Étape 2 : Choisir la méthode d'installation

Il existe plusieurs façons d'ajouter le widget de chat à WordPress. Choisissez la méthode qui vous convient le mieux :

Méthode 1 : Utiliser un plugin (recommandé)

Le moyen le plus simple d'ajouter le widget de chat est d'utiliser l'extension gratuite « WPCode » (anciennement appelée « Insert Headers and Footers »).

Utiliser WPCode (Free)

Allez dans Plugins → Add Plugin dans votre administration WordPress
Recherchez "WPCode" et installez-le
Activez le plugin
Allez dans Code Snippets → Header & Footer
Collez votre code d'intégration Asyntai dans la section "Footer"
Cliquez sur "Save Changes"

Pourquoi utiliser un plugin ? Utiliser un plugin garantit que votre code reste en place même lorsque vous mettez à jour ou changez votre thème WordPress.

Méthode 2 : Modifier les fichiers du thème

Vous pouvez ajouter le code directement dans les fichiers de votre thème. L'emplacement de l'éditeur de fichiers de thème dépend de votre version de WordPress et du type de thème.

Pour les thèmes classiques

Allez dans Apparence → Éditeur de fichiers de thème dans votre admin WordPress
Sélectionnez votre thème actif dans le menu déroulant
Trouvez et cliquez sur footer.php dans la liste des fichiers à droite
Faites défiler jusqu'en bas et trouvez la balise de fermeture </body>
Collez votre code d'intégration Asyntai juste avant la balise </body>
Cliquez sur "Update File"

Pour les thèmes blocs (thèmes FSE)

Les thèmes blocs (comme Twenty Twenty-Four et les autres thèmes Full Site Editing) n'ont ni fichier footer.php ni balise </body> dans leurs fichiers de thème. Pour un thème bloc, utilisez la méthode par extension (WPCode), qui fonctionne avec tous les types de thèmes.

Important : Les mises à jour du thème écraseront vos modifications. Pour une solution permanente, utilisez un thème enfant ou la méthode du plugin.

Méthode 3 : Utiliser Elementor

Si vous utilisez Elementor, vous pouvez ajouter le code via la fonctionnalité de code personnalisé d'Elementor.

Elementor Pro

Allez dans Elementor → Custom Code
Cliquez sur "Add New"
Donnez-lui un nom comme « Asyntai Chatbot »
Réglez Location sur « <body> – End »
Collez votre code d'intégration Asyntai
Définissez les conditions d'affichage sur « Entire Site »
Cliquez sur "Publish"

Elementor Free

Si vous utilisez la version gratuite d'Elementor, utilisez la méthode du plugin décrite ci-dessus, car l'injection de code personnalisé nécessite Elementor Pro.

Étape 3 : Vérifier l'installation

Après avoir ajouté le code, visitez votre site dans un nouvel onglet ou une fenêtre de navigation privée. Vous devriez voir le bouton du widget de chat dans le coin inférieur droit de votre site. Cliquez dessus pour vérifier qu'il s'ouvre et fonctionne correctement.

Vous ne voyez pas le widget ? Videz le cache de votre navigateur et de tous vos plugins de cache WordPress. Si vous utilisez un plugin de cache comme WP Rocket ou W3 Total Cache, purgez le cache après avoir ajouté le code.

Ajouter la barre de recherche IA

La barre de recherche IA est un widget distinct avec son propre code. Ajoutez-la en plus du chat, ou seule. Elle nécessite le forfait Standard ou supérieur : avec un forfait inférieur, la barre apparaît mais ne renvoie pas de résultats.

Ajoutez l’attribut data-replace à la balise script : la barre remplace alors celle de votre thème. Ajoutez-le avec la même extension d'en-tête et de pied de page que celle utilisée pour le code du chat, par exemple WPCode. Le script n'a pas besoin d'être placé près de votre champ de recherche, vous n'avez donc à modifier aucun fichier du thème.

<script src="https://widget.asyntai.com/static/js/search-widget.js" data-asyntai-id="YOUR_WIDGET_ID" data-replace="auto" async></script>

Lire le guide complet de la barre de recherche IA

Documentation