Einen Chatbot erstellst du auf einem von drei Wegen: mit einem SaaS-Tool wie Typeform oder Landbot, mit einem Low-Code-Builder wie Botpress oder Voiceflow, oder du programmierst ihn komplett selbst mit HTML, JavaScript und einem eigenen Backend. Welcher Weg der richtige ist, hängt weniger vom Budget ab als davon, wie viel Kontrolle du über Design, Daten und Tonfall brauchst.
Einen KI-Chatbot, der frei auf Fragen antwortet, baust du mit einem Low-Code-Builder oder programmierst ihn selbst: Du verbindest ein Sprachmodell mit deinen eigenen Inhalten und legst fest, worüber es reden darf. Wie das abgerechnet wird und wo es schiefgeht, steht weiter unten. Der Schwerpunkt hier liegt auf Anfrage-Chatbots, also geführten Dialogen, die Besucher Schritt für Schritt zur Anfrage bringen. Am Ende zeige ich, wie der Chatbot auf dieser Website gebaut ist: geführter Flow vorn, n8n und Claude API dahinter. Unten auf der Seite kannst du ihn ausprobieren.
Warum ein Chatbot und nicht einfach ein Formular?
Kontaktformulare haben ein strukturelles Problem: Sie zeigen den gesamten Aufwand auf einmal. Wer acht Felder sieht, bewertet unbewusst die Gesamtarbeit und bricht ab, bevor er anfängt. Ein Chatbot stellt eine Frage. Dann die nächste. Der Aufwand verteilt sich, das Commitment wächst mit jeder Antwort.
Das ist keine Design-Meinung, sondern Verhaltenspsychologie. Freedman und Fraser zeigten schon 1966 mit ihrer Foot-in-the-Door-Studie: Nach einer kleinen ersten Zustimmung erfüllten in der stärksten Versuchsbedingung 76 Prozent der Teilnehmer später eine deutlich größere Bitte, in der Kontrollgruppe nur 17 Prozent. Jede beantwortete Chatbot-Frage ist so ein Micro-Commitment. Die Praxiszahlen passen dazu: Typeform hat für seinen „Data on Data Report“ (2024) die eigenen Formulardaten aus 2023 ausgewertet, über 2,6 Millionen veröffentlichte Formulare. Das Eine-Frage-pro-Schritt-Format kam im Schnitt auf gut 47 Prozent Abschlussrate, mehr als das Doppelte des Branchenschnitts von rund 21,5 Prozent.
Drei Wege, einen Chatbot zu bauen
Alle drei Ansätze funktionieren. Sie unterscheiden sich in Kontrolle, Kosten und Abhängigkeit.
SaaS-Tools: Typeform, Landbot & Co.
Der schnellste Weg. Vorgefertigte Flows, Embeds, CRM-Integrationen, in einer Stunde eingebaut. Der Preis: ein Abo, begrenzte Design-Kontrolle und oft eine sichtbare Fremdmarke im Interface. Ehrlich gesagt: Für viele kleine Unternehmen reicht das völlig. Wenn dein Chatbot vor allem Kontaktdaten einsammeln soll, brauchst du keinen eigenen Stack.
Low-Code-Builder: Botpress, Voiceflow
Mehr Tiefe: konditionale Logiken, Datenbankanbindung, KI-Antworten. Die Lernkurve ist steiler, und die Plattformabhängigkeit bleibt: Wer wechselt, fängt von vorn an. Sinnvoll, wenn dein Bot mehr können muss als Fragen stellen: Wissensdatenbank abfragen, mehrsprachig antworten, Systeme verbinden.
Chatbot selbst programmieren: HTML, JavaScript, eigenes Backend
Der aufwendigste und flexibelste Weg. Kein Abo, keine Fremdmarke, volle Kontrolle über jeden Schritt, jede Formulierung, jede Farbe. Wer einen Chatbot selbst entwickelt, definiert den Flow am besten deklarativ: jeder Schritt ein Objekt mit Typ, Nachricht und Optionen, eine kleine Engine rendert ihn und schickt die Antworten an ein Backend. Der Haken: Du brauchst jemanden, der das baut.
KI-Chatbot erstellen: was sich ändert, wenn ein Sprachmodell antwortet
Ein KI-Chatbot folgt keinem vorgeschriebenen Flow. Ein Sprachmodell wie GPT, Claude oder Gemini formuliert jede Antwort selbst, meist auf Grundlage deiner eigenen Inhalte wie Website-Texten und FAQ, die der Bot vor dem Antworten durchsucht. Im Builder heißt das: Inhalte zusammensuchen und aufräumen, als Wissensquelle hochladen, in der Anweisung festlegen, wofür der Bot zuständig ist und was er bei Unsicherheit tut, dann mit echten Kundenfragen testen, bevor er auf die Seite kommt. Selbst programmiert hängst du meist an der Schnittstelle eines Modell-Anbieters, abgerechnet nach Textmenge. Die Kosten wachsen also mit jedem Gespräch, in den meisten Buildern genauso.
Der wichtigste Unterschied: wer die Sätze schreibt. Ein geführter Flow sagt nur, was du vorher geschrieben hast. Ein Sprachmodell kann eine Regel erfinden, die es bei dir nicht gibt. Bekanntestes Beispiel ist Air Canada: Der Chatbot der Airline hatte einem Kunden eine nachträgliche Ermäßigung für einen Trauerfall-Flug in Aussicht gestellt, die es so nicht gab. Das Civil Resolution Tribunal in British Columbia sprach dem Kunden im Februar 2024 rund 650 kanadische Dollar Schadenersatz zu (Moffatt v. Air Canada, 2024 BCCRT 149) und wies das Argument zurück, die Airline hafte nicht für Aussagen ihres Chatbots. Die Ausrede „Das war der Bot“ hat dort also nicht gezogen.
Zwei Dinge kommen dazu. Seit dem 2. August 2026 gilt Artikel 50 der EU-KI-Verordnung: KI-Systeme, die direkt mit Menschen interagieren, müssen so gestaltet sein, dass diese erkennen, dass sie es mit einer KI zu tun haben, sofern das nicht ohnehin offensichtlich ist. Und alles, was Besucher ins Chatfenster tippen, geht an den Modell-Anbieter, auch Namen, Telefonnummern oder Details zum eigenen Fall.
Meine Haltung: Für eine Anfrage-Strecke stelle ich keinen frei antwortenden Bot nach vorn. Wer anfragen will, will fertig werden: ein paar gute Fragen in der richtigen Reihenfolge, dann absenden. Ein KI-Chatbot lohnt sich eher im Support, wenn viele Besucher immer wieder dasselbe fragen und eine gepflegte Wissensbasis da ist, aus der er antworten kann. Fehlt die, füllt er die Lücken mit Erfundenem. Bei mir sitzt die KI hinter dem Flow, nicht davor.
Chatbot erstellen in fünf Schritten
Der Ablauf gilt für alle drei Wege, die du in Schritt drei wählst.
- Ziel festlegen: Welche eine Aktion soll der Bot auslösen, und welche Angaben brauchst du dafür wirklich? Jede Frage, die du nicht auswertest, fliegt raus.
- Flow skizzieren: Fragenreihenfolge und Verzweigungen erst auf Papier oder im Whiteboard, nicht im Tool. Hier fällt, was später über die Abschlussrate entscheidet. Beim KI-Chatbot skizzierst du stattdessen die Wissensbasis: welche Inhalte er kennt, welche Themen tabu sind und an wen er abgibt, wenn er etwas nicht weiß.
- Weg wählen: SaaS, Low-Code oder selbst programmieren, nach Kontrollbedarf statt nach Featureliste.
- Bauen und einbinden: Flow umsetzen, Backend anschließen, per Script-Tag oder iFrame in die Website holen.
- Testen und messen: Selbst durchklicken, auf dem Handy testen, und nach dem Start beobachten, an welcher Frage die Leute aussteigen. Diese Frage wird umformuliert oder gestrichen.
Worauf es bei der Konzeption ankommt
Egal welcher technische Weg: Über Erfolg oder Misserfolg entscheidet das Konzept.
1. Einstieg ohne Hürde
Die erste Interaktion darf keine Arbeit sein. Eine Button-Auswahl ohne Tippen („Was für ein Projekt planst du?“ mit drei bis fünf Optionen) kostet weniger als eine Sekunde. Das erste Ja ist das wichtigste: Ab dem zweiten Klick ist der Nutzer investiert.
2. Persönliche Daten kommen zuletzt
Name und E-Mail gehören ans Ende des Flows, nicht an den Anfang. Wer vorher drei, vier konkrete Fragen beantwortet hat, will den fast fertigen Abschluss nicht mehr wegwerfen. Wer dagegen sofort nach Daten gefragt wird, gibt dem Bot nichts außer Misstrauen.
3. Konditionale Logik statt linearer Abfrage
Wer einen Onepager anfragt, bekommt andere Folgefragen als wer einen Shop plant. Konditionale Flows senken den wahrgenommenen Aufwand, weil keine irrelevante Frage erscheint.
4. Persönlichkeit statt Perfektion
Ein Chatbot, der Ton, Name und Erscheinungsbild seines Absenders trägt, erzeugt mehr Vertrauen als ein generischer Bot. Ein stilisierter Avatar und ein konsistenter Ton genügen. Zu menschlich-realistisch wirkt schnell unheimlich. Der Bot ist ein Trust-Element wie jedes andere auf der Website: Er muss zur Marke passen, nicht sie ersetzen.
5. Den Abschluss nicht verschenken
Die Erfolgsmeldung ist der emotionalste Moment des Flows. Die Peak-End-Rule (Kahneman) besagt: Erlebnisse werden über ihren Höhepunkt und ihr Ende erinnert. Ein generisches „Danke für deine Nachricht“ verpufft. Eine Zeile, die Name und Projekt des Nutzers aufgreift, bleibt.
Wie der Chatbot auf dieser Website gebaut ist
Der Anfrage-Assistent unten auf dieser Seite ist der Custom-Ansatz in echt: reines HTML, CSS und Vanilla JavaScript, gehostet auf einem eigenen Server, eingebunden per iFrame. Kein Framework, kein Builder, kein Abo.
Der Flow folgt dem deklarativen Muster von oben. Eine Engine rendert die Schritte, sammelt die Antworten und schickt sie am Ende an n8n. Dort läuft eine Preislogik, dann übernimmt die Claude API: Sie generiert eine persönliche Antwort-E-Mail, die auf die konkreten Antworten eingeht, keine Template-Mail. Zwei Mails gehen raus: eine an den Interessenten, eine interne Übersicht an mich. Wo KI im Webprojekt sonst noch hilft und wo nicht, steht in Website mit KI erstellen.
Der Grund für den Aufwand: Ein Anfrage-Chatbot, der eine persönliche Marke trägt, darf sich nicht wie ein Drittanbieter-Formular anfühlen. Diesen Eindruck stellt kein SaaS-Tool vollständig her. Ein eigener Stack schon.
Fazit
Ein Chatbot ersetzt kein gutes Angebot. Wenn deine Leistung unklar ist, macht auch der beste Flow daraus keine Anfragen. Aber als Einstieg schlägt er das klassische Formular deutlich, wenn er richtig konzipiert ist: Micro-Commitments statt Feldwüste, persönliche Daten zuletzt, ein Ende, das hängen bleibt.
Die Technik ist dabei der kleinste Teil. Der Pappelbaum-Chatbot ist HTML und JavaScript auf einem VPS. Was ihn funktionieren lässt, ist die Entscheidung, jeden Schritt aus Nutzersicht zu denken. Mit derselben Haltung baue ich auch Websites.
Probier den Assistenten aus
Genau dieser Assistent ist hier live eingebunden. Er ist DSGVO-konform: rein statisch gebaut, ohne Cookies und ohne Tracking — deine Eingaben werden erst beim Absenden übertragen.
Häufige Fragen
Was ist der Unterschied zwischen einem Chatbot und einem Kontaktformular?
Ein Formular zeigt den gesamten Aufwand auf einmal, ein Chatbot führt Schritt für Schritt: eine Frage, eine Antwort, die nächste Frage. In Typeforms „Data on Data Report“ (2024, Datenbasis 2023 mit über 2,6 Millionen veröffentlichten Formularen) kam das Eine-Frage-Format im Schnitt auf gut 47 Prozent Abschlussrate, der Branchenschnitt klassischer Formulare lag bei rund 21,5 Prozent. Der Unterschied liegt im Commitment-Mechanismus, nicht im Design.
Braucht man ein spezielles Tool, um einen Chatbot zu bauen?
Nein. Der Pappelbaum-Chatbot ist reines HTML, CSS und Vanilla JavaScript: kein Framework, kein Builder, kein Abo. Was zählt, ist das Konzept: Fragenreihenfolge, konditionale Logik, Tonfall und ein Backend für die Verarbeitung. Für einfache Fälle reicht aber auch ein SaaS-Tool wie Typeform oder Landbot völlig aus.
Wie wird ein Chatbot in die eigene Website eingebunden?
Am einfachsten per Script-Tag oder iFrame: Der Chatbot läuft auf einem eigenen Server, ein kleines Script rendert einen Button und öffnet den Flow in einem Overlay. So bleibt er unabhängig vom CMS und lässt sich eigenständig weiterentwickeln, egal ob die Seite mit WordPress, Webflow oder Next.js gebaut ist.
Ist ein KI-Chatbot besser als ein geführter Anfrage-Flow?
Das sind zwei verschiedene Werkzeuge. Ein geführter Flow sammelt strukturiert Anfragen und ist berechenbar. Ein freier KI-Bot beantwortet offene Fragen, kann aber auch danebenliegen. Für die Anfrage-Strecke ist der geführte Flow meist die bessere Wahl. Sinnvoll wird KI dort, wo viele dieselben Fragen stellen und die Antworten sauber gepflegt sind, oder unsichtbar im Hintergrund, etwa für die persönliche Antwort-Mail nach der Anfrage.
Pappelbaum Design
Deine Website, persönlich gebaut.
Onepager, Firmenseite oder Relaunch: Ich baue sie, du pflegst die Inhalte selbst im Dashboard. Monatlich kündbar, bezahlt wird erst, wenn du zufrieden bist.