Chatbot zu WordPress hinzufügen (ganz ohne Programmieren)

Fügen Sie den Agentkit-Chatbot mit dem Code aus „Kanäle“ zu WordPress hinzu. Vergleichen Sie die Einbindung und prüfen Sie das Widget.

Cover Image for Chatbot zu WordPress hinzufügen (ganz ohne Programmieren)

WordPress betreibt über 40 % des Webs – die Chance ist also groß, dass auch Ihre Website darauf läuft. Einen Chatbot zu WordPress hinzuzufügen ist unkompliziert. Sie brauchen dafür keine Entwickler, kein individuelles Plugin und keinerlei Programmiererfahrung. Dieser Leitfaden zeigt drei Methoden – vom einfachsten Plugin-Ansatz bis zur Installation auf Theme-Ebene – und behandelt die Stolperfallen, über die Nutzer häufig stürzen.

Bevor Sie starten

Bevor Sie den Chatbot zu Ihrer WordPress-Website hinzufügen, brauchen Sie zwei Dinge.

1. Ein Agentkit-Konto mit trainiertem Chatbot.

Falls Sie das noch nicht erledigt haben, registrieren Sie sich kostenlos und erstellen Sie Ihren ersten Chatbot. Trainieren Sie ihn mit Ihren Website-Inhalten, FAQ-Seiten, Ihrer Dokumentation oder anderem Material, zu dem Ihre Besucher Fragen haben. Details finden Sie im Trainingsleitfaden.

2. Den generierten Einbettungscode kopieren.

Öffnen Sie den Chatbot in Agentkit, wählen Sie Kanäle > Website-Einbindung, dann Chat-Widget, und klicken Sie auf Code kopieren. Fügen Sie beide Script-Tags unverändert in WordPress ein. Der Code enthält ein kurzes Start-Script und das Widget-Script mit der für Ihre Installation gültigen URL und Chatbot-ID.

Aktivieren Sie den Chat-Widget-Kanal, bevor Sie die öffentliche Website testen.

Methodenvergleich

MethodeSchwierigkeitPlugin erforderlichGilt fürÜbersteht Theme-UpdatesAm besten für
Plugin (WPCode)Am einfachstenJa (kostenlos)Alle SeitenJaNicht-technische Nutzer
Benutzerdefinierter HTML-BlockEinfachNeinBestimmte SeitenJaSeitenweiser Chatbot
Theme-Footer (footer.php)MittelNeinAlle SeitenNein (Child-Theme nötig)Entwickler

Wählen Sie die Methode, die zu Ihrem Kenntnisstand passt. Die Plugin-Methode wird für die meisten Nutzer empfohlen, da sie am einfachsten und am widerstandsfähigsten gegenüber Theme-Updates ist.

Methode 1: Plugin-Ansatz (empfohlen)

Das ist die einfachste Methode. Sie installieren ein kostenloses Plugin, mit dem Sie Code-Snippets zu Ihrer Website hinzufügen können, ohne Theme-Dateien zu bearbeiten.

Mit WPCode (Insert Headers and Footers)

WPCode ist ein kostenloses WordPress-Plugin mit über 2 Millionen Installationen. Damit fügen Sie Code zum Header oder Footer Ihrer Website hinzu, ohne Theme-Dateien anzufassen.

Schritt 1: Plugin installieren

  1. Gehen Sie in Ihrem WordPress-Adminbereich zu Plugins dann Installieren.
  2. Suchen Sie nach „WPCode“.
  3. Klicken Sie auf Jetzt installieren, dann auf Aktivieren.

Schritt 2: Chatbot-Snippet hinzufügen

  1. Gehen Sie in der WordPress-Admin-Seitenleiste zu Code Snippets dann Header & Footer.
  2. Suchen Sie den Bereich Footer.
  3. Fügen Sie beide Script-Tags aus Kanäle > Website-Einbindung in das Footer-Feld ein.
  4. Klicken Sie auf Änderungen speichern.

Das war’s. Das Chatbot-Widget erscheint jetzt auf jeder Seite Ihrer WordPress-Website.

