WooCommerce-Anleitung

FirstBot-Widget in Ihren WooCommerce-Shop einbinden

Getestet mit WooCommerce 7.0+ · WordPress 6.0+ · Funktioniert mit allen gängigen Themes

💡 WooCommerce läuft auf WordPress. Die Einbindung erfolgt über WordPress-Mechanismen — der Chatbot erscheint dann automatisch auch im Shop, auf Produktseiten, im Warenkorb und beim Checkout.

Inhalt

Ihr persönlicher Code-Schnipsel
Methode 1: Code Snippets Plugin (empfohlen)
Methode 2: functions.php des Child-Themes
Methode 3: WooCommerce-Hooks (Profi)
Auf welchen Seiten erscheint der Chatbot?
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 eingefügt werden — er erscheint dann auf allen Seiten des Shops.

1 Methode 1: Code Snippets Plugin

★ Empfohlen für Einsteiger

Das kostenlose Plugin „Code Snippets" ist die einfachste und sicherste Methode. Es funktioniert mit WooCommerce genauso wie mit normalem WordPress und überlebt Theme-Updates problemlos.

Schritt 1 – Plugin installieren

Loggen Sie sich in Ihr WordPress-Backend ein.
Gehen Sie zu Plugins → Installieren.
Suchen Sie nach „Code Snippets" (von Code Snippets Pro).
Klicken Sie auf „Jetzt installieren", dann „Aktivieren".

Schritt 2 – Neues Snippet anlegen

Gehen Sie zu Snippets → Neu hinzufügen.
Geben Sie dem Snippet einen Namen, z. B. „FirstBot Widget".
Wählen Sie als Ausführungstyp: „HTML-Snippet im Head" oder „PHP-Snippet".

Schritt 3 – Code einfügen und aktivieren

Für HTML im Head:

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

Für PHP-Snippet:

<?php
add_action( 'wp_head', function() { ?>
<script>window.chatBotId = 'IHR-API-KEY';</script>
<script src="https://firstbot.de/chatbot.js" defer></script>
<?php } );
            

Klicken Sie auf „Speichern und Aktivieren".
Besuchen Sie Ihren Shop – der Chat-Button sollte erscheinen.

✓ Vorteil: Funktioniert auf allen WooCommerce-Seiten (Shop, Produkte, Warenkorb, Checkout) ohne weiteren Aufwand.

2 Methode 2: Child-Theme functions.php

Für erfahrene Nutzer

Wenn Sie ein Child-Theme verwenden, können Sie den Code direkt in die functions.php des Child-Themes eintragen. Das ist Update-sicher und gilt als Best Practice.

⚠ Wichtig für WooCommerce: Bearbeiten Sie immer das Child-Theme — niemals das Eltern-Theme. WooCommerce-Theme-Updates würden sonst Ihre Änderungen überschreiben.

Code einfügen

Öffnen Sie die functions.php Ihres Child-Themes (über FTP oder Design → Theme-Datei-Editor) und fügen Sie ans Ende ein:

function firstbot_widget() {
    echo '<script>window.chatBotId = "IHR-API-KEY";</script>';
    echo '<script src="https://firstbot.de/chatbot.js" defer></script>';
}
add_action( 'wp_head', 'firstbot_widget' );
            

Speichern Sie die Datei und testen Sie Ihren Shop.

3 Methode 3: WooCommerce-Hooks (Profi)

Für Entwickler

Mit WooCommerce-spezifischen Hooks können Sie den Chatbot gezielt nur auf bestimmten Shop-Seiten aktivieren — z. B. nur auf Produktseiten und im Warenkorb, nicht auf dem Checkout.

Nur auf Produktseiten und Warenkorb

function firstbot_woo_selective() {
    if ( is_product() || is_cart() || is_shop() ) {
        echo '<script>window.chatBotId = "IHR-API-KEY";</script>';
        echo '<script src="https://firstbot.de/chatbot.js" defer></script>';
    }
}
add_action( 'wp_head', 'firstbot_woo_selective' );
            

