JTL-Shop-Anleitung

FirstBot-Widget in Ihren JTL-Shop mit Nova-Template einbinden

Getestet mit JTL-Shop 5.x · Nova-Template (Standard)

Inhalt

Ihr persönlicher Code-Schnipsel
Methode 1: Fertiges Plugin installieren (empfohlen)
Methode 2: Code in header.tpl (Nova Child-Template)
Methode 3: Custom JS über das JTL-Backend
Widget testen
Häufige Fragen & Probleme

★ Ihr persönlicher Code-Schnipsel

Wenn Sie sich einloggen, wird Ihr persönlicher API-Key hier automatisch eingesetzt.

            
<script>
  window.chatBotId = 'IHR-API-KEY';
</script>
<script src="https://firstbot.de/chatbot.js" defer></script>
        

Dieser Code muss einmalig in den <head>-Bereich Ihres JTL-Shops eingefügt werden.

1 Fertiges Plugin installieren (empfohlen)

★ Empfohlen – Update-sicher, funktioniert mit Nova

Wir stellen ein fertiges JTL-Shop-Plugin bereit, das den Chatbot automatisch einbindet. Kein Dateien-Editieren, kein Template-Eingriff – das Plugin funktioniert mit dem Standard-Nova-Template und bleibt bei Shop- und Template-Updates erhalten.

JTL-Shop-Plugin herunterladen

firstbot_chatbot.zip

Kompatibel mit JTL-Shop 5.0 und neuer · Standard-Nova-Template

Schritt 1 – Plugin herunterladen

Klicken Sie auf den Download-Button oben. Sie erhalten die Datei firstbot_chatbot.zip (ca. 4 KB). Nicht entpacken – die ZIP-Datei wird direkt ins JTL-Backend hochgeladen.

Schritt 2 – Plugin im JTL-Backend installieren

Loggen Sie sich in Ihr JTL-Shop-Backend ein.
Navigieren Sie zu Plugins → Plugin-Manager (bei älteren Versionen: Pluginverwaltung).
Klicken Sie auf den Tab „Upload" (bzw. das Upload-Symbol).
Wählen Sie die heruntergeladene firstbot_chatbot.zip aus und laden Sie sie hoch.
Das Plugin „FirstBot Chatbot" erscheint nun unter „Verfügbar".
Klicken Sie auf „Installieren" und anschließend auf „Aktivieren".

Schritt 3 – API-Key hinterlegen

Nach der Aktivierung erscheint das Plugin unter Plugins → Aktiviert → FirstBot Chatbot.

Öffnen Sie das Plugin und wechseln Sie zum Tab „Einstellungen".
Tragen Sie Ihren API-Key in das Feld „API-Key" ein:
IHR-API-KEY
Stellen Sie „Aktiv" auf „Ja".
Klicken Sie auf „Speichern".

Schritt 4 – Cache leeren & testen

Gehen Sie zu System → Cache und klicken auf „Alle Caches leeren".
Öffnen Sie Ihren Shop im Frontend (Strg+Shift+R für Hard-Reload).
Der Chat-Button erscheint unten rechts.

✓ Das Plugin ist Nova-kompatibel und hängt sich über den Shop-Hook HOOK_SMARTY_OUTPUTFILTER direkt in den <head>-Bereich. Kein Template-Eingriff nötig, keine Veränderung von Nova-Dateien.

2 Code in header.tpl (Nova Child-Template)

Für Template-Entwickler

Wenn Sie kein Plugin nutzen möchten oder bereits ein eigenes Child-Template im Einsatz haben, können Sie den Code direkt in die Nova-header.tpl einfügen.

⚠ Wichtig: Bearbeiten Sie niemals das Standard-Nova-Template direkt – Ihre Änderungen gehen bei jedem Template-Update verloren. Nutzen Sie stets ein Child-Template.

Schritt 1 – Child-Template anlegen (falls noch nicht vorhanden)

Verbinden Sie sich per FTP/SFTP mit Ihrem Server.
Kopieren Sie den Ordner templates/NOVA nach templates/NOVA-Custom (Name frei wählbar).
Passen Sie in templates/NOVA-Custom/template.xml den <Name> an, z. B. „NOVA Custom".
Aktivieren Sie das neue Template im Backend unter Storefront → Template.

Schritt 2 – header.tpl bearbeiten

Öffnen Sie im Child-Template die Datei:

templates/NOVA-Custom/layout/header.tpl

Suchen Sie das schließende </head>-Tag und fügen Sie den Code direkt davor ein:

{* FirstBot Chatbot Widget *}
<script>
  window.chatBotId = 'IHR-API-KEY';
</script>
<script src="https://firstbot.de/chatbot.js" defer></script>
            

Schritt 3 – Cache leeren

System → Cache → Template-Cache leeren und „Objekt-Cache leeren".
Shop im Frontend mit Strg+Shift+R neu laden.

Smarty-Hinweis: Der Smarty-Kommentar {* ... *} ist korrekt. JavaScript wird normal als HTML ausgegeben. Vermeiden Sie geschweifte Klammern { } in Ihrem JS-Code oder wrappen Sie sie in {literal}...{/literal}.

3 Custom JS über das JTL-Backend

Ohne FTP-Zugriff

