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

Schritt-für-Schritt-Anleitung für OpenCart-Websites

Plattform:

The Easy Way: Install the Asyntai Extension

We publish a free extension on the OpenCart Marketplace. It puts the chatbot on your storefront and connects your account, and there is no code to copy and no template to edit. It works on OpenCart 3.x and 4.x.

Download Asyntai - AI Chatbot from the OpenCart Marketplace
In your admin panel, go to Extensions → Installer and upload the ZIP file
Go to Extensions → Extensions, choose Modules in the list, find Asyntai AI Chatbot and press the green install button
Press edit, then press Connect to Asyntai. A window opens where you sign in or create an account.

That is all. The chatbot is live on your storefront when the window closes.

Your products, prices and stock

When you connect, the extension also lets Asyntai read your catalogue. Your assistant then answers with the price you charge today and tells shoppers what is in stock, instead of repeating whatever your pages said when they were last read.

Asyntai reads your products through a read-only address on your own store. Every request is signed, and the reply carries the prices a shopper would actually pay, with your tax rules already applied. You can switch this off at any time on the extension's settings screen.

Updating from version 1.0.0? OpenCart clears a module's settings when you uninstall it, so press Connect to Asyntai once after the update. From this version on, updates keep your connection.

Or Add the Code Yourself

Prefer not to install an extension? The rest of this page shows how to add the chatbot by hand. You will not get the catalogue reading this way.

Schritt 1: Ihren Einbettungscode erhalten

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</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.

Step 2: Edit Footer Template

Der einfachste Weg, den Chatbot hinzuzufügen, ist die Bearbeitung der Footer-Vorlage Ihres Themes:

Greifen Sie per FTP oder Dateimanager auf Ihre OpenCart-Dateien zu
Navigieren Sie zur Footer-Vorlage Ihres Themes:
- OpenCart 3.x/4.x: catalog/view/theme/YOUR_THEME/template/common/footer.twig
- OpenCart 2.x: catalog/view/theme/YOUR_THEME/template/common/footer.tpl
Öffnen Sie die Footer-Datei zur Bearbeitung
Suchen Sie das schließende </body>-Tag
Fügen Sie Ihren Asyntai-Einbettungscode direkt vor dem </body>-Tag ein
Speichern Sie die Datei
Leeren Sie den OpenCart-Cache: Dashboard → Blaues Zahnrad-Symbol (oben rechts) → Aktualisieren oder löschen Sie den Inhalt von system/storage/cache/

Tipp: Wenn Sie das Standard-Theme verwenden, lautet der Pfad catalog/view/theme/default/template/common/footer.twig. Erstellen Sie immer ein Backup, bevor Sie Vorlagendateien bearbeiten.

Alternative: Benutzerdefinierte Code-Option des Themes verwenden

Viele moderne OpenCart-Themes bieten eine integrierte Option für benutzerdefinierten Code:

Melden Sie sich in Ihrem OpenCart-Adminbereich an
Gehen Sie zu Extensions → Themes (oder Extensions → Extensions → Themes)
Klicken Sie bei Ihrem aktiven Theme auf Edit
Suchen Sie nach einem Abschnitt "Custom Code", "Footer Scripts" oder "Custom JavaScript"
Fügen Sie Ihren Asyntai-Einbettungscode ein
Klicken Sie auf "Save"
Leeren Sie den Cache

Hinweis: Nicht alle Themes haben diese Option. Wenn Ihr Theme keine benutzerdefinierten Code-Felder enthält, verwenden Sie die Methode zur Vorlagenbearbeitung oder installieren Sie eine Erweiterung.

Alternative: Eine benutzerdefinierte Code-Erweiterung verwenden

Sie können eine kostenlose Erweiterung aus dem OpenCart Marketplace installieren, um benutzerdefinierte Skripte hinzuzufügen:

Go to the OpenCart Marketplace
Suchen Sie nach "Custom Script", "Header Footer Scripts" oder "Custom Code"
Laden Sie eine geeignete Erweiterung herunter und installieren Sie sie
Gehen Sie in Ihrem Adminbereich zu Extensions → Extensions → Modules
Suchen und installieren Sie das benutzerdefinierte Code-Modul
Konfigurieren Sie das Modul und fügen Sie Ihren Asyntai-Einbettungscode im Footer-Bereich ein
Speichern Sie und leeren Sie den Cache

Wichtig: Die Verwendung von Erweiterungen wird gegenüber der Bearbeitung von Kerndateien empfohlen, da sie OpenCart-Updates überstehen. Beliebte Erweiterungen sind "Custom Script in Header & Footer", verfügbar im Marketplace.

Alternative: addScript-Methode verwenden (für Entwickler)

Für Entwickler bietet OpenCart 3.x/4.x eine programmatische Möglichkeit, Skripte hinzuzufügen:

Öffnen Sie catalog/controller/common/footer.php
Fügen Sie die folgende Zeile vor $data['scripts'] = $this->document->getScripts('footer'); hinzu:
$this->document->addScript('https://asyntai.com/static/js/chat-widget.js', 'footer');
Für das Datenattribut müssen Sie die footer.twig manuell anpassen oder Inline-JavaScript nach der Skript-Schleife hinzufügen

Hinweis: Damit das Widget mit dem Datenattribut korrekt funktioniert, ist die Vorlagen-Methode einfacher, da die addScript-Methode benutzerdefinierte Attribute nicht direkt unterstützt.

Schritt 3: Installation überprüfen

Nachdem Sie Ihre Änderungen gespeichert und den Cache geleert haben, besuchen Sie Ihren Shop 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 den OpenCart-Cache leeren. Gehen Sie zu Ihrem Adminbereich, klicken Sie auf das blaue Zahnrad-Symbol in der oberen rechten Ecke und klicken Sie auf die Aktualisierungsschaltflächen. Versuchen Sie auch, Ihren Browser-Cache zu leeren oder die Seite in einem Inkognito-Fenster anzuzeigen. Wenn Sie die falsche Vorlagendatei bearbeitet haben, überprüfen Sie, ob Ihr Theme die von Ihnen bearbeitete Datei verwendet.

Dokumentation