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

Schritt-für-Schritt-Anleitung für Statamic 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: Installationsmethode wählen

Statamic unterstützt sowohl Antlers als auch Blade Templating. Wählen Sie die Methode basierend darauf, welche Template-Engine Sie verwenden:

Methode 1: Antlers-Layout (empfohlen)

Der einfachste Weg, den Chatbot hinzuzufügen, ist, ihn in Ihre Haupt-Layout-Datei einzubinden. Statamic verwendet Antlers als Standard-Template-Engine.

Navigieren Sie zum Verzeichnis resources/views Ihres Statamic-Projekts
Open your layout file (usually layout.antlers.html)
Suchen Sie das schließende </body>-Tag
Fügen Sie Ihren Asyntai-Einbettungscode direkt vor dem </body>-Tag ein
Speichern Sie die Datei

<!DOCTYPE html>
<html lang="{{ site:short_locale }}">
<head>
  <meta charset="utf-8">
  <title>{{ title }} | {{ site:name }}</title>
  {{ vite src="resources/js/site.js|resources/css/site.css" }}
</head>
<body>
  {{ template_content }}

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

Tipp: The {{ template_content }} variable is where Statamic injects your page content. Always add the chatbot script after this, just before </body>.

Methode 2: Blade-Layout

If you're using Blade templates instead of Antlers, follow these steps:

Navigieren Sie zum Verzeichnis resources/views Ihres Statamic-Projekts
Open your Blade layout file (e.g., layout.blade.php)
Suchen Sie das schließende </body>-Tag
Fügen Sie Ihren Asyntai-Einbettungscode direkt vor dem </body>-Tag ein
Speichern Sie die Datei

<!DOCTYPE html>
<html lang="{{ $site->shortLocale() }}">
<head>
  <meta charset="utf-8">
  <title>{{ $title }} | {{ $site->name() }}</title>
  @vite(['resources/js/site.js', 'resources/css/site.css'])
</head>
<body>
  {!! $template_content !!}

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

Hinweis: In Blade templates, use {!! $template_content !!} to render the page content. The !! syntax prevents HTML escaping.

Methode 3: Ein Partial verwenden

Für eine bessere Organisation können Sie ein wiederverwendbares Partial für den Chatbot erstellen:

Schritt 1: Das Partial erstellen

Erstellen Sie eine neue Datei unter resources/views/partials/_chatbot.antlers.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>

Schritt 2: In Ihr Layout einbinden

Öffnen Sie Ihre Layout-Datei (layout.antlers.html)
Fügen Sie den Partial-Tag vor </body> hinzu:
{{ partial:chatbot }} </body>

Warum ein Partial verwenden? Partials erleichtern die Verwaltung externer Skripte an einem Ort. Wenn Sie jemals den Chatbot-Code aktualisieren müssen, müssen Sie nur eine Datei bearbeiten.

Mehrere Layouts verwenden

Wenn Ihre Statamic-Website mehrere Layouts verwendet (z. B. verschiedene Layouts für Blog-Beiträge, Landingpages usw.), stellen Sie sicher, dass Sie das Chatbot-Skript zu jeder Layout-Datei hinzufügen, in der das Widget erscheinen soll.

You can set which layout a page uses in several ways:

Im Eintrag: Fügen Sie layout: your_layout zum Front Matter hinzu
In der Sammlung: Legen Sie ein Standard-Layout in der YAML-Konfigurationsdatei Ihrer Sammlung fest
In einem Blueprint: Fügen Sie ein Layout-Feld hinzu, aus dem Redakteure wählen können

Für Statamic Starter Kits

Wenn Sie ein Statamic Starter Kit verwenden, kann der Layout-Speicherort variieren. Häufige Speicherorte sind:

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html mit Partials in resources/views/snippets/

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

Schritt 3: Cache leeren und überprüfen

Nachdem Sie den Code hinzugefügt haben, leeren Sie Ihren Statamic-Cache, um sicherzustellen, dass die Änderungen wirksam werden:

php artisan cache:clear
php please stache:refresh

Besuchen Sie dann Ihre 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 sowohl den Laravel-Cache als auch Statamics Stache geleert haben. Wenn Sie statisches Caching verwenden, führen Sie auch php please static:clear aus. Überprüfen Sie die Konsole Ihres Browsers (F12) auf JavaScript-Fehler.

Wichtig: Wenn Sie Statamics Static-Site-Generator (ssg) verwenden, stellen Sie sicher, dass Sie Ihre statischen Dateien nach dem Hinzufügen des Chatbot-Skripts neu generieren, indem Sie php please ssg:generate ausführen.

Dokumentation