So fügen Sie den Asyntai-KI-Chatbot zu Kirby hinzu

Schritt-für-Schritt-Anleitung für Kirby CMS-Websites

Plattform:

Schritt 1: Ihren Einbettungscode erhalten

Gehen Sie zunächst zu Ihrem Asyntai Dashboard und scrollen Sie zum Abschnitt "Einbettungscode". Kopieren Sie Ihren einzigartigen Einbettungscode, der so aussieht:

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

Hinweis: Der obige Code ist nur ein Beispiel. Sie müssen Ihren eigenen einzigartigen Einbettungscode von Ihrem Dashboard kopieren, da er Ihre persönliche Widget-ID enthält.

Schritt 2: Zum Kirby-Snippet hinzufügen (Empfohlen)

Kirby ist ein dateibasiertes PHP-CMS, das Snippets für wiederverwendbare Vorlagenteile verwendet. Der empfohlene Ansatz ist die Erstellung eines dedizierten Snippets für den Chatbot:

Erstellen Sie eine neue Snippet-Datei unter site/snippets/asyntai-widget.php
Fügen Sie Ihren Einbettungscode in die Datei ein:

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

Binden Sie das Snippet dann in Ihre Hauptvorlage ein (z. B. site/templates/default.php) oder in Ihr Layout, direkt vor dem schließenden </body>-Tag:

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

Tipp: Wenn Sie ein gemeinsames Layout oder Footer-Snippet verwenden, können Sie den Snippet-Aufruf dort hinzufügen, damit er automatisch auf jeder Seite erscheint. Fügen Sie ihn beispielsweise zu Ihrem Footer-Snippet direkt vor </body> hinzu.

Alternative Methode 1: Zum Footer-Snippet hinzufügen

Wenn Ihre Kirby-Website ein Footer-Snippet verwendet, können Sie den Einbettungscode direkt dort hinzufügen:

Öffnen Sie site/snippets/footer.php (erstellen Sie die Datei, falls sie nicht existiert)
Fügen Sie den Einbettungscode vor dem schließenden </body>-Tag ein:

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

Stellen Sie sicher, dass Ihre Vorlagen das Footer-Snippet einbinden:

<?php snippet('footer') ?>

Hinweis: Wenn das Footer-Snippet bereits in allen Ihren Vorlagen eingebunden ist, stellt das Hinzufügen des Chatbots hier sicher, dass er auf jeder Seite erscheint, ohne einzelne Vorlagendateien ändern zu müssen.

Alternative Methode 2: Kirby-Plugin verwenden

Sie können ein Kirby-Plugin erstellen, um das Chatbot-Skript automatisch auf jeder Seite einzufügen, ohne Vorlagen zu ändern:

Erstellen Sie das Plugin-Verzeichnis und die Datei unter site/plugins/asyntai/index.php
Fügen Sie folgenden Code hinzu, um Kirbys Hooks zum Einbinden des Skripts zu verwenden:

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);
        }
    ]
]);

Tipp: Der Plugin-Ansatz ist ideal, wenn Sie möchten, dass der Chatbot automatisch auf jeder Seite geladen wird, ohne Vorlagen- oder Snippet-Dateien zu bearbeiten. Er hält Ihre Chatbot-Integration zudem modular und leicht aktivier- oder deaktivierbar.

Alternative Methode 3: Kirbys js()-Helper verwenden

Kirby bietet einen integrierten js()-Helper zum Laden von JavaScript-Dateien. Sie können ihn in Ihrer Vorlage oder Ihrem Snippet verwenden:

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

Oder fügen Sie das Skript direkt in Ihrer Vorlagen-PHP-Datei vor </body> hinzu:

<?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>

Hinweis: Wenn Sie den js()-Helper verwenden, stellen Sie sicher, dass er im <body>-Bereich Ihrer Vorlage platziert ist, damit der Chatbot korrekt geladen wird.

Schritt 3: Installation überprüfen

Besuchen Sie nach dem Hinzufügen des Einbettungscodes zu Ihrer Kirby-Website Ihre Website in einem neuen Browser-Tab oder Inkognito-Fenster. Sie sollten den Chat-Widget-Button in der unteren rechten Ecke sehen. Klicken Sie darauf, um sicherzustellen, dass er sich öffnet und korrekt funktioniert.

Widget nicht sichtbar? Stellen Sie sicher, dass Sie YOUR_WIDGET_ID durch Ihre tatsächliche Widget-ID aus dem Dashboard ersetzt haben. Überprüfen Sie, ob die Snippet- oder Plugin-Datei im richtigen Verzeichnis gespeichert ist. Wenn Sie die Plugin-Methode verwenden, stellen Sie sicher, dass die Plugin-Verzeichnisstruktur site/plugins/asyntai/index.php ist. Leeren Sie Ihren Browser-Cache oder testen Sie im Inkognito-Modus. Überprüfen Sie die Entwicklerkonsole Ihres Browsers (F12) auf Fehler.