Comment ajouter le chatbot IA Asyntai à SilverStripe

Guide étape par étape pour SilverStripe 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 SilverStripe (recommandé)

La façon la plus simple d'ajouter le chatbot à votre site SilverStripe est de modifier directement le fichier de template principal de votre thème :

Ouvrez le fichier de modèle de votre thème (par ex., themes/yourtheme/templates/Page.ss)
Ajoutez le code d'intégration juste avant la balise fermante </body> :

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

Enregistrez le fichier et videz le cache SilverStripe en ajoutant ?flush=1 à l'URL de votre site

Astuce : SilverStripe utilise des fichiers de modèle .ss avec un système d'héritage de modèles. Placer le script dans votre modèle Page.ss de base garantit que le chatbot apparaît sur chaque page de votre site. Si votre thème utilise un dossier Includes, vous pouvez également placer le script dans un fichier d'inclusion partagé.

Méthode alternative 1 : Utilisation de la classe Requirements dans le contrôleur

SilverStripe fournit une classe Requirements pour gérer les dépendances JavaScript et CSS de manière programmatique. C'est l'approche recommandée pour les développeurs :

Ouvrez app/src/PageController.php (ou votre fichier de contrôleur de page)
Dans la méthode init(), utilisez Requirements::customScript() pour charger dynamiquement le widget :

use SilverStripe\View\Requirements;

class PageController extends \SilverStripe\CMS\Controllers\ContentController
{
    protected function init()
    {
        parent::init();
        Requirements::customScript(<<<JS
            var script = document.createElement('script');
            script.src = 'https://asyntai.com/static/js/chat-widget.js';
            script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
            script.async = true;
            document.head.appendChild(script);
        JS);
    }
}

Enregistrez le fichier et videz le cache en visitant yourdomain.com?flush=1

Note : La classe Requirements est la méthode standard de SilverStripe pour inclure des scripts et des feuilles de style. L'utilisation de Requirements::customScript() génère du JavaScript en ligne. Cette méthode garantit que le widget est chargé sur chaque page gérée par votre PageController.

Méthode alternative 2 : Utilisation des Requirements dans le template

Vous pouvez également utiliser la syntaxe de template de SilverStripe pour inclure des fichiers JavaScript directement dans votre template .ss :

Ouvrez le fichier de modèle de votre thème (par ex., themes/yourtheme/templates/Page.ss)
Ajoutez le code suivant vers le bas du template, avant </body> :

<% require javascript("https://asyntai.com/static/js/chat-widget.js") %>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var scripts = document.querySelectorAll('script[src*="chat-widget.js"]');
        scripts.forEach(function(s) {
            s.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
        });
    });
</script>
</body>

Astuce : La syntaxe <% require %> est la méthode de SilverStripe au niveau template pour inclure des ressources. Notez que cette méthode ne prend pas en charge nativement l'ajout d'attributs de données personnalisés à la balise script, nous ajoutons donc un petit extrait d'initialisation pour définir l'ID du widget.

Méthode alternative 3 : Utilisation de la configuration SilverStripe (YAML)

Pour une approche basée sur la configuration, vous pouvez utiliser la configuration YAML de SilverStripe pour ajouter des ressources globales :

Ouvrez ou créez le fichier app/_config/app.yml
Ajoutez la configuration pour inclure le widget via une extension personnalisée ou une configuration de contrôleur :

# app/_config/app.yml
---
Name: asyntai-chatbot
After: '#rootroutes'
---
SilverStripe\Core\Injector\Injector:
  AsyntaiChatbotExtension:
    class: App\Extensions\AsyntaiChatbotExtension

Créez le fichier d'extension app/src/Extensions/AsyntaiChatbotExtension.php :

namespace App\Extensions;

use SilverStripe\Core\Extension;
use SilverStripe\View\Requirements;

class AsyntaiChatbotExtension extends Extension
{
    public function onAfterInit()
    {
        Requirements::customScript("
            var script = document.createElement('script');
            script.src = 'https://asyntai.com/static/js/chat-widget.js';
            script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
            script.async = true;
            document.head.appendChild(script);
        ");
    }
}

Appliquez l'extension à votre PageController dans app/_config/app.yml :

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

Exécutez ?flush=1 pour reconstruire le cache de configuration

Note : L'utilisation de la configuration YAML et des extensions est l'approche SilverStripe la plus modulaire. Elle garde votre intégration de chatbot séparée de la logique de votre contrôleur principal et facilite l'activation ou la désactivation sans modifier le code.

Étape 3 : Vérifier l'installation

Après avoir ajouté le code et vidé le cache de SilverStripe, ouvrez votre site dans un nouvel onglet de navigateur. 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 en ajoutant ?flush=1 à l'URL de votre site. Vérifiez que vous avez remplacé YOUR_WIDGET_ID par votre identifiant de widget réel depuis le Tableau de bord. Videz le cache de votre navigateur ou consultez le site en mode navigation privée. Ouvrez la console du navigateur (F12) pour vérifier s'il y a des erreurs JavaScript. Si vous utilisez la classe Requirements, vérifiez que la méthode init() de votre PageController est appelée correctement.