Zurück zum Dashboard

Dokumentation

Erfahren Sie, wie Sie Asyntai verwenden

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

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

Einbettungscode erhalten

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 Theme-Vorlage hinzufügen (empfohlen)

Backdrop CMS verwendet .tpl.php-Vorlagendateien in seinen Themes. Der empfohlene Ansatz ist, den Einbettungscode direkt zur Seitenvorlage Ihres aktiven Themes hinzuzufügen:

  1. Greifen Sie über FTP oder Dateimanager auf Ihre Backdrop CMS-Installation zu
  2. Navigieren Sie zum Verzeichnis Ihres aktiven Themes: themes/yourtheme/
  3. Öffnen Sie die Datei page.tpl.php (oder layout.tpl.php je nach Theme)
  4. Finden Sie das schließende </body>-Tag oder die Zeile <?php print $page_bottom; ?>
  5. Fügen Sie Ihren Asyntai-Einbettungscode direkt vor dieser Zeile ein
  6. Speichern Sie die Datei
<!-- Asyntai AI Chatbot -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
<?php print $page_bottom; ?>
</body>

Tipp: Das Platzieren des Codes direkt vor <?php print $page_bottom; ?> oder dem schließenden </body>-Tag stellt sicher, dass der Chatbot nach dem Seiteninhalt geladen wird und so eine bessere Seitenladeleistung bietet. Diese Methode fügt den Chatbot automatisch zu jeder Seite hinzu, die dieses Theme verwendet.

Alternative Methode 1: Ein benutzerdefiniertes Modul verwenden

Sie können ein einfaches Backdrop CMS-Modul erstellen, das das Chatbot-Skript mit backdrop_add_js() einfügt:

  1. Erstellen Sie das Modulverzeichnis: modules/custom/asyntai_widget/
  2. Erstellen Sie die Moduldatei asyntai_widget.module mit folgendem Code:
    // modules/custom/asyntai_widget/asyntai_widget.module
    function asyntai_widget_init() {
      backdrop_add_js('https://asyntai.com/static/js/chat-widget.js', array(
        'type' => 'external',
        'scope' => 'footer',
        'attributes' => array('async' => 'async', 'data-asyntai-id' => 'YOUR_WIDGET_ID'),
      ));
    }
  3. Erstellen Sie die Datei asyntai_widget.info:
    name = Asyntai AI Chatbot Widget
    description = Adds the Asyntai AI chatbot widget to all pages.
    backdrop = 1.x
    package = Custom
    type = module
  4. Gehen Sie in Ihrem Backdrop-Administrationsbereich zu Funktionalität (admin/modules)
  5. Finden Sie "Asyntai AI Chatbot Widget" unter dem Paket Custom und aktivieren Sie es
  6. Klicken Sie auf "Konfiguration speichern"

Hinweis: Ersetzen Sie YOUR_WIDGET_ID im Modulcode durch Ihre tatsächliche Widget-ID aus dem Asyntai Dashboard. Der Ansatz mit dem benutzerdefinierten Modul ist upgrade-sicher und wird beim Aktualisieren Ihres Themes nicht überschrieben.

Alternative Methode 2: Backdrops "Add to Head"-Modul verwenden

Das beigetragene "Add to Head"-Modul bietet eine einfache Möglichkeit, Skripte einzufügen, ohne Code zu bearbeiten:

  1. Laden Sie das beigetragene Modul "Add to Head" von der Backdrop CMS-Website herunter und installieren Sie es
  2. Gehen Sie zu Konfiguration > Entwicklung > Zum Head hinzufügen
  3. Fügen Sie Ihren Asyntai-Einbettungscode im Fußzeilenbereich ein
  4. Klicken Sie auf "Konfiguration speichern"

Tipp: Die Verwendung des "Add to Head"-Moduls ist die einfachste Methode, wenn Sie es vorziehen, keine Theme-Dateien zu bearbeiten oder benutzerdefinierte Module zu erstellen. Es bietet eine einfache Admin-Oberfläche zur Verwaltung eingefügter Skripte.

Alternative Methode 3: Das Block-System verwenden

Das Layout- und Block-System von Backdrop CMS kann ebenfalls verwendet werden, um den Chatbot hinzuzufügen:

  1. Melden Sie sich in Ihrem Backdrop-CMS-Admin-Panel an
  2. Gehen Sie zu Struktur > Layouts
  3. Wählen Sie das Layout aus, das Sie bearbeiten möchten (z. B. das Standardlayout)
  4. Klicken Sie auf "Block hinzufügen" im Footer-Bereich
  5. Wählen Sie "Benutzerdefinierter Block"
  6. Setzen Sie das Blockformat auf "Vollständiges HTML" oder "Rohes HTML"
  7. Fügen Sie Ihren Asyntai-Einbettungscode in den Block-Inhalt ein
  8. Geben Sie dem Block einen Titel (z. B. "Asyntai Chatbot") und aktivieren Sie optional "Titel verbergen"
  9. Klicken Sie auf "Block speichern" und dann auf "Layout speichern"

Wichtig: Stellen Sie sicher, dass das Textformat auf "Vollständiges HTML" oder "Rohes HTML" eingestellt ist, damit das Script-Tag nicht entfernt wird. Das Standard-"Gefiltertes HTML"-Format entfernt Script-Tags aus Sicherheitsgründen.

Schritt 3: Cache leeren und überprüfen

Nachdem Sie Ihre Änderungen vorgenommen haben, leeren Sie den Cache von Backdrop CMS und überprüfen Sie die Installation:

  1. Gehen Sie in Ihrem Admin-Panel zu Konfiguration > Leistung
  2. Klicken Sie auf \"Alle Caches leeren\"
  3. Öffnen Sie Ihre Website in einem neuen Browser-Tab oder Inkognito-Fenster
  4. Sie sollten den Chat-Widget-Button in der unteren rechten Ecke sehen
  5. Klicken Sie darauf, um sicherzustellen, dass es korrekt öffnet und funktioniert

Widget nicht sichtbar? Stellen Sie sicher, dass Sie den Cache von Backdrop CMS unter Konfiguration > Leistung geleert haben. Versuchen Sie, Ihre Website in einem Inkognito-Fenster anzuzeigen oder Ihren Browser-Cache zu leeren. Öffnen Sie die Browser-Konsole (F12), um auf JavaScript-Fehler zu prüfen. Wenn Sie die benutzerdefinierte Modul-Methode verwendet haben, überprüfen Sie, ob das Modul unter Funktionalität aktiviert ist.