Wenn Sie keinen FTP-Zugriff haben oder weder Plugin noch Template bearbeiten möchten, bieten manche JTL-Shop-Versionen die Möglichkeit, eigenen JavaScript-Code direkt im Backend einzufügen.

Schritt 1 – Backend-Bereich finden

Je nach JTL-Shop-Version heißt der Bereich unterschiedlich:

Storefront → Template-Einstellungen → Eigenes CSS/JS
Darstellung → Template → Custom JavaScript
Oder im aktiven Template-Tab „Erweitert" / „Kopfbereich"

Schritt 2 – Code einfügen

// FirstBot Chatbot Widget
window.chatBotId = 'IHR-API-KEY';

(function() {
  var s = document.createElement('script');
  s.src = 'https://firstbot.de/chatbot.js';
  s.defer = true;
  document.head.appendChild(s);
})();
            

Schritt 3 – Speichern & Cache leeren

Speichern Sie die Einstellungen.
System → Cache → Alle Caches leeren.
Shop-Seite im Frontend neu laden.

Hinweis: Der Custom-JS-Bereich ist nicht in allen Template-Versionen verfügbar. Wenn Sie ihn nicht finden, nutzen Sie Methode 1 (Plugin) – das funktioniert in jeder JTL-Shop 5-Version.

✓ Widget testen

Nachdem Sie den Code eingebunden haben, prüfen Sie die Einbindung so:

Öffnen Sie Ihren JTL-Shop in einem neuen Browser-Tab.
Drücken Sie Strg+Shift+R (Windows) oder Cmd+Shift+R (Mac), um den Cache zu leeren.
In der rechten unteren Ecke sollte ein Chat-Button erscheinen.
Klicken Sie darauf – das Chat-Fenster sollte sich öffnen.
Navigieren Sie zu verschiedenen Seiten (Startseite, Kategorie, Produktseite) – der Chat-Button sollte überall sichtbar sein.

Prüfen mit Browser-Entwicklertools

Öffnen Sie die Entwicklertools mit F12.
Wechseln Sie zum Tab „Konsole" (Console).
Es sollten keine roten Fehlermeldungen bezüglich chatbot.js erscheinen.
Im Tab „Netzwerk" (Network) → filtern Sie nach chatbot.js – der Status sollte 200 sein.

✓ Wenn der Button erscheint, ist die Einbindung erfolgreich. Testen Sie jetzt das Chatbot-Gespräch mit einer typischen Kundenfrage zu Ihrem Shop.

Häufige Fragen & Probleme

Der Chat-Button erscheint nicht

Prüfen Sie, ob der API-Key korrekt eingesetzt wurde (kein Leerzeichen am Anfang/Ende).
Cache leeren! JTL-Shop cacht Templates aggressiv: System → Cache → Alle Caches leeren.
Prüfen Sie in der Browser-Konsole (F12) auf Fehlermeldungen.
Stellen Sie sicher, dass Sie die korrekte Domain in Ihrem FirstBot-Dashboard eingetragen haben.

Content-Security-Policy (CSP) blockiert das Script

Manche JTL-Shop-Installationen setzen strenge CSP-Header. Fügen Sie in Ihrer .htaccess oder Serverkonfiguration folgende Domain zur CSP hinzu:

script-src 'self' https://firstbot.de;
connect-src 'self' https://firstbot.de;
        

Widget überlappt mit JTL-Shop-Elementen

Falls der Chat-Button den „Warenkorb"-Button oder Cookie-Banner überlappt:

Passen Sie im FirstBot-Dashboard unter „Styling & Farbe" die Widget-Position an (links/rechts).
Der z-index des Widgets ist standardmäßig hoch genug (9999). Bei Konflikten können Sie ihn über Custom CSS anpassen.

Widget erscheint im Backend / Admin-Bereich

Das Widget wird nur im Frontend geladen. Wenn Sie den Code in der header.tpl eingefügt haben, gilt er nur für das Shop-Frontend – nicht für das JTL-Backend (/admin).

Smarty-Template-Fehler nach dem Einfügen

Achten Sie darauf, dass der Code außerhalb von Smarty-Blöcken ({block}...{/block}) steht, es sei denn, Sie überschreiben bewusst einen Block im Child-Template.
Verwenden Sie keine geschweiften Klammern { } im JavaScript-Code, ohne sie in {literal}...{/literal} zu wrappen – Smarty interpretiert sie sonst als Template-Tags.
Der oben gezeigte Code enthält keine geschweiften Klammern und funktioniert direkt.

Lädt das Widget die Seite langsamer?

Nein. Das Widget-Script wird mit defer geladen, d.h. es wird asynchron geladen und blockiert nicht das Rendering. Ihre Seitengeschwindigkeit wird nicht beeinträchtigt.

Weitere Hilfe benötigt?
Schreiben Sie uns unter g.kunze@mukxx.de – wir helfen gern bei der Einbindung in Ihren JTL-Shop.

Tipp: Seiten-Kontext aktivieren

Nach der Einbindung: Aktiviere im Dashboard unter Trainingsdaten → „Seiten-Kontext“ die Option, damit dein Bot den Inhalt der Seite kennt, auf der dein Besucher gerade ist. So beantwortet er Fragen zu Produkten und Artikeln direkt – und lernt aus diesen Seiten dazu.