Comment ajouter le chatbot IA Asyntai à Craft CMS

Guide étape par étape pour les sites Craft 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 : Modifier votre modèle de mise en page (recommandé)

La façon la plus simple d'ajouter le chatbot à toutes les pages est de modifier votre template de mise en page principal :

Access your Craft CMS project files via FTP, SSH, or your code editor
Accédez au répertoire templates/
Trouvez votre fichier de mise en page principal (généralement nommé _layout.twig, _layout.html, ou situé dans templates/_layouts/)
Trouvez la balise fermante </body>
Collez votre code d'intégration Asyntai juste avant la balise </body>
Enregistrez le fichier

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

Alternative: Using Twig {% js %} Tag (Craft CMS 3.x+)

Craft CMS provides a built-in Twig tag for registering JavaScript:

Ouvrez votre modèle de mise en page principal
Ajoutez le code suivant avant la balise fermante </body> :
{% js %} (function() { var script = document.createElement('script'); script.async = true; script.src = 'https://asyntai.com/static/js/chat-widget.js'; script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID'); document.body.appendChild(script); })(); {% endjs %}
Replace YOUR_WIDGET_ID with your actual widget ID
Enregistrez le fichier

Note : The {% js %} tag automatically handles script registration and prevents duplicate loading if the same code appears multiple times.

Alternative : Créer un fichier d'inclusion séparé

Pour une meilleure organisation, créez un fichier d'inclusion dédié :

Créez un nouveau fichier : templates/_includes/chatbot.twig (ou .html)
Ajoutez votre code d'intégration Asyntai à ce fichier :
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Dans votre template de mise en page principal, incluez ce fichier avant </body> :
{% include '_includes/chatbot' %}
Enregistrez les deux fichiers

Astuce : L'utilisation d'un fichier d'inclusion facilite l'activation/désactivation du chatbot sur l'ensemble de votre site en commentant une seule ligne.

Alternative : Chargement conditionnel

To load the chatbot only on specific pages or sections:

In your layout or page template, use Twig conditionals:
{% if entry.showChatbot ?? true %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endif %}
Ou vérifiez des sections spécifiques :
{% if craft.app.request.segments[0] != 'admin' %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endif %}

Étape 3 : Vérifier l'installation

Après avoir enregistré vos modifications, visitez votre site Craft CMS 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 enregistré le fichier de modèle et de modifier le bon modèle de mise en page utilisé par vos pages. Videz le cache de votre navigateur ou consultez le site dans une fenêtre de navigation privée. Si vous utilisez la mise en cache des modèles, videz le cache de Craft CMS depuis le panneau de contrôle sous Utilities > Clear Caches.

Emplacement du template : L'emplacement des modèles Craft CMS peut varier selon la configuration de votre projet. Les emplacements courants incluent templates/_layout.twig, templates/_layouts/main.twig ou templates/_base.twig. Vérifiez vos modèles existants pour trouver où la balise </body> est définie.