KI-Chatbot zu WordPress hinzufügen

Wege, einen Chatbot zu WordPress hinzuzufügen

Diese Anleitung zeigt den Weg über das Widget mit Elfsight AI Chatbot und danach, was eine eigene Lösung erfordert.

Chatbot erstellen

1. 1.

   Vorlage wählen und URL eingeben

   Öffnen Sie den Editor, wählen Sie eine Vorlage und fügen Sie die Adresse Ihrer WordPress-Website ein. Der Chatbot liest bis zu 200 Ihrer Seiten. Noch keine Website? Geben Sie Ihre Unternehmensdaten von Hand ein.

2. 2.

   Wissen hinzufügen

   Laden Sie Dateien hoch (PDF, DOCX, PPTX, TXT, JSON, HTML, MD), schreiben Sie Q&A-Paare für Preise und Richtlinien und fügen Sie Textblöcke für alles hinzu, was nicht auf der Website steht.

3. 3.

   Agent einrichten

   Name und Bild, Rolle, Ton (Freundlich, Professionell, Locker, Direkt oder ein eigener), Antwortlänge, Begrüßung und vorgeschlagene Fragen sowie Gesprächsregeln dafür, was er beantworten soll und was nicht.

4. 4.

   Skills aktivieren

   Kontakte sammeln, eine Folgenachricht senden, wenn ein Besucher nicht mehr antwortet, Aktionsschaltflächen anzeigen und die Kontakte Ihres Teams anbieten, wenn der Agent nicht helfen kann.

5. 5.

   An Ihr Theme anpassen

   Wählen Sie eines von sechs Themes, eine Akzentfarbe und eine Schrift, die zu Ihrem WordPress-Theme passt.

Mehr zu jedem Schritt unter KI-Chatbot zur Website hinzufügen.

Chatbot zu jeder Seite in WordPress hinzufügen

Ein schwebender Chat gehört meist auf jede Seite. Klicken Sie im Editor auf Zur Website hinzufügen, kopieren Sie den Code und nutzen Sie dann einen dieser Wege:

1. 1.

   Ein Header-und-Footer-Plugin

   Installieren Sie über Plugins → Neues Plugin hinzufügen ein Code-Snippet-Plugin wie WPCode, öffnen Sie dessen Header-und-Footer-Einstellungen, fügen Sie den Code in das Footer-Feld ein und speichern Sie. Der sicherste Weg: Er übersteht Theme-Updates.

2. 2.

   Der Footer eines Block-Themes

   Gehen Sie zu Design → Editor → Vorlagen → Footer, fügen Sie einen Block Individuelles HTML hinzu, fügen Sie den Code ein und speichern Sie.

3. 3.

   Ein Widget-Bereich eines klassischen Themes

   Gehen Sie zu Design → Widgets (oder Customizer → Widgets), fügen Sie einem Footer-Bereich ein Widget Individuelles HTML hinzu, fügen Sie den Code ein und veröffentlichen Sie.

Um den Chat auf einzelnen Seiten auszublenden – etwa im Checkout –, nutzen Sie die Sichtbarkeitseinstellungen des Chatbots, statt den Code zu entfernen.

Chatbot zu einer einzelnen WordPress-Seite hinzufügen

1. 1.

   Seite öffnen

   Gehen Sie in WordPress zu Seiten, fahren Sie mit der Maus über die Seite und klicken Sie auf Bearbeiten.

2. 2.

   Block „Individuelles HTML“ hinzufügen

   Klicken Sie auf +, suchen Sie Individuelles HTML und platzieren Sie den Block dort, wo der Chat erscheinen soll. Im klassischen Editor wechseln Sie stattdessen zum Tab Text.

3. 3.

   Code einfügen und aktualisieren

   Fügen Sie den Chatbot-Code ein und klicken Sie auf Aktualisieren. Ein eingebetteter Chat erscheint an dieser Stelle; ein schwebender öffnet sich nur auf dieser Seite aus der Ecke.

Page Builder funktionieren genauso: das HTML-Widget in Elementor, das Code-Modul in Divi. Siehe KI-Chatbot für Elementor und KI-Chatbot für WooCommerce für Shops.

WordPress.com oder WordPress.org?

Auf einer selbst gehosteten WordPress.org-Website funktioniert jeder der oben genannten Wege. Auf WordPress.com erfordern Skripte und Plugins den Business-Tarif oder höher; in kleineren Tarifen wird der Code entfernt oder als reiner Text angezeigt.

Wo der Chatbot auf Ihrer Website erscheinen sollte