Schritt 3: Funktion prüfen

  1. Öffnen Sie Ihre Website in einem neuen Browser-Tab (nicht im WordPress-Adminbereich).
  2. Sie sollten die Chat-Blase unten rechts sehen.
  3. Klicken Sie darauf und senden Sie eine Testnachricht, um zu prüfen, ob korrekt geantwortet wird.

WPCode hieß früher „Insert Headers and Footers“ von WPBeginner. Das ist dasselbe Plugin, keine zweite Installationsmethode. Die WPCode-Anleitung erklärt das Footer-Feld.

Steuern, auf welchen Seiten der Chatbot erscheint

Für einzelne Seiten eignet sich der HTML-Block unten, sofern Ihr Konto Scripts veröffentlichen darf. WPCode bietet auch bedingte Regeln. Einige Seiten- und Beitragsregeln erfordern jedoch eine kostenpflichtige Lizenz. Prüfen Sie die Regeln Ihrer Version.

Methode 2: Benutzerdefinierter HTML-Block (bestimmte Seiten)

Wenn Sie den Chatbot nur auf einer oder zwei Seiten haben möchten und kein Plugin installieren wollen, können Sie den WordPress-Block-Editor verwenden.

Schritt 1: Bearbeiten Sie die Seite, auf der der Chatbot erscheinen soll.

Schritt 2: Fügen Sie am Ende des Seiteninhalts einen Block Benutzerdefiniertes HTML hinzu.

Schritt 3: Fügen Sie beide generierten Script-Tags in den Block ein.

Schritt 4: Aktualisieren oder veröffentlichen Sie die Seite.

Prüfen Sie nach der Veröffentlichung, ob beide Script-Tags im gerenderten Quelltext stehen. WordPress kann Scripts von Konten ohne unfiltered_html entfernen, auch bei manchen Multisite-Rollen. Fehlt ein Tag, nutzen Sie ein zulässiges Footer-Plugin oder fragen Sie die Administration. WordPress erläutert dies. Auf WordPress.com muss der Tarif Plugins und eigenes JavaScript erlauben.

Einschränkungen dieser Methode:

  • Wenn Sie den Chatbot auf vielen Seiten haben möchten, wird das mühsam. Nutzen Sie stattdessen die Plugin-Methode.

Diese Methode fügt den Chatbot auf Theme-Ebene hinzu. Sie ist der direkteste Ansatz, erfordert aber das Bearbeiten von Theme-Dateien.

Wichtig: Bearbeiten Sie die footer.php Ihres Themes direkt, gehen Ihre Änderungen beim nächsten Theme-Update verloren. Verwenden Sie ein Child-Theme, um das dauerhaft zu machen.

Mit Child-Theme

Schritt 1: Falls Sie noch kein Child-Theme haben, erstellen Sie eines. Die meisten Theme-Entwickler stellen dafür Anleitungen bereit. Alternativ können Sie das Plugin „Child Theme Configurator“ verwenden.

Schritt 2: Gehen Sie im WordPress-Adminbereich zu Design dann Theme-Datei-Editor.

Schritt 3: Wählen Sie Ihr Child-Theme aus der Dropdown-Liste.

Schritt 4: Öffnen Sie footer.php. Falls sie in Ihrem Child-Theme nicht existiert, erstellen Sie sie, indem Sie die footer.php des Parent-Themes kopieren.

Schritt 5: Suchen Sie </body> und fügen Sie den vollständigen Code unmittelbar davor ein.

Schritt 6: Speichern Sie die Datei.

Ohne Child-Theme (nicht empfohlen)

Wenn Sie die footer.php des Parent-Themes direkt bearbeiten, folgen Sie denselben Schritten – seien Sie sich aber bewusst, dass ein Theme-Update Ihre Änderungen überschreibt. Bewahren Sie in diesem Fall eine Kopie Ihrer geänderten footer.php auf, um sie nach Updates erneut einzuspielen.

Ihre Installation testen

Gehen Sie nach dem Hinzufügen des Chatbots mit einer beliebigen Methode diese Checkliste durch.

Grundlegende Überprüfung

