PrestaShop-Anleitung

FirstBot-Widget in Ihren PrestaShop einbinden

Getestet mit PrestaShop 1.7.x und 8.x · Funktioniert mit allen gängigen Themes

💡 Wichtig für PrestaShop: PrestaShop hat ein strenges Modul- und Theme-System. Die empfohlene Methode ist das Einfügen über einen benutzerdefinierten HTML-Block oder direkt in die Theme-Datei head.tpl. Änderungen an Core-Dateien sollten vermieden werden.

Inhalt

Ihr persönlicher Code-Schnipsel
Methode 1: Custom HTML über Theme-Hook (empfohlen)
Methode 2: Theme-Datei head.tpl bearbeiten
Methode 3: Eigenes Modul (Entwickler)
Chatbot auf bestimmten Seiten steuern
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>
        

1 Methode 1: Custom HTML über Theme-Hook

★ Empfohlen – ohne FTP, direkt im Backend

PrestaShop erlaubt es, über den „Inhalt verwalten"-Bereich eigene HTML-Blöcke an Theme-Hooks anzuhängen. Das ist die einfachste Methode ohne Eingriff in Dateien.

Schritt 1 – Design-Hooks aufrufen

Loggen Sie sich im PrestaShop-Backoffice ein.
Gehen Sie zu Design → Positionen.
Klicken Sie oben rechts auf „Modul einbinden".

Schritt 2 – HTML-Block-Modul nutzen

Falls das Modul „Benutzerdefinierter HTML-Block" (ps_customtext) installiert ist:

Gehen Sie zu Module → Installierte Module.
Suchen Sie nach „Custom text block" oder „HTML-Block".
Klicken Sie auf „Konfigurieren".
Wechseln Sie in den HTML-Quellcode-Modus des Editors (Button <>).
Fügen Sie den Code-Schnipsel ein und speichern Sie.
Weisen Sie den Block dem Hook displayHeader zu.

⚠ Editor-Problem: Viele WYSIWYG-Editoren entfernen <script>-Tags. Wechseln Sie unbedingt in den reinen HTML/Quellcode-Modus, bevor Sie den Code einfügen.

✓ Der Hook displayHeader stellt sicher, dass das Script auf allen Seiten im <head>-Bereich geladen wird.

2 Methode 2: Theme-Datei head.tpl

Direkter Eingriff via FTP

Bei den meisten PrestaShop-Themes liegt die Head-Template-Datei unter themes/[ihr-theme]/templates/_partials/head.tpl. Hier kann der Code direkt eingefügt werden.

⚠ Änderungen in Theme-Dateien werden beim nächsten Theme-Update überschrieben. Erstellen Sie ein Child-Theme oder sichern Sie die Datei per FTP.

Schritt 1 – Datei finden und öffnen

Verbinden Sie sich per FTP mit Ihrem Server.
Navigieren Sie zu: /themes/[ihr-theme-name]/templates/_partials/head.tpl
Öffnen Sie die Datei in einem Texteditor.

Schritt 2 – Code einfügen

Suchen Sie nach dem schließenden {/block}-Tag am Ende der Datei, oder direkt vor </head>, und fügen Sie ein:

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

Speichern Sie die Datei und laden Sie sie per FTP hoch.
Leeren Sie den PrestaShop-Cache (siehe unten).
Testen Sie Ihren Shop im Browser.

3 Methode 3: Eigenes Modul

Für Entwickler · PrestaShop 1.7+ und 8.x

Ein eigenes PrestaShop-Modul ist die sauberste und Update-sichere Methode. Das Modul hängt sich in den Hook displayHeader ein und injiziert das Script automatisch.

💡 Legen Sie per FTP folgende Struktur an: /modules/firstbot/

`firstbot.php` (Haupt-Datei)

<?php
if (!defined('_PS_VERSION_')) exit;

class FirstBot extends Module {
    public function __construct() {
        $this->name    = 'firstbot';
        $this->tab     = 'front_office_features';
        $this->version = '1.0.0';
        $this->author  = 'FirstBot';
        parent::__construct();
        $this->displayName = $this->l('FirstBot Widget');
    }

    public function install() {
        return parent::install()
            && $this->registerHook('displayHeader');
    }

    public function hookDisplayHeader() {
        return '<script>window.chatBotId="IHR-API-KEY";</script>'
             . '<script src="https://firstbot.de/chatbot.js" defer></script>';
    }
}
            

Nach dem Hochladen via FTP: Im Backoffice unter Module → Modul-Manager das Modul „FirstBot Widget" suchen und installieren.

4 Chatbot auf bestimmten Seiten steuern

Möchten Sie den Chatbot nur auf bestimmten Seiten (z. B. nicht auf dem Checkout) anzeigen, erweitern Sie die Hook-Funktion im Modul:

public function hookDisplayHeader() {
    $controller = $this->context->controller->php_self ?? '';
    if ($controller === 'order') {
        return; // Nicht auf Checkout-Seite laden
    }
    return '<script>window.chatBotId="IHR-API-KEY";</script>'
         . '<script src="https://firstbot.de/chatbot.js" defer></script>';
}
        

Wichtige Controller-Namen in PrestaShop:

index – Startseite
category – Kategorie-Seite
product – Produkt-Detailseite
cart – Warenkorb
order – Checkout
order-confirmation – Bestellbestätigung
my-account – Kundenkonto

✓ Empfehlung: Den Chatbot auf dem Checkout (order) deaktivieren, um den Kaufabschluss nicht zu stören. Auf Produkt- und Kategorie-Seiten hingegen ist er besonders wertvoll.

5 Widget testen & Cache leeren

Öffnen Sie Ihren Shop in einem neuen Browser-Tab.
PrestaShop-Cache leeren: Erweiterte Parameter → Performance → Cache leeren.
Alternativ: Erweiterte Parameter → Performance → Smarty-Cache leeren.
Drücken Sie Strg+Shift+R (Windows) bzw. Cmd+Shift+R (Mac) im Browser.
Der Chat-Button sollte unten rechts erscheinen.

✓ Wenn der Button erscheint, ist die Einbindung erfolgreich. Stellen Sie Produktfragen – der Bot antwortet aus Ihrer Wissensdatenbank.

Häufige Fragen & Probleme

Script-Tag wird vom Editor entfernt

PrestaShops Backoffice-Editor (TinyMCE) entfernt <script>-Tags standardmäßig. Wechseln Sie immer in den HTML-Quellcode-Modus (Button <> im Editor) bevor Sie den Code einfügen.

Chat-Button erscheint nicht nach Cache-Leerung

Leeren Sie alle Cache-Ebenen: Smarty, CCC (Combine, Compress, Cache), Browser-Cache.
Prüfen Sie in der Browser-Konsole (F12) auf JavaScript-Fehler.
Stellen Sie sicher, dass der Hook displayHeader im Template aufgerufen wird.

PrestaShop CCC blockiert das Script

Wenn Sie unter Performance → CCC JavaScript-Kombination aktiviert haben, kann das externe Script blockiert werden. Fügen Sie die Domain firstbot.de zur Ausnahmeliste hinzu oder deaktivieren Sie die CCC-Optimierung testweise.

Hook displayHeader existiert nicht

Bei manchen Custom-Themes ist der Hook displayHeader nicht vorhanden. Prüfen Sie die verfügbaren Hooks unter Design → Positionen → Hooks suchen und wählen Sie alternativ displayTop oder displayNav.

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

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.