Comment ajouter le chatbot IA Asyntai à MODX

Guide étape par étape pour les sites MODX CMS

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 « Code d'intégration ». Copiez votre code d'intégration unique qui ressemblera à ceci :

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></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 : Ajouter au modèle MODX (recommandé)

La méthode recommandée pour ajouter le chatbot est de modifier votre template MODX directement dans le MODX Manager :

Connectez-vous à votre MODX Manager (panneau d'administration)
Dans la barre latérale gauche, allez dans Elements > Templates
Ouvrez le modèle de votre site (généralement appelé "BaseTemplate" ou votre modèle actif)
Trouvez la balise fermante </body> dans le code du modèle
Collez votre code d'intégration Asyntai juste avant la balise fermante </body>
Cliquez sur "Save" pour enregistrer le modèle

<!-- Your existing template content -->

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>
</html>

Astuce : L'ajout du code juste avant la balise fermante </body> garantit que le chatbot se charge après tout le contenu de la page, ce qui est l'emplacement recommandé pour les widgets de chat et ne ralentira pas le chargement de votre page.

Méthode alternative 1 : Utilisation d'un Chunk MODX

Vous pouvez utiliser un Chunk MODX pour garder le code d'intégration séparé et réutilisable :

Dans le MODX Manager, allez dans Elements > Chunks
Cliquez sur "New Chunk" pour créer un nouveau chunk
Nommez le chunk "asyntaiWidget"
Collez votre code d'intégration Asyntai dans la zone de contenu
Cliquez sur "Save"
Ouvrez votre modèle (sous Elements > Templates)
Ajoutez l'appel au chunk [[$asyntaiWidget]] juste avant la balise fermante </body>
Enregistrez le modèle

<!-- In your Template, before </body> -->
[[$asyntaiWidget]]
</body>
</html>

Astuce : L'utilisation d'un Chunk facilite la gestion et la mise à jour du code d'intégration en un seul endroit, surtout si vous utilisez plusieurs templates sur votre site.

Méthode alternative 2 : Utilisation des paramètres système MODX (HTML Head/Footer)

Certaines configurations MODX incluent des espaces réservés pour les scripts de pied de page via les paramètres système :

Dans le MODX Manager, allez dans System > System Settings
Filtrez par « htmlhead » ou recherchez un paramètre système personnalisé pour les scripts de pied de page
Si votre configuration dispose d'un espace réservé pour les scripts de pied de page (comme [[++footer_scripts]]), vous pouvez l'utiliser
Définissez la valeur du paramètre système sur votre code d'intégration Asyntai
Assurez-vous que l'espace réservé correspondant [[++footer_scripts]] est présent dans votre modèle avant la balise fermante </body>
Enregistrez le paramètre système

<!-- In your Template, before </body> -->
[[++footer_scripts]]
</body>
</html>

Note : Cette méthode dépend de la présence d'un paramètre système personnalisé pour les scripts de pied de page dans votre configuration MODX. S'il n'en existe pas, vous pouvez créer un paramètre système personnalisé et le référencer dans votre template en utilisant la syntaxe [[++setting_key]].

Méthode alternative 3 : Utilisation d'un plugin MODX (OnWebPagePrerender)

Pour une approche avancée, vous pouvez créer un plugin MODX qui injecte automatiquement le code du chatbot dans chaque page :

Dans le MODX Manager, allez dans Elements > Plugins
Cliquez sur \"New Plugin\" pour créer un nouveau plugin
Nommez le plugin "AsyntaiChatbot"
Collez le code PHP suivant dans la zone de code du plugin :

$output = &$modx->resource->_output;
$script = '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
$output = str_replace('</body>', $script . '</body>', $output);

Cliquez sur l'onglet "System Events"
Cochez la case à côté de « OnWebPagePrerender » pour déclencher ce plugin sur cet événement
Cliquez sur "Save"

Important : Remplacez YOUR_WIDGET_ID par votre identifiant de widget réel depuis le Tableau de bord Asyntai. Ce plugin injectera automatiquement le script du chatbot dans chaque page de votre site MODX avant son rendu.

Étape 3 : Vider le cache et vérifier

Après avoir ajouté le code d'intégration en utilisant l'une des méthodes ci-dessus, vous devez vider le cache de MODX et vérifier l'installation :

Dans le MODX Manager, allez dans Manage > Clear Cache (ou cliquez sur l'icône de vidage du cache dans le menu supérieur)
Ouvrez votre site web dans un nouvel onglet de navigateur 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 page
Cliquez dessus pour vérifier qu'il s'ouvre et fonctionne correctement

Vous ne voyez pas le widget ? Assurez-vous d'avoir vidé le cache MODX depuis Manage > Clear Cache dans le MODX Manager. Essayez également de vider le cache de votre navigateur ou de consulter le site dans une fenêtre de navigation privée. Si vous avez utilisé la méthode Plugin, vérifiez que l'événement système « OnWebPagePrerender » est coché pour votre plugin.