Comment ajouter le chatbot IA Asyntai à October CMS

Guide étape par étape pour les sites October 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 mise en page (recommandé)

La méthode recommandée pour ajouter le chatbot est de modifier votre mise en page par défaut dans le backend October CMS :

Connectez-vous à votre back-office October CMS
Accédez à CMS > Layouts dans le menu principal
Ouvrez votre mise en page par défaut (généralement default.htm)
Trouvez la balise fermante </body> et le {% scripts %} l'espace réservé
Ajoutez votre code d'intégration Asyntai juste avant {% scripts %} et </body> :
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% scripts %} </body>
Cliquez sur "Save" pour appliquer les modifications

Astuce : Placing the script before {% scripts %} and </body> ensures it loads after the page content, which is recommended for chat widgets and won't slow down your page loading.

Alternative Method 1: Using {% put scripts %} Block

Vous pouvez utiliser l'espace réservé aux scripts d'October CMS pour injecter le chatbot depuis une page ou un partial :

Ouvrez n'importe quelle page ou partial dans l'éditeur du CMS
Ajoutez le code suivant en utilisant le {% put scripts %} bloc :
{% put scripts %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endput %}
Remplacez YOUR_WIDGET_ID par votre identifiant de widget réel depuis le tableau de bord
Cliquez sur "Save"

Note : For this method to work, your layout must include the {% scripts %} placeholder in its markup. This is where October CMS renders all injected scripts. Most default layouts already include this tag.

Méthode alternative 2 : Utilisation du composant PHP

Si vous préférez une approche programmatique, vous pouvez ajouter le script du chatbot via un composant personnalisé :

Créez ou modifiez un composant dans votre plugin October CMS
Dans la méthode onRun() du composant, utilisez la méthode addJs() :
public function onRun() { $this->addJs('https://asyntai.com/static/js/chat-widget.js', [ 'async' => true, 'data-asyntai-id' => 'YOUR_WIDGET_ID' ]); }
Remplacez YOUR_WIDGET_ID par votre identifiant de widget réel
Enregistrez le composant sur les pages où vous souhaitez que le chatbot apparaisse

Astuce : L'utilisation d'un composant vous donne un contrôle programmatique sur le moment et l'endroit où le chatbot se charge. Vous pouvez ajouter une logique conditionnelle dans onRun() pour contrôler le chargement en fonction des rôles d'utilisateurs, des types de pages ou d'autres critères.

Méthode alternative 3 : Utilisation d'un partiel

Vous pouvez créer un partial réutilisable pour le widget de chat :

Accédez à CMS > Partials dans le back-office October CMS
Cliquez sur "+ Add" pour créer un nouveau partial
Nommez-le asyntai-widget.htm
Ajoutez votre code d'intégration Asyntai au partial :
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Cliquez sur "Save"
Ouvrez votre template de mise en page et incluez le partial avant </body> :
{% partial 'asyntai-widget' %}
Enregistrez la mise en page

Astuce : L'utilisation d'un partial facilite l'activation ou la désactivation du chatbot sur l'ensemble de votre site en ajoutant ou en supprimant simplement l'inclusion du partial dans votre mise en page.

Étape 3 : Vérifier l'installation

Après avoir enregistré vos modifications, visitez votre site October 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é toutes les modifications dans le back-office du CMS. Videz le cache de votre navigateur ou consultez le site dans une fenêtre de navigation privée. Si votre site utilise la mise en cache, videz le cache d'October CMS en exécutant php artisan cache:clear depuis la ligne de commande, ou utilisez l'option Settings > System > Clear Cache dans le back-office.

Sélection de la mise en page : Assurez-vous que les pages où vous souhaitez afficher le chatbot utilisent la bonne mise en page. Vous pouvez vérifier quelle mise en page une page utilise en l'ouvrant dans CMS > Pages et en consultant le menu déroulant Layout dans les paramètres de la page.