Startseite › Anleitungen › WordPress

WordPress-Anleitung

FirstBot-Widget in Ihre WordPress-Website einbinden

Getestet mit WordPress 5.0+ · Funktioniert mit allen gängigen Themes

Inhalt

  1. Ihr persönlicher Code-Schnipsel
  2. Methode 1: Code Snippets Plugin (empfohlen)
  3. Methode 2: Theme-Editor (functions.php)
  4. Methode 3: Child-Theme
  5. Methode 4: Header/Footer-Plugin
  6. Widget testen
  7. 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 jeder Seite eingefügt werden, auf der der Chatbot erscheinen soll.

Methode 1: Code Snippets Plugin

★ Empfohlen für Einsteiger

Das kostenlose Plugin „Code Snippets" ist die einfachste und sicherste Methode. Es trennt Ihren Code sauber vom Theme und bleibt auch nach Theme-Updates erhalten.

Schritt 1 – Plugin installieren

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

Schritt 2 – Neues Snippet anlegen

  1. Gehen Sie zu Snippets → Neu hinzufügen in der linken Sidebar.
  2. Geben Sie dem Snippet einen Namen, z. B. „FirstBot Widget".
  3. Wählen Sie als Ausführungstyp: „HTML-Snippet im Head" oder „PHP-Snippet" (je nach Plugin-Version).

Schritt 3 – Code einfügen

Wenn Sie den Typ „HTML im Head" wählen, fügen Sie den Code direkt ein:

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

Wenn Sie PHP-Snippet wählen, nutzen Sie stattdessen diesen Code:

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

Schritt 4 – Speichern und aktivieren

  1. Klicken Sie auf „Speichern und Aktivieren".
  2. Besuchen Sie Ihre Website – der Chat-Button sollte unten rechts erscheinen.
✓ Vorteil: Dieser Code bleibt erhalten, wenn Sie Ihr Theme wechseln oder aktualisieren.

Methode 2: Theme-Editor (functions.php)

Direkte Theme-Bearbeitung

Diese Methode funktioniert immer, hat aber den Nachteil, dass Ihre Änderungen bei einem Theme-Update überschrieben werden können (es sei denn, Sie nutzen ein Child-Theme → Methode 3).

⚠ Achtung: Erstellen Sie immer ein Backup Ihrer functions.php bevor Sie Änderungen vornehmen. Ein Syntaxfehler kann die Website unzugänglich machen.

Schritt 1 – Theme-Editor öffnen

  1. Gehen Sie im WordPress-Backend zu Design → Theme-Datei-Editor.
  2. Wählen Sie rechts unter „Theme-Dateien" die Datei functions.php aus.

Schritt 2 – Code einfügen

Scrollen Sie ans Ende der Datei und fügen Sie folgenden Code vor dem letzten ?> ein (sofern vorhanden):

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' );

Schritt 3 – Speichern

  1. Klicken Sie auf „Datei aktualisieren".
  2. Wenn keine Fehlermeldung erscheint, war die Speicherung erfolgreich.
  3. Öffnen Sie Ihre Website – der Chat-Button sollte erscheinen.

Methode 3: Child-Theme

Empfohlen für Entwickler

Ein Child-Theme ist die professionellste Methode, da Ihre Änderungen auch nach Theme-Updates erhalten bleiben. Wenn Sie bereits ein Child-Theme verwenden, bearbeiten Sie einfach dessen functions.php.

Child-Theme functions.php bearbeiten

Öffnen Sie die functions.php Ihres Child-Themes (z. B. über FTP oder den Theme-Editor) und fügen Sie denselben Code wie in Methode 2 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' );
✓ Diese Methode ist Update-sicher und gilt als Best Practice in der WordPress-Entwicklung.

Methode 4: Header-Plugin

Für Nutzer ohne Programmierkenntnisse

Plugins wie „Insert Headers and Footers" (von WPBeginner) oder „WP Headers and Footers" ermöglichen es, Code in den Header zu injizieren – ohne die theme-Dateien anfassen zu müssen.

Schritt 1 – Plugin installieren

  1. Gehen Sie zu Plugins → Installieren.
  2. Suchen Sie nach „Insert Headers and Footers".
  3. Installieren und aktivieren Sie das Plugin.

Schritt 2 – Code einfügen

  1. Gehen Sie zu Einstellungen → Insert Headers and Footers.
  2. Fügen Sie den Code in das Feld „Scripts in Header" ein.
  3. Klicken Sie auf „Speichern".
<script> window.chatBotId = 'IHR-API-KEY'; </script> <script src="https://firstbot.de/chatbot.js" defer></script>

Widget testen

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

  1. Öffnen Sie Ihre Website in einem neuen Browser-Tab.
  2. Drücken Sie Strg+Shift+R (Windows) oder Cmd+Shift+R (Mac), um den Cache zu leeren.
  3. In der rechten unteren Ecke sollte ein Chat-Button erscheinen.
  4. Klicken Sie darauf – das Chat-Fenster sollte sich öffnen.

Prüfen mit Browser-Entwicklertools

  1. Öffnen Sie die Entwicklertools mit F12.
  2. Wechseln Sie zum Tab „Konsole" (Console).
  3. Es sollten keine roten Fehlermeldungen bezüglich chatbot.js erscheinen.
  4. Im Tab „Elemente" (Elements) → suchen Sie im <head> nach window.chatBotId – es sollte Ihr API-Key zu sehen sein.
✓ Wenn der Button erscheint, ist die Einbindung erfolgreich. Testen Sie jetzt das Chatbot-Gespräch mit einer Frage, die Ihrer Wissensbasis entspricht.

Häufige Fragen & Probleme

Der Chat-Button erscheint nicht

Caching-Plugins blockieren das Widget

Wenn Sie ein Caching-Plugin wie W3 Total Cache oder WP Rocket nutzen, leeren Sie nach der Einbindung den Plugin-Cache:

Widget erscheint nur auf manchen Seiten

Stellen Sie sicher, dass der Code in eine Funktion eingebunden ist, die auf allen Seiten ausgeführt wird (globaler wp_head-Hook, nicht nur auf der Startseite). Wenn Sie das Code Snippets Plugin nutzen, stellen Sie unter „Ausführen auf" sicher, dass „Alle Seiten" ausgewählt ist.

Konflikt mit anderen Scripts

Das Widget wird mit defer geladen und blockiert nicht das Rendering Ihrer Seite. Falls Seiten-Optimierungstools Scripts modifizieren, kann das Widget blockiert werden. Schließen Sie in diesem Fall die Domain firstbot.de von der Script-Optimierung aus.

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