Zurück zum Dashboard

Dokumentation

Erfahren Sie, wie Sie Asyntai verwenden

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

Schritt-für-Schritt-Anleitung für MODX 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 MODX-Vorlage hinzufügen (Empfohlen)

Der empfohlene Weg, den Chatbot hinzuzufügen, ist die direkte Bearbeitung Ihrer MODX-Vorlage im MODX Manager:

  1. Melden Sie sich in Ihrem MODX Manager (Admin-Panel) an
  2. Gehen Sie in der linken Seitenleiste zu Elemente > Templates
  3. Öffnen Sie die Vorlage Ihrer Website (normalerweise "BaseTemplate" oder Ihre aktive Vorlage genannt)
  4. Suchen Sie das schließende </body>-Tag im Template-Code
  5. Fügen Sie Ihren Asyntai-Einbettungscode direkt vor dem schließenden </body>-Tag ein
  6. Klicken Sie auf "Save", um die Vorlage zu speichern
<!-- Your existing template content -->

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

Tipp: Das Hinzufügen des Codes direkt vor dem schließenden </body>-Tag stellt sicher, dass der Chatbot nach dem gesamten Seiteninhalt geladen wird, was die empfohlene Platzierung für Chat-Widgets ist und Ihre Seitenladegeschwindigkeit nicht verlangsamt.

Alternative Methode 1: MODX-Chunk verwenden

Sie können einen MODX-Chunk verwenden, um den Einbettungscode separat und wiederverwendbar zu halten:

  1. Gehen Sie im MODX Manager zu Elements > Chunks
  2. Klicken Sie auf "Neuer Chunk", um einen neuen Chunk zu erstellen
  3. Benennen Sie den Chunk "asyntaiWidget"
  4. Fügen Sie Ihren Asyntai-Einbettungscode in den Chunk-Inhaltsbereich ein
  5. Klicken Sie auf "Save"
  6. Öffnen Sie Ihr Template (unter Elemente > Templates)
  7. Fügen Sie den Chunk-Aufruf [[$asyntaiWidget]] direkt vor dem schließenden </body>-Tag hinzu
  8. Speichern Sie das Template
<!-- In your Template, before </body> -->
[[$asyntaiWidget]]
</body>
</html>

Tipp: Die Verwendung eines Chunks erleichtert die Verwaltung und Aktualisierung des Einbettungscodes an einem Ort, insbesondere wenn Sie mehrere Vorlagen auf Ihrer Website verwenden.

Alternative Methode 2: MODX-Systemeinstellungen (HTML Head/Footer) verwenden

Einige MODX-Installationen enthalten Platzhalter für Footer-Skripte über die Systemeinstellungen:

  1. Gehen Sie im MODX Manager zu System > Systemeinstellungen
  2. Filtern Sie nach "htmlhead" oder suchen Sie nach einer benutzerdefinierten Systemeinstellung für Footer-Skripte
  3. Wenn Ihre Installation einen Platzhalter für Footer-Skripte hat (wie [[++footer_scripts]]), können Sie diesen verwenden
  4. Setzen Sie den Systemeinstellungswert auf Ihren Asyntai-Einbettungscode
  5. Stellen Sie sicher, dass der entsprechende Platzhalter [[++footer_scripts]] in Ihrer Vorlage vor dem schließenden </body>-Tag vorhanden ist
  6. Speichern Sie die Systemeinstellung
<!-- In your Template, before </body> -->
[[++footer_scripts]]
</body>
</html>

Hinweis: Diese Methode hängt davon ab, ob Ihre MODX-Installation eine benutzerdefinierte Systemeinstellung für Footer-Skripte hat. Wenn keine vorhanden ist, können Sie eine benutzerdefinierte Systemeinstellung erstellen und sie in Ihrer Vorlage mit der Syntax [[++setting_key]] referenzieren.

Alternative Methode 3: MODX-Plugin verwenden (OnWebPagePrerender)

Für einen fortgeschrittenen Ansatz können Sie ein MODX-Plugin erstellen, das den Chatbot-Code automatisch auf jeder Seite einfügt:

  1. Gehen Sie im MODX Manager zu Elements > Plugins
  2. Klicken Sie auf "Neues Plugin", um ein neues Plugin zu erstellen
  3. Benennen Sie das Plugin "AsyntaiChatbot"
  4. Fügen Sie den folgenden PHP-Code in den Plugin-Codebereich ein:
$output = &$modx->resource->_output;
$script = '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
$output = str_replace('</body>', $script . '</body>', $output);
  1. Klicken Sie auf den Tab "System Events"
  2. Aktivieren Sie das Kontrollkästchen neben "OnWebPagePrerender", um dieses Plugin bei diesem Ereignis auszuführen
  3. Klicken Sie auf "Save"

Wichtig: Ersetzen Sie YOUR_WIDGET_ID durch Ihre tatsächliche Widget-ID aus dem Asyntai Dashboard. Dieses Plugin fügt das Chatbot-Skript automatisch auf jeder Seite Ihrer MODX-Website ein, bevor sie gerendert wird.

Schritt 3: Cache leeren und überprüfen

Nachdem Sie den Einbettungscode mit einer der oben genannten Methoden hinzugefügt haben, müssen Sie den MODX-Cache leeren und die Installation überprüfen:

  1. Gehen Sie im MODX Manager zu Manage > Clear Cache (oder klicken Sie auf das Cache-leeren-Symbol im oberen Menü)
  2. Öffnen Sie Ihre Website in einem neuen Browser-Tab oder Inkognito-Fenster
  3. Sie sollten den Chat-Widget-Button in der unteren rechten Ecke Ihrer Seite sehen
  4. Klicken Sie darauf, um sicherzustellen, dass es sich korrekt öffnet und funktioniert

Widget nicht sichtbar? Stellen Sie sicher, dass Sie den MODX-Cache über Manage > Clear Cache im MODX Manager geleert haben. Versuchen Sie auch, Ihren Browser-Cache zu leeren oder die Website in einem Inkognito-Fenster anzuzeigen. Wenn Sie die Plugin-Methode verwendet haben, überprüfen Sie, ob das Systemereignis "OnWebPagePrerender" für Ihr Plugin aktiviert ist.