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. Ihr Einbettungs-Script.

Sobald Ihr Chatbot trainiert ist, gehen Sie im Agentkit-Dashboard zu Einstellungen und dann zu Veröffentlichen. Dort sehen Sie ein Script-Tag, das so aussieht:

<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>

Kopieren Sie dieses Snippet. Sie fügen es gleich mit einer der drei unten beschriebenen Methoden in WordPress ein.

Methodenvergleich

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“ (vollständiger Name: WPCode – Insert Headers, Footers, and Code Snippets).
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 Ihr Agentkit-Einbettungs-Script 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.

Mit Insert Headers and Footers (Alternative)

Wenn Sie ein anderes Plugin bevorzugen: „Insert Headers and Footers“ von WPBeginner funktioniert genauso:

1. Installieren und aktivieren Sie das Plugin.
2. Gehen Sie zu Einstellungen dann Insert Headers and Footers.
3. Fügen Sie das Einbettungs-Script in das Feld Scripts in Footer ein.
4. Speichern.

Steuern, auf welchen Seiten der Chatbot erscheint

Sowohl WPCode als auch ähnliche Plugins unterstützen bedingte Logik. Wenn Sie den Chatbot nur auf bestimmten Seiten anzeigen möchten:

1. Erstellen Sie in WPCode statt des Bereichs Header & Footer einen neuen Code Snippet.
2. Stellen Sie den Code-Typ auf „HTML Snippet“.
3. Fügen Sie Ihr Einbettungs-Script ein.
4. Wählen Sie unter Insertion die Option „Site Wide Footer“.
5. Fügen Sie unter Smart Conditional Logic Bedingungen hinzu, zum Beispiel:
   • Seite ist „Kontakt“ oder „Support“ oder „Preise“
   • Beitragstyp ist „Produkt“
   • URL enthält „/hilfe“
6. Speichern und aktivieren Sie das Snippet.

So haben Sie präzise Kontrolle, ohne mehrere Chatbots anlegen zu müssen.

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 Ihr Agentkit-Einbettungs-Script in den Block ein:

<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>

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

Der Chatbot erscheint nur auf dieser einen Seite. Wiederholen Sie das für weitere Seiten nach Bedarf.

Einschränkungen dieser Methode:

• Das Script lädt als Teil des Seiteninhalts und kann daher etwas später laden als bei einer Footer-Platzierung.
• Wenn Sie den Chatbot auf vielen Seiten haben möchten, wird das mühsam. Nutzen Sie stattdessen die Plugin-Methode.
• Manche Page-Builder (Elementor, Divi) entfernen Script-Tags möglicherweise aus HTML-Blöcken. Nutzen Sie in diesem Fall die Plugin-Methode.

Methode 3: Theme-Footer (footer.php)

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 das schließende </body>-Tag. Fügen Sie das Einbettungs-Script direkt davor ein:

<!-- Agentkit Chatbot -->
<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>
</body>
</html>

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

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: Platzierung des Script-Tags. Stellen Sie sicher, dass sich das Script innerhalb des <body>-Tags befindet, nicht im <head>. Manche Header-/Footer-Plugins platzieren Code standardmäßig im <head>.

Ursache: Content Security Policy. Manche Sicherheits-Plugins fügen Content-Security-Policy-Header hinzu, die externe Scripts blockieren. Prüfen Sie, ob Ihr Sicherheits-Plugin (Wordfence, Sucuri, iThemes Security) CSP-Einstellungen hat, und fügen Sie cdn.agentkit.ai zu den zulässigen Script-Quellen hinzu.

Ursache: Page-Builder-Konflikt. Manche Page-Builder entfernen Script-Tags aus Inhaltsbereichen. Nutzen Sie statt des Blocks „Benutzerdefiniertes HTML“ die Plugin-Methode (Methode 1).

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. Asynchrone Scripts beeinträchtigen Performance-Werte selten.
3. Falls Sie ein Performance-Plugin verwenden, das JavaScript verzögert, setzen Sie cdn.agentkit.ai auf die Whitelist, damit es das Laden des Widgets nicht stört.

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. Nutzt Ihre Website JavaScript-Rendering, kommt der Firecrawl-gestützte Crawler damit zurecht.

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

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.