• Seiten, auf denen Besucher hängen bleiben – auf Preis-, Kontakt-, Produkt- und Checkout-Seiten entstehen Fragen.

• Unten rechts ist der Standard, nach dem Besucher suchen; verschieben Sie ihn nach links oder unten mittig, wenn er einen Warenkorb- oder Cookie-Button verdeckt.

• Begrüßung und vorgeschlagene Fragen wirken besser als ein bloßer Button: Sie zeigen Besuchern, was der Chat kann.

• Ein eingebetteter Chat passt auf eine Hilfe- oder Kontaktseite, auf der der Chat der Hauptinhalt ist.

• Nach Seite und Gerät ein- oder ausblenden – in den Einstellungen des Chatbots, sodass derselbe Code für die ganze Website reicht.

Eigenen Chatbot mit der OpenAI-API bauen

Wenn Sie volle Kontrolle brauchen, können Sie einen Chatbot auf der API eines KI-Modells aufbauen. Dafür sind vier Bausteine nötig:

1. 1.

   Ein API-Schlüssel

   Erstellen Sie ihn auf der Entwicklerplattform des Anbieters und halten Sie ihn geheim – niemals im Seitencode.

2. 2.

   Ein Backend

   Ein kleines Serverskript, das die Nachricht des Besuchers empfängt, die API aufruft und die Antwort zurückgibt. Es braucht Hosting und HTTPS.

3. 3.

   Eine Chat-Oberfläche

   HTML und JavaScript für das Chatfenster, hinzugefügt über ein Code-Snippet-Plugin oder einen Block „Individuelles HTML“.

4. 4.

   Ihr Wissen

   Von Haus aus weiß das Modell nichts über Ihr Unternehmen; Sie müssen es mit Ihren Inhalten versorgen und diese aktuell halten.

Außerdem pflegen Sie alles selbst: API-Limits und -Kosten, Modelländerungen, Sicherheit, mobiles Layout. Für die meisten WordPress-Websites ist ein fertiges Widget schneller eingerichtet und günstiger im Betrieb.

Tipps für einen besseren WordPress-Chatbot

• Mit echten Fragen trainieren. Laden Sie Ihre 20 häufigsten Fragen mit Antworten, aktuelle Preise und Richtlinien und entfernen Sie veraltete Versionen.

• Eine eigene Stimme geben. Legen Sie den Ton fest und fügen Sie ein paar Gesprächsregeln hinzu, damit er nach Ihrer Marke klingt und nicht nach einem beliebigen Bot.

• Einen Plan B festlegen. Bieten Sie die Kontakte Ihres Teams an, wenn der Agent nicht antworten kann oder der Besucher nach einer Person fragt.

• Die Chats lesen. Chats und Leads finden Sie in Ihrem Dashboard, und Protokolle lassen sich an Ihre E-Mail senden – prüfen Sie sie wöchentlich und schließen Sie Lücken.

• Auf dem Smartphone testen. Prüfen Sie, dass der Launcher auf kleinen Bildschirmen keine Menüs oder Buttons verdeckt.

• Datenschutzerklärung aktualisieren. Erwähnen Sie den Chatbot und die Kontaktdaten, die er erfasst, und weisen Sie im Footer des Chats darauf hin, dass die Antworten von einer KI stammen.

Fehlerbehebung

1. 1.

   Der Chatbot erscheint nicht

   Prüfen Sie, ob der Code auf der angezeigten Seite eingebunden ist, und leeren Sie dann den Cache Ihres Caching-Plugins und CDN. Optimierungs-Plugins, die JavaScript verzögern oder zusammenfassen, können ihn blockieren – nehmen Sie das Skript des Chatbots davon aus.

2. 2.

   Der Code wird als Text angezeigt

   Er wurde in einen Absatz-Block oder den Tab „Visuell“ eingefügt. Nutzen Sie einen Block „Individuelles HTML“ oder den Tab „Text“ im klassischen Editor; auf WordPress.com prüfen Sie Ihren Tarif.

3. 3.

   Er erscheint auf Seiten, auf denen er nicht soll

   Legen Sie Seitenregeln in den Sichtbarkeitseinstellungen des Chatbots fest oder verschieben Sie den Code aus dem websiteweiten Footer auf einzelne Seiten.

4. 4.

   Antworten sind falsch oder vage

   Ergänzen Sie fehlende Fakten als Q&A-Paare oder Textblöcke, entfernen Sie widersprüchliche Dateien und schärfen Sie die Gesprächsregeln.

Vollständige Anleitung mit Screenshots: Elfsight-Widget zu WordPress hinzufügen ↗ · Lieber nicht selbst machen? Kostenlose Installation anfordern ↗