Chatbot in WordPress einbinden: Anleitung ohne Plugin-Zwang

Einen KI-Chatbot bindest du in WordPress mit einem einzigen Script-Tag ein: Du erstellst deinen Bot in Website AI Agent, kopierst das Snippet und fügst es im Theme, über ein Header-/Footer-Plugin oder per Custom-HTML-Block ein. Ein eigenes WordPress-Plugin brauchst du dafür nicht. Welcher Weg passt, hängt davon ab, wer an deiner Seite arbeitet und ob dein Theme regelmäßig aktualisiert wird.

Die drei Wege im Überblick

Die Integrationsseite von Website AI Agent nennt WordPress ausdrücklich als eines der Systeme, in denen der Einzeiler funktioniert – neben Shopify, Wix und Squarespace. Auch eine Einbindung über den Google Tag Manager ist dort aufgeführt. In WordPress gibt es drei übliche Stellen für das Snippet:

Weg 1: Per Theme-Code (sauber über wp_enqueue_script)

Das WordPress Theme Handbook empfiehlt, Skripte nicht fest in Vorlagen zu schreiben, sondern über wp_enqueue_script() einzureihen und an den Hook wp_enqueue_scripts zu hängen. Das, so das Handbuch, sorge für korrektes Laden und Caching und erlaube Bedingungen für einzelne Seiten.

Der Haken: Dein Snippet braucht ein Attribut, nämlich die Kennung deines Bots. wp_enqueue_script() kennt async und defer (seit WordPress 6.3 über den Parameter strategy), aber kein Datenattribut. Dafür gibt es den Filter script_loader_tag, der laut Dokumentation den HTML-Tag eines eingereihten Skripts verändert – etwa um Attribute wie data-app-key zu ergänzen.

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'wai-widget',
        'https://website-ai-agent.com/widget/widget.js',
        array(),
        null,
        array( 'strategy' => 'async', 'in_footer' => true )
    );
} );

add_filter( 'script_loader_tag', function ( $tag, $handle ) {
    if ( 'wai-widget' !== $handle ) {
        return $tag;
    }
    return str_replace( '<script ', '<script data-agent-id="DEINE_BOT_KENNUNG" ', $tag );
}, 10, 2 );

Setze den Code in ein Child-Theme oder ein eigenes kleines Plugin, damit ein Theme-Update ihn nicht überschreibt. Voraussetzung laut Dokumentation: Dein Theme ruft wp_head() und wp_footer() auf, sonst erscheint das Skript nicht.

Weg 2: Mit einem Header-/Footer-Plugin

Wenn du keinen Code anfassen willst, nutzt du ein Plugin, mit dem sich eigener Code in den Header oder Footer jeder Seite einfügen lässt. Dort fügst du das Snippet unverändert ein:

<script src="https://website-ai-agent.com/widget/widget.js"
  data-agent-id="DEINE_BOT_KENNUNG"></script>

Den fertigen Code mit deiner echten Kennung zeigt dir der Bereich zum Einbetten im Bot-Designer von Website AI Agent. Kopiere ihn von dort, statt ihn abzutippen. Das Plugin wählst du selbst aus – prüfe wie bei jedem Plugin, ob es gepflegt wird.

Weg 3: Custom-HTML-Block

Der Block „Eigenes HTML“ ist der schnellste Weg für einen ersten Test auf einer einzelnen Seite. Du fügst ihn über den Block-Inserter oder mit /html ein und trägst das Snippet ein.

Beachte die Rollenfrage: Laut WordPress-Dokumentation entfernt WordPress ab Version 7.0 bei Nutzern ohne die Berechtigung unfiltered_html (zum Beispiel der Rolle „Mitarbeiter“) nicht erlaubte Tags wie <script> aus dem Block, sobald die Seite gespeichert wird. Das Snippet verschwindet dann ohne Fehlermeldung. Für den dauerhaften Betrieb auf allen Seiten ist dieser Weg deshalb meist nicht die erste Wahl.

Schritt für Schritt

1. Bot erstellen: Account anlegen, Website-URL eingeben, den Crawler arbeiten lassen und den Bot konfigurieren (Name, Begrüßung, Design). Eine Übersicht liefert die Seite Chatbot erstellen.
2. Snippet kopieren: Im Bot-Designer den Embed-Code mit deiner Kennung kopieren.
3. Einfügen: Einen der drei Wege oben wählen.
4. Cache leeren: Beim ersten Einbau Seiten- und Plugin-Cache leeren (siehe unten).
5. Prüfen: Die Seite in einem privaten Browserfenster ohne Anmeldung öffnen. Die Chat-Blase muss sichtbar sein, und eine Testfrage muss eine Antwort bekommen.

