Comment ajouter le chatbot IA Asyntai à CrafterCMS

Plateforme :

CrafterCMS

HTML/Custom WordPress Shopify WooCommerce BigCommerce Ecwid Wix Squarespace Webflow Weebly HubSpot Tilda Adobe Experience Manager Duda Google Sites Bludit Plesk Concrete CMS Docusaurus Hugo Kentico Volusion Craft CMS Contentful Strapi Joomla Drupal Magento Blogger Bitrix TYPO3 PrestaShop OpenCart Ghost Statamic Umbraco Moodle SilverStripe Grav October CMS ProcessWire Sanity ExpressionEngine Sylius Backdrop CMS MODX Bagisto PayloadCMS e107 CrafterCMS Kirby MedusaCMS DatoCMS GoDaddy Framer Bubble Carrd Jimdo Strikingly Kajabi Teachable Thinkific ClickFunnels Hostinger Unbounce Leadpages Systeme.io Instapage

É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 :

Étape 2 : Ajouter au modèle FreeMarker (recommandé)

CrafterCMS utilise des modèles FreeMarker (.ftl) pour le rendu des pages. La façon la plus simple d'ajouter le chatbot à toutes les pages est de modifier votre modèle de page principal :

1. Dans Crafter Studio, accédez à Tableau de bord du site > Types de contenu ou naviguez vers les modèles
2. Ouvrez votre modèle de page principal (par exemple, /templates/web/pages/home.ftl ou la mise en page de base)
3. Trouvez la balise fermante </body>
4. Collez votre code d'intégration Asyntai juste avant la balise </body> :
   <!-- Asyntai AI Chatbot --> <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </body>
5. Enregistrez le fichier et publiez via Crafter Studio

Méthode alternative 1 : Utilisation des composants de template Crafter

Pour une meilleure organisation, créez un modèle de composant dédié au widget de chat :

1. Dans Crafter Studio, créez un nouveau fichier de modèle à l'emplacement /templates/web/components/asyntai-widget.ftl
2. Ajoutez le contenu suivant au template du composant :
   <!-- Asyntai AI Chatbot Component --> <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
3. Incluez-le dans votre template de mise en page principal avec une directive include FreeMarker :
   <#include "/templates/web/components/asyntai-widget.ftl" />
4. Alternativement, si vous utilisez le système de rendu de composants de Crafter, utilisez :
   <@renderComponent component=contentModel.asyntaiWidget />
5. Enregistrez les deux fichiers et publiez via Crafter Studio

Méthode alternative 2 : Utilisation de la configuration Head/Scripts de Crafter

CrafterCMS vous permet d'injecter des scripts globalement via la configuration du site :

1. Dans Crafter Studio, naviguez vers Configuration du site > Configuration
2. Ouvrez le fichier de configuration du site Engine (site-config.xml)
3. Ajoutez une configuration d'injection de script personnalisée :
   <site> <!-- Existing configuration... --> <!-- Custom Scripts --> <scripts> <script> <src>https://asyntai.com/static/js/chat-widget.js</src> <async>true</async> <data-asyntai-id>YOUR_WIDGET_ID</data-asyntai-id> </script> </scripts> </site>
4. Sinon, modifiez votre mise en page FreeMarker de base pour lire la configuration du site et injecter les scripts dynamiquement :
   <#if siteConfig.getString("scripts.script.src", "")?has_content> <script async src="${siteConfig.getString("scripts.script.src")}" data-asyntai-id="${siteConfig.getString("scripts.script.data-asyntai-id")}"></script> </#if>
5. Enregistrez et publiez les modifications de configuration

Méthode alternative 3 : Utilisation d'un contrôleur Groovy

CrafterCMS prend en charge les scripts Groovy pour la logique côté serveur. Vous pouvez utiliser un contrôleur pour ajouter dynamiquement le script du chatbot :

1. Créez un script Groovy dans /scripts/pages/ (par exemple, /scripts/pages/home.groovy ou votre contrôleur global de site)
2. Ajoutez le code suivant pour injecter l'URL du script dans le modèle du template :
   // /scripts/pages/home.groovy import org.craftercms.engine.service.context.SiteContext def siteContext = SiteContext.current // Add Asyntai chatbot configuration to the model model.asyntaiEnabled = true model.asyntaiWidgetId = "YOUR_WIDGET_ID" model.asyntaiScriptSrc = "https://asyntai.com/static/js/chat-widget.js"
3. Puis référencez les variables du modèle dans votre modèle FreeMarker :
   <#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
4. Enregistrez à la fois le script Groovy et le fichier de modèle
5. Publiez les modifications via Crafter Studio

Étape 3 : Publier et vérifier

Après avoir effectué vos modifications, publiez-les via Crafter Studio :

1. Dans Crafter Studio, accédez au Tableau de bord du site
2. Vérifiez vos modifications dans la section My Recent Activity ou Pending Approval
3. Cliquez sur Publier pour déployer les modifications sur votre site en direct
4. Visitez votre site web CrafterCMS dans un nouvel onglet de navigateur ou une fenêtre de navigation privée
5. Vous devriez voir le bouton du widget de chat dans le coin inférieur droit de votre page
6. Cliquez dessus pour vérifier qu'il s'ouvre et fonctionne correctement