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

Schritt-für-Schritt-Anleitung für ProcessWire 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: Zur Vorlagendatei hinzufügen (empfohlen)

ProcessWire verwendet PHP-Vorlagendateien im Verzeichnis site/templates/. Der einfachste Ansatz ist, den Einbettungscode direkt zu Ihrer Haupt-Vorlagendatei hinzuzufügen:

Greifen Sie auf Ihre ProcessWire-Installationsdateien über FTP, SSH oder Ihren Dateimanager zu
Navigieren Sie zu site/templates/
Öffnen Sie Ihre Haupt-Vorlagendatei — dies ist oft _main.php oder basic-page.php, abhängig von Ihrem Website-Profil
Wenn Sie die Delayed-Output-Strategie verwenden (Standard für die meisten Website-Profile), öffnen Sie _main.php
Suchen Sie das schließende </body>-Tag
Fügen Sie Ihren Asyntai-Einbettungscode direkt davor ein:

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

Tipp: Das Platzieren des Skripts direkt vor dem schließenden </body>-Tag stellt sicher, dass der Chatbot nach dem Seiteninhalt geladen wird. Dies wird für optimale Leistung empfohlen und verlangsamt das Rendern Ihrer Seite nicht.

Alternative Methode 1: _foot.inc oder _main.php-Append-Datei verwenden

Wenn Ihre ProcessWire-Website den Append-Datei-Ansatz verwendet (üblich in vielen Website-Profilen), können Sie den Einbettungscode zum gemeinsamen Footer-Include hinzufügen:

Navigieren Sie zu site/templates/
Öffnen Sie _foot.inc (oder Ihre entsprechende Footer-Include-Datei)
Fügen Sie Ihren Asyntai-Einbettungscode direkt vor dem schließenden </body>-Tag ein
Speichern Sie die Datei

Die Delayed-Output-Strategie von ProcessWire arbeitet typischerweise mit drei Schlüsseldateien:

_init.php — wird vor jeder Vorlage ausgeführt, initialisiert Variablen
Ihre Vorlagendatei (z. B. basic-page.php) — füllt Inhaltsvariablen
_main.php — gibt das endgültige HTML-Markup mit diesen Variablen aus

Wenn Ihre Website diesen Ansatz verwendet, stellt das Hinzufügen des Skripts zu _main.php vor </body> sicher, dass es auf jeder Seite erscheint.

Hinweis: Die Dateinamen _init.php und _main.php werden in Ihrer site/config.php über die Einstellungen $config->prependTemplateFile und $config->appendTemplateFile konfiguriert. Überprüfen Sie Ihre Konfiguration, wenn Ihre Dateien anders benannt sind.

Alternative Methode 2: $config->scripts-Array verwenden

ProcessWire bietet ein $config->scripts FilenameArray, mit dem Sie JavaScript-Dateien verwalten können. Fügen Sie in Ihrer _init.php oder einzelnen Vorlagendatei Folgendes hinzu:

<?php
$config->scripts->add('https://asyntai.com/static/js/chat-widget.js');
?>

Dann durchlaufen Sie in Ihrer _main.php (oder Footer-Include) das Scripts-Array, um sie auszugeben:

<?php foreach($config->scripts as $file): ?>
<script src="<?php echo $file; ?>"></script>
<?php endforeach; ?>

Wichtig: Der $config->scripts-Ansatz behandelt das Script-src-Attribut, aber das data-asyntai-id-Attribut muss separat behandelt werden. Sie müssen entweder das Datenattribut manuell in der Schleifenausgabe hinzufügen oder stattdessen die direkte Script-Tag-Methode aus Schritt 2 für die einfachste Einrichtung verwenden.

Alternative Methode 3: Einen Hook verwenden (ready.php)

Für einen fortgeschritteneren Ansatz können Sie das Hook-System von ProcessWire verwenden, um das Chatbot-Skript automatisch auf jeder Seite einzufügen. Fügen Sie Folgendes zu Ihrer site/ready.php-Datei hinzu:

<?php
$wire->addHookAfter('Page::render', function(HookEvent $event) {
    $html = $event->return;
    $script = '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
    $html = str_replace('</body>', $script . '</body>', $html);
    $event->return = $html;
});
?>

Dieser Hook fängt die gerenderte HTML-Ausgabe jeder Seite ab und fügt das Asyntai-Skript automatisch direkt vor dem schließenden </body>-Tag ein.

Tipp: Der ready.php-Hook-Ansatz ist ideal, wenn Sie den Chatbot auf jeder Seite haben möchten, ohne Vorlagendateien zu ändern. Er übersteht auch Vorlagenänderungen und Theme-Updates, da er außerhalb der Vorlagendateien liegt.

Schritt 3: Installation überprüfen

Nachdem Sie Ihre Änderungen gespeichert haben, besuchen Sie Ihre ProcessWire-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 alle geänderten Dateien gespeichert haben. Versuchen Sie, Ihren Browser-Cache zu leeren oder die Seite in einem Inkognito-Fenster anzuzeigen. Wenn der Vorlagen-Cache von ProcessWire aktiviert ist, müssen Sie ihn möglicherweise leeren, indem Sie zu Modules → Core → Template Engine Cache gehen oder ?nocache=1 an Ihre URL anhängen. Überprüfen Sie auch, ob Ihre Vorlagendatei tatsächlich von den Seiten verwendet wird, die Sie anzeigen.