Comment ajouter le chatbot IA Asyntai à Kirby

Guide étape par étape pour les sites Kirby 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 snippet Kirby (recommandé)

Kirby est un CMS PHP basé sur des fichiers qui utilise des snippets pour les parties de modèle réutilisables. L'approche recommandée consiste à créer un snippet dédié pour le chatbot :

Créez un nouveau fichier de snippet à l'emplacement site/snippets/asyntai-widget.php
Collez votre code d'intégration dans le fichier :

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

Puis incluez l'extrait dans votre template principal (par exemple, site/templates/default.php) ou votre mise en page, juste avant la balise fermante </body> :

<?php snippet('asyntai-widget') ?>
</body>
</html>

Astuce : Si vous utilisez une mise en page partagée ou un snippet de pied de page, vous pouvez y ajouter l'appel du snippet afin qu'il apparaisse automatiquement sur chaque page. Par exemple, ajoutez-le à votre snippet de pied de page juste avant </body>.

Méthode alternative 1 : Ajout au snippet de pied de page

Si votre site Kirby utilise un snippet de pied de page, vous pouvez y ajouter directement le code d'intégration :

Ouvrez site/snippets/footer.php (créez-le s'il n'existe pas)
Ajoutez le code d'intégration avant la balise de fermeture </body> :

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

Assurez-vous que vos modèles incluent le snippet de pied de page :

<?php snippet('footer') ?>

Note : Si le snippet de pied de page est déjà inclus dans tous vos modèles, ajouter le chatbot ici garantit qu'il apparaîtra sur chaque page sans modifier les fichiers de modèle individuellement.

Méthode alternative 2 : Utilisation d'un plugin Kirby

Vous pouvez créer un plugin Kirby pour injecter automatiquement le script du chatbot dans chaque page sans modifier aucun template :

Créez le répertoire du plugin et le fichier à l'emplacement site/plugins/asyntai/index.php
Ajoutez le code suivant pour injecter le script dynamiquement :

Kirby::plugin('custom/asyntai', [
    'hooks' => [
        'page.render:after' => function ($contentType, $body) {
            $script = '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
            return str_replace('</body>', $script . '</body>', $body);
        }
    ]
]);

Astuce : L'approche par plugin est idéale si vous souhaitez que le chatbot se charge automatiquement sur chaque page sans modifier aucun fichier de template ou d'extrait. Elle garde également votre intégration de chatbot modulaire et facile à activer ou désactiver.

Méthode alternative 3 : Utilisation du helper js() de Kirby

Kirby fournit un helper js() intégré pour charger des fichiers JavaScript. Vous pouvez l'utiliser dans votre modèle ou snippet :

<?= js('https://asyntai.com/static/js/chat-widget.js', ['async' => true, 'data-asyntai-id' => 'YOUR_WIDGET_ID']) ?>

Ou ajoutez le script directement dans votre fichier PHP de modèle avant </body> :

<?php // site/templates/default.php ?>
<html>
<head>
    <!-- head content -->
</head>
<body>
    <!-- page content -->
    <?php snippet('header') ?>
    <main>
        <?= $page->text()->kirbytext() ?>
    </main>
    <?php snippet('footer') ?>

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

Note : Si vous utilisez le helper js(), assurez-vous qu'il est placé à l'intérieur de la section <body> de votre modèle pour garantir le bon chargement du chatbot.

Étape 3 : Vérifier l'installation

Après avoir ajouté le code d'intégration à votre site Kirby, visitez votre site web 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 remplacé YOUR_WIDGET_ID par votre identifiant de widget réel depuis le Tableau de bord. Vérifiez que le fichier snippet ou plugin est enregistré dans le bon répertoire. Si vous utilisez la méthode plugin, assurez-vous que la structure du répertoire du plugin est site/plugins/asyntai/index.php. Videz le cache de votre navigateur ou testez en mode navigation privée. Vérifiez la console de développement de votre navigateur (F12) pour toute erreur.