Caching und Consent

Caching. Cache-Plugins wandeln laut WordPress-Dokumentation Beiträge und Seiten in statische Dateien um. Das Script-Tag steckt dann in der zwischengespeicherten Seite. Nach dem Einfügen oder Ändern des Snippets musst du den Cache leeren, sonst sehen Besucher weiter die alte Version ohne Chatbot. Hast du Optimierungsfunktionen aktiv, die JavaScript zusammenfassen oder verzögern, teste das Widget anschließend und nimm das Skript im Zweifel von der Optimierung aus.

Consent. Das Widget setzt laut Datenschutzerklärung einen funktionalen Cookie (_wai_sid, 30 Tage) und speichert den Gesprächsverlauf im localStorage des Browsers. Es setzt keine Tracking-Cookies. Ob du dafür eine Einwilligung einholen musst, entscheidest du als Betreiber: § 25 TDDDG erlaubt das Speichern oder Auslesen von Informationen im Endgerät grundsätzlich nur nach Einwilligung, nennt in Absatz 2 aber Ausnahmen, etwa wenn die Speicherung unbedingt erforderlich ist, damit ein vom Nutzer ausdrücklich gewünschter digitaler Dienst bereitgestellt werden kann. Ob das auf deinen Fall passt, ist eine Einzelfallfrage; mehr dazu im Ratgeber „KI-Chatbot und DSGVO“.

Wenn du den Chat erst nach Zustimmung freischalten willst, bietet der Bot-Designer einen Cookie-Consent-Modus. Der Chat-Button erscheint dann mit Schloss-Symbol, und der Chat wird erst nach Zustimmung freigeschaltet:

<script src="https://website-ai-agent.com/widget/widget.js"
  data-agent-id="DEINE_BOT_KENNUNG"
  data-require-consent="true"></script>

Sobald dein Cookie-Banner die Zustimmung erfasst, rufst du WebsiteAIAgent.grantConsent(); auf. Wie dein Consent-Tool diesen Aufruf auslöst, hängt vom Tool ab.

Typische Fehler

• Der Chatbot erscheint nicht. Meist ist der Cache nicht geleert, das Theme ruft wp_footer() nicht auf, oder der Block wurde von einem Nutzer ohne unfiltered_html gespeichert und das Script entfernt.
• Das Widget meldet eine fehlende Kennung. Das Snippet braucht das Attribut data-agent-id. Beim Kopieren oder in einem Editor-Plugin geht es gelegentlich verloren – dann fehlt der Bezug zum Bot. Kopiere den Code aus dem Bot-Designer.
• Das Snippet steckt in einem Textblock. Dort können aus geraden Anführungszeichen typografische werden, und das Attribut wird nicht mehr erkannt. Verwende ein Code- oder HTML-Feld, nie einen Absatzblock.
• Doppelte Einbindung. Ist das Snippet im Theme und zusätzlich per Plugin eingefügt, erscheint der Bot zweimal. Entscheide dich für einen Ort.

Häufige Fragen

Gibt es ein WordPress-Plugin von Website AI Agent?

Die Integrationsseite beschreibt das Einbetten als einzeiliges JavaScript-Snippet, das in jedem CMS funktioniert, darunter WordPress. Ein eigenes Plugin ist dort nicht vorgesehen.

Kann ich den Chatbot nur auf bestimmten Seiten zeigen?

Ja, mit dem Theme-Weg: Das Theme Handbook weist darauf hin, dass sich über wp_enqueue_scripts Bedingungen für einzelne Seiten nutzen lassen. Alternativ setzt du das Snippet per Custom-HTML-Block nur dort ein, wo der Bot erscheinen soll.

Verlangsamt der Chatbot meine Seite?

Im Theme-Beispiel oben lädt das Skript mit async, blockiert also nicht das Rendern der Seite. Wie stark das Widget dein Ladeverhalten beeinflusst, misst du am besten selbst vor und nach dem Einbau.

Brauche ich einen Cookie-Banner für den Chatbot?

Das hängt von deiner Einordnung nach § 25 TDDDG ab, nicht vom Tool allein. Der Consent-Modus gibt dir die technische Möglichkeit, den Chat erst nach Zustimmung zu starten. Die rechtliche Bewertung für deine Seite ersetzt er nicht; sie bleibt eine Einzelfallfrage, und du kannst dich dafür an deine Datenschutzberatung wenden. Weitere Hinweise findest du auf der Seite Datenschutz und KI.