Überall außer Checkout (empfohlen für Shops)

function firstbot_woo_no_checkout() {
    if ( ! is_checkout() ) {
        echo '<script>window.chatBotId = "IHR-API-KEY";</script>';
        echo '<script src="https://firstbot.de/chatbot.js" defer></script>';
    }
}
add_action( 'wp_head', 'firstbot_woo_no_checkout' );
            

💡 Tipp: Den Chatbot beim Checkout auszublenden kann sinnvoll sein, um den Kaufprozess nicht zu stören. Auf Produktseiten und im Warenkorb hingegen kann er Produktfragen direkt beantworten und den Kauf fördern.

Verfügbare WooCommerce-Bedingungsfunktionen

is_shop() – Haupt-Shopseite (Produktübersicht)
is_product() – Einzelne Produktseite
is_product_category() – Produktkategorie-Seite
is_cart() – Warenkorb
is_checkout() – Checkout-Seite
is_account_page() – Kundenkonto
is_woocommerce() – Alle WooCommerce-Seiten

4 Auf welchen Seiten erscheint der Chatbot?

Bei der Standard-Einbindung (Methoden 1 & 2) erscheint der Chatbot auf allen Seiten Ihres WooCommerce-Shops:

✓ Startseite & Blog-Seiten
✓ Produktübersicht (Shop-Seite)
✓ Einzelne Produktseiten – ideal für Produktfragen
✓ Kategorie-Seiten
✓ Warenkorb – ideal für Lieferungs- und Zahlungsfragen
✓ Checkout – (optional per Hook deaktivierbar)
✓ Kundenkonto

✓ Empfehlung für Shops: Nutzen Sie Methode 3 mit !is_checkout(), um den Chatbot überall anzuzeigen, außer beim Bezahlvorgang. So stört er den Kaufabschluss nicht, steht aber auf Produkt- und Warenkorb-Seiten als Hilfe bereit.

5 Widget testen

Nachdem Sie den Code eingebunden haben, testen Sie so:

Öffnen Sie Ihren 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.
Navigieren Sie zu einer Produktseite und zum Warenkorb – der Button sollte überall erscheinen.

WooCommerce-spezifische Caching-Plugins leeren

W3 Total Cache: Performance → Leere alle Caches
WP Rocket: WP Rocket → Cache leeren
WooCommerce selbst: WooCommerce → Status → Tools → Transients löschen
LiteSpeed Cache: LiteSpeed → Cache leeren

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

Häufige Fragen & Probleme

Der Chat-Button erscheint nicht

Prüfen Sie, ob der API-Key korrekt eingesetzt wurde (kein Leerzeichen).
Leeren Sie den Browser-Cache und alle Caching-Plugins.
Prüfen Sie in der Browser-Konsole (F12) auf Fehlermeldungen.
Stellen Sie sicher, dass die korrekte Domain im FirstBot-Dashboard eingetragen ist.

Button erscheint nicht auf dem Checkout

Das ist gewollt, wenn Sie Methode 3 mit !is_checkout() verwenden. Falls er auch dort erscheinen soll, nutzen Sie die einfache Einbindung aus Methode 1 oder 2 ohne Bedingung.

Konflikt mit WooCommerce-Seiten-Optimierung

Manche Performance-Plugins (z. B. WP Rocket, LiteSpeed) optimieren Scripts auf WooCommerce-Seiten gesondert. Falls das Widget auf Warenkorb- oder Checkout-Seiten nicht erscheint, schließen Sie die Domain firstbot.de von der Script-Optimierung aus.

HPOS (High-Performance Order Storage) aktiv

Das Widget ist unabhängig von der WooCommerce-Datenbankstruktur — HPOS hat keinen Einfluss auf die Chatbot-Einbindung.

Weitere Hilfe benötigt?
Schreiben Sie uns unter g.kunze@mukxx.de – wir helfen gern bei der Einbindung in Ihren WooCommerce-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.