Chatbots werden zu einem Standardkanal im Kundenservice, doch HTML-Websites verfügen nicht über dieselben One-Click-Integrationen wie Plattformen wie Shopify oder WordPress. Die gute Nachricht: Sie müssen keinen Chatbot von Grund auf neu erstellen – HTML-Chatbots lassen sich visuell konfigurieren und mit einem einzigen Code-Schnipsel in jede Seite einbetten.
Dies lässt sich mit dem Elfsight AI Chatbot – einem benutzerfreundlichen Widget, das auf Ihre eigenen Geschäftsinhalte trainiert wird und sich als Zwei-Zeilen-Paste in jede HTML-Datei einbetten lässt – realisieren. Es beantwortet Besucherfragen, sammelt Leads und unterstützt standardmäßig mehrsprachige Unterhaltungen. Unten erläutern wir diese Methode neben den DIY-Ansätzen, damit Sie die passende Wahl für Ihr Setup treffen können.
- Eine schnelle & einfache Möglichkeit, einen KI-Chatbot in HTML einzubetten – ohne Programmierung.
- So trainieren und passen Sie einen KI-Chatbot an Ihren Anwendungsfall an.
- Welche Einschränkungen gibt es bei manuellen Integrationsmethoden?
- 6 Optimierungstipps für ein wirklich effektives KI-Chatbot-Erlebnis
Schnelle Möglichkeit, einen Chatbot in HTML einzubinden
So fügen Sie einen Chatbot in HTML in vier Schritten hinzu – ganz ohne Programmierung, abgesehen von einem einzigen Einfügen:
- Öffnen Sie den Editor und wählen Sie eine KI-Chatbot-Vorlage
- Konfigurieren Sie die Wissensdatenbank des KI-Chatbots & passen Sie ihn an
- Klicken Sie auf „Zur Website hinzufügen“, um Ihren Installationscode zu erhalten.
- Fügen Sie es in den <body>-Bereich Ihrer HTML-Datei ein und speichern Sie Ihre Änderungen.
Konfigurieren Sie Ihren KI-gestützten Chatbot im interaktiven Editor unten ↓
Einrichtungsmethoden für einen HTML-Chatbot
Es gibt mehrere Möglichkeiten, einen KI-Chatbot in eine benutzerdefinierte HTML-Website zu integrieren. Die passende Lösung hängt davon ab, wie viel Kontrolle Sie benötigen, wie viel Zeit Sie investieren möchten und ob Sie KI-gestützte Konversationen oder einen einfachen Entscheidungsbaum suchen.
| Methode | Schwierigkeitsgrad | KI | Anpassung | Wartung | Kosten |
|---|---|---|---|---|---|
| Elfsight KI-Chatbot | Ohne Code | Ja (GPT-gestützt) | Hoch (visueller Editor) | Keine (cloud-gehostet) | Kostenloser Plan / kostenpflichtige Tarife |
| Eigener JavaScript-Chatbot | Fortgeschritten | Optional (API erforderlich) | Vollständig | Hoch (selbst verwaltet) | API-Kosten |
| Integration externer APIs | Fortgeschritten | Ja | Mäßig | Mäßig | API-Nutzungsgebühren |
| Open-Source-Chatbot-Framework | Fortgeschritten | Variiert | Vollständig | Hoch | Kostenlos + Hosting |
Wesentliche Erkenntnis: Ein Chatbot-Widget ist der schnellste Weg, wenn Sie keine Infrastruktur aufbauen oder warten möchten. Ein benutzerdefiniertes JS-Chatbot oder eine direkte API-Integration gibt Ihnen mehr Kontrolle, erfordert jedoch Entwicklungszeit und laufende Wartung — Open-Source-Frameworks gelten genauso.
Welche Art von Chatbot benötigen Sie?
Bevor Sie loslegen, lohnt es sich zu klären, was der Chatbot wirklich leisten soll.
Support-Assistent vs. Conversion-Tool
Die meisten Menschen setzen standardmäßig auf einen „Kundensupport-Bot“, doch die eigenen Community-Daten von Elfsight zeigen, dass die Mehrheit der Chatbot-Setups gar keine reinen Support-Mitarbeiter sind. Sie dienen als Buchungsassistenten, Produktempfehlungsführer, FAQ-Navigatoren und Beratungs-Funnels.
| Anwendungsfall | Fokus der Wissensdatenbank | Schlüsselfähigkeiten zur Aktivierung | Begrüßungsstil |
|---|---|---|---|
| Kundensupport | Hilfedokumente, Richtlinien, Troubleshooting-Anleitungen | Person kontaktieren, Nachfass-Nachricht | Aufgabenorientiert („Wie kann ich helfen?“) |
| Verkaufs- und Produktleitfaden | Produktseiten, Preise, Vergleiche | Aktionsschaltflächen (WhatsApp, E-Mail, URL) | Vorteilsorientiert („Finde den passenden Plan“) |
| Buchung / Beratung | Dienstleistungen, Verfügbarkeit, Ablauf | Aktions-Schaltflächen (Wegbeschreibung, URL), Kontakte sammeln | Handlungsorientiert („Eine Sitzung buchen“) |
| Schulungen / FAQ | Artikel, Leitfäden, Textbausteine | Nachfass-Nachricht | Neugiergesteuert („Frag mich alles zu …“) |
Der Unterschied zählt: Er beeinflusst, was du in deine Wissensdatenbank einfügst, wie du die Begrüßung formulierst und welche Fähigkeiten du aktivierst.
Ein Chatbot oder mehrere?
Wenn Ihre Website verschiedene Zielgruppen oder Anwendungsfälle bedient, sollten Sie in Erwägung ziehen, für unterschiedliche Seiten separate Chatbot-Widgets zu verwenden, statt eines Allzweck-Bots. Jedes Widget kann eine eigene Wissensbasis und eigene Anweisungen haben — sodass ein Preis-Seiten-Chatbot Vergleiche übernimmt, während ein Support-Seiten-Chatbot sich auf Fehlersuche konzentriert. So bleiben Antworten fokussiert und Verwirrung wird reduziert.
Bevorzugen Sie Videos statt Lesen? Dieses kurze Tutorial zeigt die komplette Einrichtung:
Echtzeit-Benachrichtigungen. Aktualisierungen zu Anfragen, Bestellungen oder Aktionen direkt über WhatsApp verbessern das Kundenerlebnis.
Jetzt, da Sie den benötigten Chatbot-Typ festgelegt haben, führt Sie diese Schritt-für-Schritt-Anleitung durch jede Konfigurationsphase – von der Vorlagen-Auswahl bis zur Einbettung.
Schritt 1: Wähle deine HTML-Chatbot-Vorlage
Öffne den KI-Chatbot Editor, und du siehst eine Bibliothek von Starter-Vorlagen, die für verschiedene Anwendungsfälle entworfen wurden. Jede Vorlage enthält vorkonfigurierte Begrüßungen, vorgeschlagene Fragen und einzigartige Stile. Wählen Sie die Vorlage, die Ihrem Geschäftstyp am nächsten kommt, oder beginnen Sie mit einer leeren Vorlage — im nächsten Schritt passen Sie alles an.
Nachdem Sie eine Vorlage ausgewählt haben, klicken Sie auf „Mit dieser Vorlage fortfahren“ und fügen Sie Ihre Website-URL ein, um das erste Training zu starten.
Schritt 2: KI-Agent-Profil konfigurieren
Als Nächstes definiert der Agent Tab, wie sich der Chatbot präsentiert und wie er kommuniziert. Das Erste, was Besucher sehen, wenn das Chatfenster geöffnet wird, daher lohnt es sich, es richtig einzustellen.
- Anzeigename & Beschriftung — der im Chat-Header angezeigte Name (z. B. Firmenname + “KI-Agent”)
- Profilbild — Laden Sie Ihr Logo oder einen benutzerdefinierten Avatar hoch
- Rolle — Beschreiben Sie, was der Agent tut, damit die KI in der Rolle bleibt
- Tonfall – Wähle aus Freundlich, Professionell, Locker, Direkt oder schreibe eigene Anweisungen
- Antwortlänge — Kurz (schnell und prägnant), Mittel (ausgewogene Antworten) oder Lang
Begrüßung & vorgeschlagene Fragen
Das ist einer jener Schritte, die darüber entscheiden, ob Nutzer den KI-Chatbot tatsächlich verwenden. Eine Begrüßung wie „Hallo! Wie kann ich Ihnen helfen?“ ist gut, aber generisch. Eine Begrüßung wie „Hi! Ich kann Ihnen helfen, den passenden Plan zu finden, die Verfügbarkeit von Funktionen zu prüfen oder Sie durch die Einrichtung zu führen — fragen Sie einfach.“ zeigt Besuchern genau, was der KI-Chatbot kann.
Für vordefinierte Fragen schreiben Sie 2–4 Fragen, die widerspiegeln, was Ihre Besucher am häufigsten fragen, um sie von Anfang an in die richtige Richtung zu lenken.
Agenten-Anweisungen
Unter den Profil-Einstellungen finden Sie außerdem Gesprächsregeln — damit können Sie spezifische Verhaltensweisen festlegen, zum Beispiel „Preisgestaltung der Mitbewerber nicht diskutieren“ oder „Bei komplexen Fragen stets eine Beratung vorschlagen“. Denken Sie an diese Leitplanken: Die KI stützt sich bei Fakten auf Trainingsdaten, aber Regeln legen fest, wie sie Randfälle behandelt.
Schritt 3: Aufbau und Organisation Ihrer Wissensdatenbank
Und jetzt der wichtigste Schritt: Der Knowledge-Bereich ist der Ort, an dem Ihr Chatbot lernt, was er sagen soll. Ein Chatbot ist nur so gut wie der Inhalt, auf dem er trainiert wird.
Sie haben fünf Möglichkeiten, dem System Informationen zu übermitteln:
- Webseiten — URLs von Ihrer Website (bis zu 200 Seiten)
- Dateien — laden Sie Dokumente im PDF-, TXT-, JSON-, DOCX-, PPTX-, HTML- oder MD-Format hoch
- Fragen & Antworten – Fügen Sie vordefinierte Frage-Antwort-Paare für die häufigsten Besucherfragen hinzu
- Freitext-Blöcke — Inhalte in Freitextform für Geschäftsinformationen, Richtlinien, Produktbeschreibungen
- Unternehmensinformationen — Name deines Unternehmens, Branche und eine kurze Übersicht
Für die meisten Kleinunternehmens-Websites beginnen Sie mit der Startseite, den wichtigsten Service-/Produktseiten, der FAQ-Seite und der Kontaktseite. Das deckt 80 % der Fragen ab, die Besucher stellen. Später können Sie jederzeit weitere Inhalte hinzufügen – die Wissensdatenbank ist nach der Ersteinrichtung nicht gesperrt.
Schritt 4: HTML-Chatbot-Fähigkeiten einrichten
Die Fähigkeiten-Registerkarte ermöglicht Ihrem Chatbot, mehr zu tun als nur Fragen zu beantworten. Derzeit stehen vier Fähigkeiten zur Verfügung, um das Erlebnis Ihrer Website-Besucher zu verbessern.
Hier eine Übersicht, wozu jede Fähigkeit befähigt.
| Chatbot-Fähigkeiten | Was es kann |
|---|---|
| Aktions-Schaltflächen | Besucher können direkt im Chat schnell handeln: WhatsApp öffnen, eine E-Mail senden, Wegbeschreibung erhalten oder eine URL öffnen. Trigger-Bedingungen definieren Sie in natürlicher Sprache. |
| Kontakte erfassen | Ein integriertes Formular, das nach Name, E-Mail und Telefonnummer fragt. Sie bestimmen, wann das Formular erscheint und welche Felder enthalten sein sollen. Es kann erforderlich gemacht werden, um den Chat fortzusetzen |
| Nachfass-Nachricht | Nach einer Phase der Inaktivität des Besuchers wird eine automatisierte Nachricht gesendet. Praktisch, um Besucher wieder zu erreichen oder eine Kontaktmöglichkeit zu bieten. |
| Einen Ansprechpartner kontaktieren | Leitet Besucher an eine reale Person weiter per E-Mail, Telefon oder WhatsApp, wenn der Chatbot nicht antworten kann oder der Besucher menschliche Hilfe anfordert. |
Die Fähigkeit Contact a Human ist es wert, eingerichtet zu werden, auch wenn Sie nicht mit viel Traffic rechnen. Sie wird automatisch ausgelöst, wenn der Chatbot eine Frage nicht beantworten kann oder der Nutzer menschliche Hilfe anfordert. Beachten Sie außerdem, dass dies Besucher auf externe Kanäle weiterleitet — es bringt keinen Menschen in dieselbe Chat-Sitzung.
Schritt 5: Theme und Aussehen anpassen
Der Thema-Tab steuert das Erscheinungsbild des Chatbots auf Ihrer Website. Sechs adaptive Designs stehen zur Verfügung — jedes basiert auf einer einzelnen Akzentfarbe, die Sie festlegen können.
Klicken Sie auf „Theme anpassen“, um tiefer vorzudringen:
- Wählen Sie die Farbe und Größe des Launcher-Buttons.
- Wählen Sie Kopfzeile und Fußzeile-Farben
- Chat-Hintergrund und Eckenradius festlegen
- Farben einzelner Elemente auswählen (Schaltflächen, Meldungen usw.)
- Wählen Sie eine Schrift aus der Bibliothek
Sie können den Header-Hintergrund in einer einfarbigen Farbe oder einem Verlauf festlegen, dem Chat-Hintergrund ein Muster hinzufügen oder stattdessen ein Bild als Hintergrund hochladen.
Schritt 6: Anzeige- und Verhaltens-Einstellungen konfigurieren
Die Einstellungen Registerkarte verwaltet Platzierung, Sichtbarkeit, Auslöser und Benachrichtigungen — im Wesentlichen, wo der Chatbot erscheint, wann er erscheint und wie er sich ankündigt.
Platzierung und Layout
In diesem Abschnitt können Sie das Aussehen Ihres Chatbots auf der Seite anpassen:
- Schwebender Chat (Blase in der Ecke) oder Eingebetteter Chat (Inline innerhalb Ihrer Inhalte)
- Position: Links oder Rechts, mit vertikalem und horizontalem Abstand
- Wähle ein Bubble-Icon aus der Bibliothek oder lade dein eigenes hoch
- Anzeige: Öffnet sich manuell oder automatisch beim Laden der Seite bzw. nach Verzögerung
Chat-Sichtbarkeit
Hier entscheiden Sie, wo Ihr Widget je nach Strategie angezeigt oder ausgeblendet wird:
- Alle Seiten
- Nur auf der Startseite
- Ihre festgelegten Seiten
- Mobil, Desktop oder alle Geräte
Sound-Benachrichtigungen
Sound-Benachrichtigungen können so konfiguriert werden, dass sie nach Interaktionen abgespielt werden: wenn der Benutzer das Chatfenster öffnet, eine Nachricht sendet oder der Chatbot antwortet.
Weitere Einstellungen
- Google Analytics – Integration zeigt Ihnen, wie Besucher mit Ihrem KI-Chatbot interagieren.
- E-Mail-Benachrichtigungen ermöglichen es, vollständige Chat-Transkripte automatisch an Ihren Posteingang zu senden.
- Sprache & Region bestimmen die primäre Sprache des Chatbots und die Zeitzone
- Footer-Text kann für Hinweise zur KI-Nutzung, Richtlinien oder Kontaktlinks verwendet werden.
- Individuelles CSS und JS können für fortgeschrittenes Styling genutzt werden
Schritt 7: Den KI-Chatbot in Ihre HTML-Website einbetten
Schließlich klicken Sie im Editor auf „Add to Website“, um Ihren Installationscode zu erzeugen — zwei Zeilen: ein <script>-Tag, das die Elfsight-Plattform lädt, und ein <div>-Tag, das angibt, wo das Widget gerendert wird.
Öffnen Sie die HTML-Datei der Seite, auf der der Chatbot erscheinen soll. Für einen schwebenden Chatbot fügen Sie den Code überall innerhalb des <body>-Bereichs ein — kurz vor dem schließenden </body>-Tag ist eine gängige Wahl. Alternativ, für einen eingebetteten Chatbot, fügen Sie ihn an der genauen Stelle der Seite ein, an der er erscheinen soll.
Schneller Fehlerscheck
- Chatbot erscheint nicht: Prüfen Sie, dass der Code innerhalb von <body>-Tags platziert ist, nicht innerhalb von <head>, <style> oder <script>-Tags.
- KI-Chatbot wird im Editor angezeigt, aber nicht auf der Website: Einige Widgets benötigen eine aktive Internetverbindung zum Laden. Lokales Testen über das file://-Protokoll funktioniert möglicherweise nicht — verwenden Sie stattdessen einen lokalen Server oder die live gehostete Version.
- Layoutfehler nach dem Hinzufügen des Codes: Stelle sicher, dass der Installationscode nicht in ein anderes HTML-Element eingefügt wurde, das Inhalte einschränkt. Er sollte als eigenständiger Block innerhalb des <body> stehen.
- Chatbot liefert falsche oder leere Antworten: Überprüfen Sie die Wissensdatenbank-Registerkarte. Wenn Sie nur eine oder zwei URLs hinzugefügt haben, hat der Chatbot wenig Material zur Verfügung. Fügen Sie weitere Seiten, Dateien oder Textbausteine hinzu und klicken Sie anschließend auf „Neu trainieren“.
Widget-Alternativen: So erstellen Sie einen benutzerdefinierten HTML-Chatbot
Das Elfsight-Widget erledigt alles über einen visuellen Editor, aber es gibt legitime Gründe, eine andere Vorgehensweise zu wählen — insbesondere, wenn Sie die volle Kontrolle über die Logik des Chatbots benötigen oder ihn mit Ihrem eigenen KI-Backend verbinden möchten. Hier ist, worin sich jeder Ansatz konkret auswirkt:
Option 1: Chatbot mit JavaScript und API erstellen
Wenn du über Entwicklungsressourcen verfügst, kannst du eine Chatbot-Oberfläche von Grund auf neu mit HTML, CSS und JavaScript erstellen und sie anschließend über die API eines KI-Anbieters (wie OpenAI, Anthropic oder Google) mit der Konversationslogik verbinden. Der Prozess auf einen Blick:
- Erstelle die Chat-Oberfläche (einen Container-Div, Nachrichtenliste, Eingabefeld und Sende-Button) mit HTML und CSS.
- JS schreiben, Nutzereingaben erfassen, per fetch() an einen KI-API-Endpunkt senden und die Antwort anzeigen.
- Verwalten Sie den Gesprächsverlauf, indem Sie bei jeder API-Anfrage das vollständige Nachrichten-Array übergeben.
- Auf Ihrem Webserver neben Ihren bestehenden HTML-Dateien bereitstellen.
Option 2: Verwenden Sie ein Open-Source-Framework
Frameworks wie Botpress, Rasa oder Chatwoot bieten vorgefertigte Dialog-Engines, die Sie selbst hosten und in Ihre Website einbetten können. Sie richten sich an Teams, die benutzerdefinierte Abläufe, Integrationen oder Datenschutzkontrollen benötigen.
- Installieren und konfigurieren Sie das Framework auf Ihrem eigenen Server oder einer Cloud-Instanz.
- Gesprächsabläufe mit dem visuellen Builder des Frameworks oder Konfigurationsdateien erstellen.
- Generieren Sie den Embed-Code oder das JavaScript-Snippet, das vom Framework bereitgestellt wird.
- Fügen Sie den Einbettungscode in Ihre HTML-Datei ein und veröffentlichen Sie ihn.
Option 3: Fügen Sie einen regelbasierten Chatbot mit einer JS-Bibliothek hinzu
Für Websites, die nur einen einfachen Entscheidungsbaum-Chatbot benötigen (ohne KI-Unterstützung), reichen leichte JavaScript-Bibliotheken aus, um grundlegende Verzweigungen komplett im Browser abzuwickeln.
- Wählen Sie eine Bibliothek (z. B. BotUI, simple-chatbot) aus und binden Sie sie über einen CDN-Link in Ihr HTML ein.
- Definieren Sie Ihren Dialogfluss als JSON-Struktur mit Fragen, Optionen und Antworten.
- KI-Chatbot in einem Skript-Block initialisieren und an ein Container-Div mounten.
Optimierungstipps für Ihren HTML-Chatbot
Setup abgeschlossen — so unterscheidet sich ein Chatbot, den Besucher wirklich nutzen, von dem, den sie nach drei Sekunden schließen.
- Vorschläge für Fragen – basierend auf dem Verhalten echter Besucher. Ziehen Sie die Top-3 bis Top-4-Fragen aus Ihrem Support-Posteingang, aus Kontaktformularen oder aus den Suchlogs der Website.
- Nutz die Q&A-Funktion für deine kritischsten Fragen. Wenn es eine Frage gibt, bei der die Antwort absolut korrekt sein muss (Preisgestaltung, Rückgaberichtlinien, rechtliche Konformität), füge sie als Q&A-Paar in die Wissensdatenbank hinzu.
- Richten Sie die Fähigkeit ‘Kontakt per Mensch’ realistisch ein. Der KI-Chatbot leitet Besucher zu externen Kanälen weiter, daher sollten Sie sicherstellen, dass die von Ihnen konfigurierten Kontaktdaten aktiv überwacht werden, damit Besucher nicht an eine Sackgasse geraten.
- Schulen Sie das Modell mit JSON-Dateien für strukturierte Daten.
- Nutzen Sie Sichtbarkeitssteuerungen für seiten-spezifisches Verhalten. Vermeiden Sie auf Ihren Support-Dokumentationsseiten einen vertriebsorientierten KI-Chatbot und auf der Startseite einen Fehlerbehebungs-Bot.
Häufig gestellte Fragen
Warum wird mein KI-Chatbot nicht angezeigt, wenn ich die HTML-Datei im Browser öffne?
Wie zeige ich den KI-Chatbot auf jeder Seite meiner HTML-Website an?
Aktualisiert sich der KI-Chatbot automatisch, wenn ich Inhalte ändere?
Kann ich den KI-Chatbot auch auf einer statischen HTML-Website verwenden?
Warum gibt mein KI-Chatbot falsche Antworten?
Fazit
Es gibt mehrere Möglichkeiten, einen Chatbot in eine benutzerdefinierte HTML-Website zu integrieren: Von der eigenständigen Erstellung mit JavaScript und einer API bis hin zur Einbettung eines No-Code-Widgets. Mit einem HTML-Chatbot-Widget funktioniert der gesamte Prozess über einen visuellen Editor und einen einzigen Code-Schnipsel – kein Backend, keine Framework-Abhängigkeiten, kein laufender Code-Wartungsaufwand.
Wenn Sie noch nicht begonnen haben, öffnen Sie den KI-Chatbot-Editor und fügen Sie Ihrer Wissensdatenbank die ersten Seiten hinzu. Sobald er live ist, besteht der wichtigste nächste Schritt darin, zu verfeinern, was der Chatbot weiß und wie er kommuniziert — fügen Sie der Wissensdatenbank weitere URLs hinzu, dann optimieren Sie Ihre Gesprächsregeln und Anweisungen, und gestalten Sie die Chatbot-Persönlichkeit, sodass sie zur Markenstimme passt.
