Comment ajouter le chatbot IA Asyntai à WordPress

Guide étape par étape pour les sites WordPress

Plateforme :

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

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<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é)

La façon la plus simple d'ajouter le widget de chat est d'utiliser un plugin comme « Insert Headers and Footers » ou « WPCode ».

Utiliser WPCode (Free)

Allez dans Extensions → Ajouter dans votre admin 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"

Utiliser Insert Headers and Footers

Allez dans Extensions → Ajouter dans votre admin WordPress
Recherchez "Insert Headers and Footers" par WPBeginner
Installez et activez le plugin
Allez dans Réglages → Insert Headers and Footers
Collez votre code d'intégration Asyntai dans la zone « Scripts in Footer »
Cliquez sur "Save"

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)

Si vous utilisez un thème basé sur les blocs (comme Twenty Twenty-Four ou d'autres thèmes Full Site Editing), l'éditeur de fichiers de thème a été déplacé :

Allez dans Outils → Éditeur de fichiers de thème dans votre admin WordPress
Sélectionnez votre thème actif dans le menu déroulant
Cherchez footer.php ou footer.html dans la liste des fichiers
Ajoutez votre code d'intégration Asyntai avant la balise de fermeture </body>
Cliquez sur "Update File"

Note : Certains thèmes blocs n'ont pas de fichier footer.php. Dans ce cas, utilisez la méthode du plugin (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 »
Définissez l'emplacement sur « Before </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 et la barre prend la place de celle de votre thème. Ajoutez-le avec la même extension d en-tête et de pied de page que pour le code du chat, par exemple Code Snippets ou Insert Headers and Footers. Le script n a pas besoin d être à côté de votre champ de recherche, vous n avez donc aucun fichier de thème à modifier.

<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