PrüfungSo prüfen SieErwartetes Ergebnis
Widget erscheintWebsite in neuem Tab öffnenChat-Blase unten rechts sichtbar
Widget öffnet sichAuf die Chat-Blase klickenChat-Fenster öffnet sich mit Begrüßung
Chatbot antwortetFrage eingeben und sendenKI-Antwort basierend auf Ihren Trainingsdaten
Mobile DarstellungWebsite auf dem Smartphone öffnen oder Browser-Entwicklertools nutzenWidget ist zugänglich und nutzbar
LadegeschwindigkeitNetzwerk-Tab der Browser-Entwicklertools prüfenWidget-Script lädt asynchron, keine Blockierung

Checkliste zum Cache-Leeren

Caching ist der Hauptgrund, warum Nutzer den Chatbot-Code hinzufügen und ihn dann nicht auf ihrer Website sehen. Leeren Sie Caches in dieser Reihenfolge:

  1. WordPress-Cache-Plugin (WP Super Cache, W3 Total Cache, WP Rocket, LiteSpeed Cache): Gehen Sie zu den Plugin-Einstellungen und leeren Sie alle Caches.
  2. Hosting-Cache (SiteGround, WP Engine, Cloudflare): Prüfen Sie Ihr Hosting-Dashboard auf eine Option zum Cache-Leeren.
  3. CDN-Cache (Cloudflare, StackPath, Fastly): Falls Sie ein CDN nutzen, leeren Sie auch dort den Cache.
  4. Browser-Cache: Öffnen Sie Ihre Website in einem Inkognito-/privaten Fenster, um den lokalen Browser-Cache zu umgehen.

Erscheint der Chatbot nach dem Leeren aller Caches weiterhin nicht, prüfen Sie die Entwicklerkonsole des Browsers (F12 am Desktop) auf JavaScript-Fehler.

Fehlerbehebung bei häufigen Problemen

Der Chatbot erscheint nicht

Ursache: Caching. Das ist die häufigste Ursache. Folgen Sie der obigen Checkliste zum Cache-Leeren.

Ursache: blockiertes Script. Prüfen Sie in der Browser-Konsole oder im Netzwerk-Tab den tatsächlichen Host der generierten src-URL. Blockiert eine Content Security Policy den Host, lassen Sie ihn durch die Website-Administration freigeben.

Der Chatbot erscheint, antwortet aber nicht

Ursache: Chatbot nicht trainiert. Gehen Sie zu Ihrem Agentkit-Dashboard und prüfen Sie, ob Ihr Chatbot über Trainingsdaten verfügt. Ein untrainierter Chatbot hat nichts, worauf er zurückgreifen kann.

Ursache: Falsche Chatbot-ID. Prüfen Sie, ob das data-chatbot in Ihrem Einbettungscode mit der im Agentkit-Dashboard angezeigten ID übereinstimmt.

Ursache: Domain-Beschränkung. Falls Sie in Ihren Chatbot-Einstellungen Domain-Beschränkungen eingerichtet haben, stellen Sie sicher, dass Ihre WordPress-Domain auf der zulässigen Liste steht.

Der Chatbot kollidiert mit einem anderen Chat-Plugin

Wenn Sie ein weiteres Live-Chat- oder Chatbot-Plugin einsetzen (Tidio, Intercom, Drift, Crisp), können sich die beiden Widgets überlappen oder gegenseitig stören.

Lösungen:

  • Entfernen Sie das andere Chat-Plugin, wenn Sie vollständig zu Agentkit wechseln.
  • Brauchen Sie beide, nutzen Sie den Block „Benutzerdefiniertes HTML“ von Agentkit, um ihn nur auf Seiten anzuzeigen, auf denen das andere Plugin nicht aktiv ist.
  • Passen Sie die Widget-Position in Ihren Agentkit-Dashboard-Einstellungen an, falls beide koexistieren müssen.

Langsamer Seitenaufbau nach dem Hinzufügen des Chatbots

