Comment ajouter le chatbot IA Asyntai à Backdrop CMS

Guide étape par étape pour les sites Backdrop 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 de thème (recommandé)

Backdrop CMS utilise des fichiers de modèle .tpl.php dans ses thèmes. L'approche recommandée consiste à ajouter le code d'intégration directement dans le modèle de page de votre thème actif :

Accédez à votre installation Backdrop CMS via FTP ou le Gestionnaire de fichiers
Accédez au répertoire de votre thème actif : themes/yourtheme/
Ouvrez le fichier page.tpl.php (ou layout.tpl.php selon votre thème)
Trouvez la balise fermante </body> ou la ligne <?php print $page_bottom; ?>
Collez votre code d'intégration Asyntai juste avant cette ligne
Enregistrez le fichier

<!-- Asyntai AI Chatbot -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
<?php print $page_bottom; ?>
</body>

Astuce : Placer le code juste avant <?php print $page_bottom; ?> ou la balise fermante </body> garantit que le chatbot se charge après le contenu de la page, offrant de meilleures performances de chargement. Cette méthode ajoute automatiquement le chatbot à chaque page utilisant ce thème.

Méthode alternative 1 : Utilisation d'un module personnalisé

Vous pouvez créer un module Backdrop CMS simple qui injecte le script du chatbot en utilisant backdrop_add_js() :

Créez le répertoire du module : modules/custom/asyntai_widget/
Créez le fichier module asyntai_widget.module avec le code suivant :
// modules/custom/asyntai_widget/asyntai_widget.module function asyntai_widget_init() { backdrop_add_js('https://asyntai.com/static/js/chat-widget.js', array( 'type' => 'external', 'scope' => 'footer', 'attributes' => array('async' => 'async', 'data-asyntai-id' => 'YOUR_WIDGET_ID'), )); }
Créez le fichier asyntai_widget.info :
name = Asyntai AI Chatbot Widget description = Adds the Asyntai AI chatbot widget to all pages. backdrop = 1.x package = Custom type = module
Accédez à Fonctionnalités (admin/modules) dans votre panneau d'administration Backdrop
Trouvez « Asyntai AI Chatbot Widget » dans le package Custom et activez-le
Cliquez sur "Save configuration"

Note : Remplacez YOUR_WIDGET_ID dans le code du module par votre identifiant de widget réel depuis le Asyntai Dashboard. L'approche par module personnalisé est sécurisée pour les mises à jour et ne sera pas écrasée lors de la mise à jour de votre thème.

Méthode alternative 2 : Utilisation du module « Add to Head » de Backdrop

Le module contribué « Add to Head » offre un moyen simple d'injecter des scripts sans modifier le code :

Téléchargez et installez le module contribué « Add to Head » depuis le site web de Backdrop CMS
Accédez à Configuration > Development > Add to Head
Ajoutez votre code d'intégration Asyntai dans la footer section
Cliquez sur "Save configuration"

Astuce : L'utilisation du module « Add to Head » est la méthode la plus simple si vous préférez ne pas modifier les fichiers du thème ou créer des modules personnalisés. Il fournit une interface d'administration simple pour gérer les scripts injectés.

Méthode alternative 3 : Utilisation du système de blocs

Le système de mise en page et de blocs de Backdrop CMS peut également être utilisé pour ajouter le chatbot :

Connectez-vous à votre panneau d'administration Backdrop CMS
Accédez à Structure > Mises en page
Sélectionnez la mise en page que vous souhaitez modifier (par exemple, la mise en page par défaut)
Cliquez sur "Add block" dans la zone de pied de page
Choisissez "Custom block"
Définissez le format du bloc sur « Full HTML » ou « Raw HTML »
Collez votre code d'intégration Asyntai dans le corps du bloc
Donnez un titre au bloc (par exemple, « Asyntai Chatbot ») et cochez éventuellement « Masquer le titre »
Cliquez sur "Save block" puis sur "Save layout"

Important : Assurez-vous que le format de texte est défini sur « Full HTML » ou « Raw HTML » afin que la balise script ne soit pas supprimée. Le format « Filtered HTML » par défaut supprime les balises script pour des raisons de sécurité.

Étape 3 : Vider le cache et vérifier

Après avoir effectué vos modifications, videz le cache de Backdrop CMS et vérifiez l'installation :

Accédez à Configuration > Performance dans votre panneau d'administration
Cliquez sur "Clear all caches"
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 de Backdrop CMS dans Configuration > Performance. Essayez de consulter votre site dans une fenêtre de navigation privée ou de vider le cache de votre navigateur. Ouvrez la console du navigateur (F12) pour vérifier s'il y a des erreurs JavaScript. Si vous avez utilisé la méthode du module personnalisé, vérifiez que le module est activé sous Functionality.