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

Schritt-für-Schritt-Anleitung für Grav 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: Zum Grav-Theme-Template hinzufügen (Empfohlen)

Der beste Weg, den Chatbot auf allen Seiten Ihrer Grav-Website hinzuzufügen, ist die Bearbeitung des Basis-Twig-Templates Ihres Themes:

Navigieren Sie zum Verzeichnis user/themes/yourtheme/templates/ Ihres Grav-Projekts und öffnen Sie default.html.twig (oder das von Ihrem Theme verwendete Basis-Template)
Fügen Sie Ihren Asyntai-Einbettungscode vor dem schließenden </body>-Tag hinzu:

<!-- user/themes/yourtheme/templates/default.html.twig -->
...
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

Speichern Sie die Datei

Tipp: Grav verwendet Twig als Template-Engine. Das Basis-Template ist typischerweise default.html.twig oder partials/base.html.twig, abhängig von Ihrem Theme. Überprüfen Sie die Struktur Ihres Themes, um die richtige Datei zu finden, die das schließende </body>-Tag enthält.

Alternative Methode 1: Verwendung des Grav Asset Managers

Der integrierte Asset Manager von Grav bietet eine saubere Möglichkeit, JavaScript-Assets über Twig hinzuzufügen:

Öffnen Sie das Basis-Twig-Template Ihres Themes (z.B. user/themes/yourtheme/templates/partials/base.html.twig)
Verwenden Sie den Asset Manager, um das JavaScript hinzuzufügen:

{% do assets.addJs('https://asyntai.com/static/js/chat-widget.js', {group: 'bottom', loading: 'async', 'data-asyntai-id': 'YOUR_WIDGET_ID'}) %}

Oder fügen Sie Inline-JavaScript hinzu, um das Script-Element dynamisch in Ihrem Basis-Template zu erstellen:

<!-- user/themes/yourtheme/templates/partials/base.html.twig -->
...
{% block bottom %}
    {{ assets.js('bottom') }}
{% endblock %}

<script>
(function() {
  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.body.appendChild(script);
})();
</script>
</body>
</html>

Hinweis: Die Asset-Manager-Methode ist der von Grav empfohlene Ansatz zur Verwaltung von JavaScript-Assets. Sie bietet integrierte Unterstützung für Asset-Pipelining, Sortierung und Gruppierung.

Alternative Methode 2: Verwendung des Custom-JS-Plugins

Wenn Sie einen Plugin-basierten Ansatz ohne Bearbeitung von Theme-Dateien bevorzugen:

Installieren Sie das Plugin "Custom JS" über das Grav-Admin-Panel oder die CLI:

bin/gpm install custom-js

Gehen Sie zu Admin > Plugins > Custom JS
Fügen Sie den Einbettungs-Script-Code hinzu:

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

Speichern Sie die Plugin-Konfiguration

Tipp: Die Verwendung eines Plugins zum Einfügen von Scripts bedeutet, dass Sie keine Theme-Dateien ändern müssen. Dies erleichtert den Wechsel oder die Aktualisierung von Themes, ohne Ihre Chatbot-Integration zu verlieren.

Alternative Methode 3: Verwendung von Block-Override im Child-Template

Wenn Ihr Grav-Theme Twig-Block-Vererbung verwendet, können Sie den Bottom-Block in einem Child-Template überschreiben:

{% block bottom %}
    {{ parent() }}
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{% endblock %}

Erstellen oder öffnen Sie ein untergeordnetes Template, das das Basis-Template Ihres Themes erweitert
Fügen Sie das oben gezeigte Block-Override hinzu
Der Aufruf von parent() stellt sicher, dass der gesamte vorhandene Inhalt im Block erhalten bleibt

Hinweis: Diese Methode verwendet das Template-Vererbungssystem von Twig. Stellen Sie sicher, dass der Blockname (z.B. bottom) mit dem in Ihrem Theme-Basis-Template definierten Block übereinstimmt. Gängige Blocknamen sind bottom, javascripts oder footer.

Alternative Methode 4: Verwendung des Grav Custom Head-Plugins

Eine weitere Plugin-basierte Option ist das Custom Head-Plugin:

Installieren Sie das custom-head-Plugin über CLI oder Admin-Panel:

bin/gpm install custom-head

Gehen Sie zu Admin > Plugins > Custom Head
Fügen Sie Ihren Asyntai-Einbettungsskriptcode in die Plugin-Konfiguration ein:

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

Speichern Sie die Konfiguration

Tipp: Das Custom Head-Plugin ermöglicht es Ihnen, Code in die Head- oder Body-Bereiche Ihrer Website einzufügen, ohne Theme-Dateien zu berühren. Überprüfen Sie die Plugin-Dokumentation für die richtige Platzierungsoption, um das Script vor dem schließenden </body>-Tag einzufügen.

Schritt 3: Cache leeren und überprüfen

Nachdem Sie den Code hinzugefügt haben, leeren Sie den Grav-Cache und überprüfen Sie die Installation:

# Clear cache via CLI
bin/grav clearcache

# Or clear cache from Admin Panel:
# Admin > Tools > Clear Cache

Öffnen Sie Ihre Grav-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 Grav-Cache mit bin/grav clearcache oder über das Administrationspanel geleert haben. Ü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 verwenden Sie den Inkognito-Modus. Öffnen Sie die Browser-Konsole (F12), um nach JavaScript-Fehlern zu suchen. Überprüfen Sie, ob das Script im Seitenquelltext vorhanden ist, indem Sie mit der rechten Maustaste klicken und "Seitenquelltext anzeigen" wählen.