Comment ajouter le chatbot IA Asyntai à Concrete CMS

Guide étape par étape pour les sites Concrete CMS (anciennement Concrete5)

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 le code au pied de page du thème (recommandé)

La meilleure façon d'ajouter le chatbot à toutes les pages de votre site Concrete CMS est de modifier le fichier de pied de page de votre thème :

Accédez à votre installation Concrete CMS via FTP ou le Gestionnaire de fichiers
Accédez au répertoire /application/themes/your_theme_name/
Localisez et ouvrez le fichier footer.php (ou le modèle de pied de page équivalent)
Trouvez la ligne avec la balise fermante </body>
Collez votre code d'intégration Asyntai juste avant la balise </body>
Enregistrez le fichier et téléversez-le sur votre hébergement
Videz le cache de Concrete CMS : Tableau de bord → Système et paramètres → Vider le cache

Astuce : L'ajout du code avant la balise fermante </body> garantit que le chatbot se charge après le contenu de votre page, ce qui offre de meilleures performances de chargement. Cette méthode ajoute automatiquement le chatbot à chaque page utilisant ce thème.

Méthode alternative 1 : Bloc HTML (le plus simple pour les non-développeurs)

Si vous préférez ne pas modifier les fichiers de thème, vous pouvez utiliser le bloc HTML intégré de Concrete CMS :

Connectez-vous à votre Tableau de bord Concrete CMS
Accédez à la page où vous souhaitez ajouter le chatbot
Cliquez sur Modifier la page (icône de crayon dans la barre d'outils)
Cliquez sur Ajouter un bloc dans la zone où vous souhaitez placer le code
Recherchez et sélectionnez le bloc HTML
Collez votre code d'intégration Asyntai dans l'éditeur HTML
Cliquez sur Ajouter pour enregistrer le bloc
Cliquez sur Publier pour mettre les modifications en ligne

Note : La méthode par bloc HTML est idéale pour ajouter le chatbot à des pages spécifiques. Pour une installation sur l'ensemble du site, vous devrez ajouter le bloc HTML à chaque page, ou utiliser la méthode par pied de page du thème décrite ci-dessus. L'emplacement visuel du bloc n'affecte pas l'endroit où le chatbot apparaît — il s'affichera toujours dans le coin inférieur droit.

Méthode alternative 2 : Fichier d'en-tête du thème

Vous pouvez également ajouter le code au fichier d'en-tête de votre thème pour une installation sur l'ensemble du site :

Accédez à vos fichiers Concrete CMS via FTP ou le Gestionnaire de fichiers
Accédez à /application/themes/your_theme_name/
Ouvrez le fichier header.php (ou elements/header.php)
Trouvez la balise fermante </head>
Collez votre code d'intégration Asyntai juste avant la balise </head>
Enregistrez et téléversez le fichier
Videz le cache depuis le Tableau de bord

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

Astuce : Assurez-vous d'inclure les éléments d'en-tête requis en utilisant <?php View::element('header_required'); ?> dans votre fichier header.php pour que Concrete CMS fonctionne correctement.

Méthode alternative 3 : Template personnalisé (avancé)

Pour les développeurs qui souhaitent plus de contrôle, vous pouvez créer un modèle de page personnalisé :

Créez un nouveau fichier de modèle de page dans /application/themes/your_theme_name/
Ou copiez un modèle existant (par ex., default.php) et renommez-le
Ajoutez votre code d'intégration Asyntai au fichier de template avant </body>
Dans le tableau de bord Concrete CMS, allez dans Pages et thèmes
Cliquez sur Page Types
Sélectionnez le type de page avec lequel vous souhaitez utiliser ce modèle
Assignez votre modèle personnalisé au type de page
Toutes les pages utilisant ce type de page incluront désormais le chatbot

Important : Sauvegardez toujours les fichiers de votre thème avant d'effectuer des modifications. Testez vos modifications sur un site de préproduction si possible. Des modifications incorrectes des fichiers du thème peuvent endommager la mise en page ou le fonctionnement de votre site.

Étape 3 : Vérifier l'installation

Après avoir effectué vos modifications et vidé le cache, ouvrez votre site web dans un nouvel onglet de navigateur ou en navigation privée. Vous devriez voir le bouton du widget de chat dans le coin inférieur droit. 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 de Concrete CMS (Tableau de bord → System & Settings → Clear Cache). Essayez de consulter votre site dans une fenêtre de navigation privée. Vérifiez que vous avez enregistré et téléchargé toutes les modifications de fichiers. Ouvrez la console du navigateur (F12) pour vérifier s'il y a des erreurs JavaScript.