So fügen Sie den Asyntai AI Chatbot zu Craft CMS hinzu

Schritt-für-Schritt-Anleitung für Craft 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: Ihr Layout-Template bearbeiten (Empfohlen)

Der einfachste Weg, den Chatbot zu allen Seiten hinzuzufügen, ist die Bearbeitung Ihres Haupt-Layout-Templates:

Access your Craft CMS project files via FTP, SSH, or your code editor
Navigieren Sie zum Verzeichnis templates/
Suchen Sie Ihre Haupt-Layout-Datei (üblicherweise _layout.twig, _layout.html genannt oder unter templates/_layouts/ zu finden)
Suchen Sie das schließende </body>-Tag
Fügen Sie Ihren Asyntai-Einbettungscode direkt vor dem </body>-Tag ein
Speichern Sie die Datei

Tipp: Das Hinzufügen des Skripts vor dem schließenden </body>-Tag stellt sicher, dass es nach dem Seiteninhalt geladen wird, was für Chat-Widgets empfohlen wird und das Laden Ihrer Seite nicht verlangsamt.

Alternative: Using Twig {% js %} Tag (Craft CMS 3.x+)

Craft CMS provides a built-in Twig tag for registering JavaScript:

Öffnen Sie Ihr Haupt-Layout-Template
Fügen Sie den folgenden Code vor dem schließenden </body>-Tag hinzu:
{% js %} (function() { var script = document.createElement('script'); script.async = true; script.src = 'https://asyntai.com/static/js/chat-widget.js'; script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID'); document.body.appendChild(script); })(); {% endjs %}
Replace YOUR_WIDGET_ID with your actual widget ID
Speichern Sie die Datei

Hinweis: The {% js %} tag automatically handles script registration and prevents duplicate loading if the same code appears multiple times.

Alternative: Eine separate Include-Datei erstellen

For better organization, create a dedicated include file:

Erstellen Sie eine neue Datei: templates/_includes/chatbot.twig (oder .html)
Fügen Sie Ihren Asyntai-Einbettungscode zu dieser Datei hinzu:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Binden Sie diese Datei in Ihrem Haupt-Layout-Template vor </body> ein:
{% include '_includes/chatbot' %}
Speichern Sie beide Dateien

Tipp: Die Verwendung einer Include-Datei ermöglicht es, den Chatbot auf Ihrer gesamten Website einfach zu aktivieren/deaktivieren, indem Sie eine einzelne Zeile auskommentieren.

Alternative: Bedingtes Laden

To load the chatbot only on specific pages or sections:

Verwenden Sie in Ihrem Layout- oder Seiten-Template Twig-Bedingungen:
{% if entry.showChatbot ?? true %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endif %}
Oder prüfen Sie auf bestimmte Bereiche:
{% if craft.app.request.segments[0] != 'admin' %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endif %}

Schritt 3: Installation überprüfen

Nachdem Sie Ihre Änderungen gespeichert haben, besuchen Sie Ihre Craft CMS-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 die Template-Datei gespeichert haben und das richtige Layout-Template bearbeiten, das Ihre Seiten verwenden. Leeren Sie Ihren Browser-Cache oder zeigen Sie die Seite in einem Inkognito-Fenster an. Wenn Sie Template-Caching verwenden, leeren Sie den Craft CMS-Cache über das Control Panel unter Utilities > Clear Caches.

Template-Speicherort: Die Speicherorte von Craft CMS-Templates können je nach Projekteinrichtung variieren. Häufige Speicherorte sind templates/_layout.twig, templates/_layouts/main.twig oder templates/_base.twig. Überprüfen Sie Ihre vorhandenen Templates, um zu finden, wo das </body>-Tag definiert ist.