Chatbot erstellen: Worauf es wirklich ankommt
Was einen guten Anfrage-Chatbot ausmacht: Konzept, Psychologie und technische Umsetzung am Beispiel von Pappelbaum Design.
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.
Es geht hier um Anfrage-Chatbots: geführte Dialoge, die Besucher Schritt für Schritt zur Anfrage führen. KI-Support-Bots, die frei Fragen beantworten, sind ein eigenes Projekt mit eigenen Risiken. Ich zeige dir, was einen Anfrage-Chatbot wirklich konvertieren lässt, und wie der Chatbot auf dieser Website konkret gebaut ist: mit n8n-Backend und Claude API. Unten auf dieser Seite kannst du ihn live 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. Wer kein JavaScript schreibt, ist mit einem SaaS-Tool besser bedient.
Chatbot erstellen in fünf Schritten
Der Ablauf ist immer derselbe, egal für welchen Weg du dich in Schritt drei entscheidest.
- 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 entstehen die Entscheidungen, die später über die Abschlussrate bestimmen; was dabei zählt, steht im nächsten Abschnitt.
- 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. Technologie rettet kein schlechtes 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. Die Faustregel aus der Conversion-Optimierung: unverfängliche Fragen zuerst, Kontaktdaten als letzter Schritt.
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. Und jede gestellte Frage signalisiert: Hier hört jemand zu.
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 — dieselbe Denkweise, mit der ich auch Websites baue.
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; KI lohnt sich im Hintergrund, etwa für die personalisierte Antwort-Mail.
Pappelbaum Design
Deine eigene Website — ab 100 €
Professionelles Webdesign, persönlich gebaut und ohne Agenturumweg — vom Onepager bis zum Relaunch. Direkt mit mir, transparent zum Festpreis. Der erste Schritt kostet nichts.