April 12, 2026
Ein Chatbot für Anfragen klingt nach einem großen Projekt. Ist es nicht – wenn man weiß, worauf es ankommt. Dieser Beitrag zeigt, was einen guten Chatbot ausmacht, welche Fehler man vermeiden sollte und wie der Anfrage-Chatbot von Pappelbaum Design konkret umgesetzt wurde.
Dieser Beitrag zeigt auch, wie der Pappelbaum-Chatbot konkret aufgebaut ist – inklusive iFrame-Einbindung, n8n-Backend und Claude API. Unten auf dieser Seite kannst du den Chatbot direkt ausprobieren.
Kontaktformulare haben ein strukturelles Problem: Sie zeigen den gesamten Aufwand auf einmal. Wer ein Formular mit acht Feldern sieht, bewertet unbewusst den Gesamtaufwand – und bricht häufiger ab, bevor er beginnt. Conversational Forms lösen dieses Problem, indem sie eine Frage stellen. Dann eine weitere. Der Aufwand verteilt sich, das Commitment wächst mit jeder Antwort.
Das ist keine Design-Meinung, sondern Verhaltenspsychologie. Freedman & Fraser zeigten 1966 in ihrer Foot-in-the-Door-Studie, dass Menschen nach einer kleinen ersten Zustimmung mehr als viermal wahrscheinlicher eine größere Bitte erfüllen. Jede beantwortete Chatbot-Frage ist ein solches Micro-Commitment. Conversational Forms erreichen in Vergleichsstudien Completion Rates von bis zu 47 Prozent – klassische Formulare liegen bei etwa 4,5 Prozent.
Wer heute einen Anfrage-Chatbot bauen will, hat drei grundlegend verschiedene Ansätze zur Auswahl. Jeder hat seine Berechtigung – und seine Grenzen.
SaaS-Tools wie Typeform, Tally oder Landbot sind der schnellste Weg. Sie bieten vorgefertigte Flows, Embeds und Integrationen. Der Preis: monatliche Abonnements, begrenzte Kontrolle über Design und Daten, und oft eine sichtbare Fremdmarke im Interface. Für einfache Kontaktformulare funktioniert das. Für einen Chatbot, der die eigene Markenidentität tragen soll, ist das Kompromiss.
Low-Code-Builder wie Botpress oder Voiceflow gehen tiefer. Sie erlauben komplexere Logiken, Datenbankanbindungen und KI-Integration. Die Lernkurve ist steiler, die Abhängigkeit von der Plattform bleibt aber bestehen. Wer die Plattform wechselt, fängt von vorn an.
Custom-Entwicklung mit eigenem Backend ist der aufwendigste, aber flexibelste Ansatz. Kein Abonnement, keine Fremdmarke, vollständige Kontrolle über Datenfluss, Logik und Erscheinungsbild. Dafür braucht man technisches Wissen oder jemanden, der es mitbringt. HTML, JavaScript, ein Backend für die Verarbeitung – und ein Plan, was der Chatbot wirklich tun soll.
Unabhängig davon, welcher technische Weg gewählt wird: Die Entscheidungen, die über Erfolg oder Misserfolg eines Chatbots entscheiden, sind konzeptioneller Natur. Technologie löst kein schlechtes Konzept.
Die erste Interaktion darf kein Aufwand sein. Eine visuelle Button-Auswahl ohne Tippen – "Was für ein Projekt planst du?" mit drei bis fünf Optionen – kostet den Nutzer weniger als eine Sekunde. Das erste "Ja" ist das wichtigste: Es aktiviert die Consistency-Psychologie. Ab dem zweiten Klick ist der Nutzer bereits investiert und dreimal wahrscheinlicher, den Flow abzuschließen.
Name und E-Mail gehören ans Ende des Flows – nicht an den Anfang. Wer vorher drei bis vier spezifische Fragen beantwortet hat, spürt den Sunk-Cost-Effekt: Das Abbrechen kostet mehr als das Abschließen. Wer sofort nach persönlichen Daten gefragt wird, gibt dem Chatbot nichts außer Misstrauen. KlientBoost verlor in einem A/B-Test 50 Prozent seiner Conversions, als "Firmenname" das erste Feld wurde.
Nicht alle Nutzer sind gleich – ein guter Chatbot behandelt sie auch nicht so. Konditionale Flows stellen je nach Kontext andere Folgefragen. Wer einen Onepager anfragt, bekommt andere Fragen als wer einen internationalen Shop plant. Der wahrgenommene Aufwand sinkt, weil keine irrelevanten Fragen erscheinen. Die Relevanz jeder Frage steigt.
Ein Chatbot, der die Persönlichkeit seines Absenders trägt – Ton, Name, visuelles Erscheinungsbild – erzeugt mehr Vertrauen als ein generischer Bot. Die Forschung zu KI-Chatbot-Vertrauen (Wu et al.) identifiziert Expertise, Reaktionsfähigkeit und Persönlichkeit als die drei stärksten Faktoren. Ein stilisierter Avatar und ein konsistenter Ton genügen. Zu realistisch wirkt unheimlich – das ist der Uncanny-Valley-Effekt, auch in Text-Interfaces belegt.
Die Erfolgsmeldung am Ende ist der emotionalste Moment des gesamten Flows. Die Peak-End-Rule (Kahneman) besagt: Menschen erinnern sich an Erlebnisse durch ihren Höhepunkt und ihr Ende. Ein generisches "Danke für deine Nachricht" verpufft. Eine Zeile, die den Namen und das Projekt des Nutzers aufgreift, bleibt.
Die Wahl des richtigen Ansatzes hängt von drei Faktoren ab: Kontrolle, Kosten und Komplexität des gewünschten Flows.
Typeform, Tally, Landbot und ähnliche Plattformen bieten den schnellsten Start. Der eingebettete Code ist oft in Minuten fertig, die Integrationen zu CRMs und E-Mail-Tools sind vorhanden. Der Kompromiss ist die Abhängigkeit: von der Plattform, vom Preismodell, von den Limitierungen im Design. Wer den Chatbot als Erweiterung der eigenen Marke versteht, stießt schnell an Grenzen.
Botpress, Voiceflow oder Dialogflow erlauben komplexere Dialoglogiken, mehrsprachige Flows und KI-basierte Antworten. Der Aufwand ist größer, die Flexibilität ebenfalls. Für Chatbots, die komplexe Fragen beantworten oder Datenbanken abfragen müssen, ist das der richtige Ansatz. Die Plattformabhängigkeit bleibt.
Reines HTML, CSS und JavaScript – kein Framework, kein Build-Tool, kein Abonnement. Der gesamte Flow ist deklarativ in einem Step-Array definiert: jeder Schritt ein Objekt mit Typ, Nachricht und Optionen. Eine Engine rendert die Schritte, verwaltet Antworten und schickt sie an ein Backend. Das Backend – ob n8n, ein eigener Node.js-Server oder eine Serverless-Funktion – verarbeitet die Daten, lässt Logik laufen und schickt Ergebnisse zurück.
Der Vorteil: volle Kontrolle über jeden Schritt, jede Formulierung, jede Farbe und jeden Datenpunkt. Kein externes Branding, keine Beschränkungen, keine monatliche Rechnung für Features die man nie nutzt. Der Nachteil: der Aufwand liegt zu Beginn. Wer kein JavaScript schreiben kann oder will, ist mit einem SaaS-Tool besser bedient.
Der Chatbot auf dieser Website – der Webdesign-Anfrage-Flow unten auf dieser Seite – ist ein Beispiel für den Custom-Ansatz. Kein eingekauftes Tool, kein Low-Code-Builder. Reines HTML, CSS und Vanilla JavaScript, gehostet auf einem eigenen Server, eingebunden per iFrame.
Was das konkret bedeutet: Ein kleines Widget-Script liest beim Laden der Seite die aktuelle URL. Je nach Seite – Webdesign, Branding, Print oder Editorial – lädt es automatisch den passenden Anfrage-Flow in einem Overlay. Der Flow selbst ist deklarativ: jeder Schritt ist ein Objekt mit Typ, Nachricht und Optionen. Eine Engine rendert ihn, verwaltet die Antworten und schickt sie am Ende an n8n.
n8n empfängt die Daten, lässt eine Preislogik laufen und übergibt das Ergebnis an die Claude API. Claude generiert daraus eine persönliche Antwort-E-Mail, die auf die spezifischen Antworten des Nutzers eingeht – keine Template-Antwort, sondern ein Text, der klingt als wäre er direkt geschrieben worden. Zwei Mails gehen raus: eine an den Kunden, eine interne Übersicht.
Der Grund für diesen Aufwand ist einfach: Ein Anfrage-Chatbot, der die persönliche Marke tragen soll, darf kein Fremdprodukt sein. Er muss sich anfühlen wie ein Gespräch mit dem Absender – nicht wie ein ausgefülltes Formular bei einem Drittanbieter. Diesen Eindruck kann kein SaaS-Tool vollständig herstellen. Ein eigener Stack schon.
Ein Anfrage-Chatbot konvertiert besser als ein Kontaktformular – nicht wegen der Technologie, sondern wegen der Psychologie. Micro-Commitments, persönliche Daten zuletzt, konditionale Flows und ein starkes Ende entscheiden. Der Pappelbaum-Chatbot wurde mit HTML, JS, n8n und Claude API umgesetzt und per iFrame in Webflow eingebunden.
Was ist der Unterschied zwischen einem Chatbot und einem Kontaktformular?
Ein Kontaktformular zeigt den gesamten Aufwand auf einmal. Ein Chatbot führt Schritt für Schritt – eine Frage, eine Antwort, die nächste Frage. Das psychologische Ergebnis ist ein anderes: Conversion Rates von 4,5 Prozent (Formular) vs. bis zu 47 Prozent (Conversational Form). Der Unterschied liegt im Commitment-Mechanismus, nicht im Design.
Braucht man ein spezielles Tool um einen Chatbot zu bauen?
Wie wird ein Chatbot in Webflow eingebunden?
Ein Chatbot ist kein Ersatz für ein gutes Angebot. Aber er ist ein deutlich besserer Einstieg als ein klassisches Formular – wenn er richtig konzipiert ist. Die Psychologie ist klar: Menschen committen sich lieber Schritt für Schritt als auf einmal. Der Aufwand wirkt kleiner, das Vertrauen wächst mit jeder Frage, und am Ende ist das Ausfüllen der letzten Felder selbstverständlich geworden.
Die technische Umsetzung muss dafür kein großes Projekt sein. Der Pappelbaum-Chatbot ist reines HTML und JavaScript, deployed auf einem VPS, eingebunden per iFrame. Was ihn funktioniert macht, ist nicht die Technologie – es ist die Entscheidung, jeden einzelnen Schritt aus Nutzerperspektive zu denken.
Das Buch von den Machern von Tailwind CSS. Konkrete, visuelle Tipps wie man UI-Designs von 'okay' zu 'professionell' bringt – ohne Designstudium. Direkt beim Autor kaufen, nicht bei Amazon erhältlich.
Psychologie trifft Webdesign. Yablonski erklärt welche psychologischen Prinzipien hinter gutem UX stecken – Fitts' Law, Hick's Law, Miller's Law und mehr. Auch auf Deutsch erhältlich. Kompakt, visuell und sofort in der eigenen Arbeit anwendbar.
Der absolute Klassiker zur Web-Usability – über 700.000 Mal verkauft. Krug erklärt mit Witz und Klarheit warum Websites intuitiv funktionieren müssen und wie man das umsetzt. Kompakt, illustriert und in wenigen Stunden gelesen. Pflichtlektüre für jeden der Websites baut.
