So fügen Sie den Asyntai AI Chatbot zu SilverStripe hinzu

Schritt-für-Schritt-Anleitung für SilverStripe CMS

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: Zur SilverStripe-Vorlage hinzufügen (empfohlen)

Der einfachste Weg, den Chatbot zu Ihrer SilverStripe-Website hinzuzufügen, ist die direkte Bearbeitung der Haupt-Vorlagendatei Ihres Themes:

Öffnen Sie die Vorlagendatei Ihres Themes (z. B. themes/yourtheme/templates/Page.ss)
Fügen Sie den Einbettungscode direkt vor dem schließenden </body>-Tag hinzu:

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

Speichern Sie die Datei und leeren Sie den SilverStripe-Cache, indem Sie ?flush=1 an Ihre Website-URL anhängen

Tipp: SilverStripe verwendet .ss-Vorlagendateien mit einem Vorlagenvererbungssystem. Das Platzieren des Skripts in Ihrer Basis-Page.ss-Vorlage stellt sicher, dass der Chatbot auf jeder Seite Ihrer Website erscheint. Wenn Ihr Theme einen Includes-Ordner verwendet, können Sie das Skript auch in einer gemeinsamen Include-Datei platzieren.

Alternative Methode 1: Requirements-Klasse im Controller verwenden

SilverStripe bietet eine Requirements-Klasse für die programmatische Verwaltung von JavaScript- und CSS-Abhängigkeiten. Dies ist der empfohlene Ansatz für Entwickler:

Öffnen Sie app/src/PageController.php (oder Ihre Page-Controller-Datei)
Verwenden Sie in der init()-Methode Requirements::customScript(), um das Widget dynamisch zu laden:

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

Speichern Sie die Datei und leeren Sie den Cache, indem Sie yourdomain.com?flush=1 aufrufen

Hinweis: Die Requirements-Klasse ist der SilverStripe-Standardweg zum Einbinden von Skripten und Stylesheets. Die Verwendung von Requirements::customScript() gibt Inline-JavaScript aus. Diese Methode stellt sicher, dass das Widget auf jeder Seite geladen wird, die von Ihrem PageController verarbeitet wird.

Alternative Methode 2: Requirements in der Vorlage verwenden

Sie können auch die SilverStripe-Vorlagensyntax verwenden, um JavaScript-Dateien direkt in Ihrer .ss-Vorlage einzubinden:

Öffnen Sie die Vorlagendatei Ihres Themes (z. B. themes/yourtheme/templates/Page.ss)
Fügen Sie Folgendes nahe dem Ende der Vorlage hinzu, vor </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>

Tipp: Die <% require %>-Syntax ist SilverStripes Methode auf Vorlagenebene zum Einbinden von Assets. Beachten Sie, dass diese Methode das Hinzufügen benutzerdefinierter Datenattribute zum Script-Tag nicht nativ unterstützt, daher fügen wir einen kleinen Initialisierungscode hinzu, um die Widget-ID festzulegen.

Alternative Methode 3: SilverStripe-Konfiguration (YAML) verwenden

Für einen konfigurationsgesteuerten Ansatz können Sie die YAML-Konfiguration von SilverStripe verwenden, um globale Requirements hinzuzufügen:

Öffnen oder erstellen Sie die Datei app/_config/app.yml
Fügen Sie eine Konfiguration hinzu, um das Widget über eine benutzerdefinierte Erweiterung oder Controller-Einrichtung einzubinden:

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

Erstellen Sie die Erweiterungsdatei 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);
        ");
    }
}

Wenden Sie die Erweiterung auf Ihren PageController in app/_config/app.yml an:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

Führen Sie ?flush=1 aus, um den Konfigurations-Cache neu aufzubauen

Hinweis: Die Verwendung von YAML-Konfiguration und Erweiterungen ist der modularste SilverStripe-Ansatz. Er hält Ihre Chatbot-Integration von Ihrer Haupt-Controller-Logik getrennt und erleichtert das Aktivieren oder Deaktivieren ohne Code-Änderungen.

Schritt 3: Installation überprüfen

Nachdem Sie den Code hinzugefügt und den SilverStripe-Cache geleert haben, öffnen Sie Ihre Website in einem neuen Browser-Tab. 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 den Cache geleert haben, indem Sie ?flush=1 an Ihre Website-URL anhängen. Überprüfen Sie, ob Sie YOUR_WIDGET_ID durch Ihre tatsächliche Widget-ID aus dem Dashboard ersetzt haben. Leeren Sie Ihren Browser-Cache oder öffnen Sie die Seite im Inkognito-Modus. Öffnen Sie die Browser-Konsole (F12), um auf JavaScript-Fehler zu prüfen. Wenn Sie die Requirements-Klasse verwenden, überprüfen Sie, ob die init()-Methode Ihres PageControllers korrekt aufgerufen wird.