Das Agentkit-Widget lädt asynchron (das Attribut async im Script-Tag), sollte den Seitenaufbau also nicht blockieren. Bei wahrgenommener Verlangsamung:

  1. Prüfen Sie, ob das Attribut async in Ihrem Script-Tag vorhanden ist.
  2. Führen Sie einen Geschwindigkeitstest durch (Google PageSpeed Insights, GTmetrix) und prüfen Sie, ob das Agentkit-Script markiert wird.
  3. Prüfen Sie, ob ein Performance-Plugin Scripts verzögert, und erlauben Sie bei Bedarf die tatsächliche Widget-URL aus „Kanäle“.

Den Chatbot für WordPress konfigurieren

Sobald der Chatbot auf Ihrer WordPress-Website live ist, sollten Sie diese Konfigurationsschritte in Ihrem Agentkit-Dashboard bedenken.

Domain-Beschränkung

Legen Sie in Ihren Chatbot-Einstellungen die zulässige Domain auf die Domain Ihrer WordPress-Website fest (z. B. ihredomain.de). So verhindern Sie, dass jemand Ihren Einbettungscode kopiert und Ihren Chatbot auf einer anderen Website nutzt.

Training auf WordPress-Inhalten

Die beste Trainingsquelle sind Ihre tatsächlichen Website-Inhalte. Fügen Sie in Agentkit Ihre WordPress-URL als Trainingsquelle hinzu, und der Crawler indexiert Ihre Seiten automatisch.

Konzentrieren Sie Ihr Training auf:

  • FAQ- oder Wissensdatenbank-Seiten
  • Produkt- oder Leistungsseiten
  • Preisseite
  • Über-uns-Seite
  • Support-Dokumentation
  • Blogbeiträge, die häufige Fragen beantworten

Verzichten Sie beim Training auf Seiten mit dünnem Inhalt, Login-Seiten oder Seiten hinter einer Authentifizierung.

Eine vollständige Trainingsanleitung finden Sie unter So trainieren Sie einen Chatbot mit Ihren Website-Inhalten.

Lead-Erfassung

Aktivieren Sie die Aktion Leads erfassen, um E-Mail-Adressen und Namen von Besuchern direkt im Chat zu sammeln. Erfasste Leads erscheinen in Ihrem Agentkit-Dashboard und können per Zapier oder Webhooks an Ihr CRM gesendet werden. Details zur Einrichtung finden Sie in der Dokumentation zur Lead-Erfassung.

WordPress-spezifische Integrationsdokumentation

Aktuelle Einrichtungsanweisungen und WordPress-spezifische Funktionen finden Sie in der WordPress-Integrationsdokumentation.

Methodenvergleich im Überblick

AspektPlugin (WPCode)Benutzerdefinierter HTML-BlockTheme-Footer
Technische KenntnisseKeineKeineGrundlegendes PHP
Übersteht Theme-UpdatesJaJaNur mit Child-Theme
Website-weite AbdeckungJaNein (seitenweise)Ja
Plugin-AbhängigkeitJa (kostenloses Plugin)NeinNein

Für die meisten WordPress-Nutzer ist die Plugin-Methode die richtige Wahl. Sie ist schnell, sicher und bietet die meiste Flexibilität, ohne Ihre Theme-Dateien zu gefährden.

Nächste Schritte

Sobald Ihr Chatbot auf WordPress live ist, verbringen Sie ein paar Minuten im Agentkit-Playground und testen Sie die Antworten. Antwortet der Chatbot bei bestimmten Themen nicht gut, fügen Sie für diese Bereiche weitere Trainingsdaten hinzu. Im Playground können Sie schnell iterieren, ohne jedes Mal auf Ihrer Live-Website testen zu müssen.

Erkunden Sie anschließend, wie Sie Ihren Chatbot mit Ihren anderen Tools verbinden. Der Integrationsleitfaden behandelt Zapier-Workflows, Webhooks und die REST-API für fortgeschrittenere Einrichtungen.

Erstellen Sie Ihren Chatbot kostenlos →

Keine Kreditkarte erforderlich.

Kostenlos loslegenKeine Kreditkarte erforderlich
Chatbot zu WordPress hinzufügen (ganz ohne Programmieren) – Agentkit