Wie wir aus einem Chat-Widget einen Conversion-Funnel gemacht haben

Wir haben heute den NeXsoft-AI-Chat von Nice-Toy zu Measurable-Conversion-Tool umgebaut. Sechs Pattern, alle bei uns selbst im Production-Code, alle messbar in Vercel Analytics.

Das Problem: ein Chat ohne Story

Der erste Wurf war ein Floating-Button mit Sparkles-Icon. User klickt, Chat-Sheet öffnet, leerer Eingabe-State, generisches Frag uns alles. Wirklich passiert: User klickt, sieht nichts Konkretes zum Fragen, schließt wieder, nie wieder gesehen.

Das hat zwei Probleme:

• Kein Intent-Signal: der Chat weiß nicht warum der User gerade auf /preise ist.
• Kein nächster Schritt: selbst wenn die AI brauchbar antwortet, gibt es keinen Path zur Buchung.

Pattern 1: Page-aware Initial-Suggestions

Der erste Tap im Chat ist das wichtigste Signal — und gleichzeitig dort, wo wir am meisten Kontext haben: die URL. Jemand auf /preise hat vermutlich Pricing-Fragen, jemand auf /cases/helia-health evaluiert ein konkretes Projekt.

10 Pfade, je 4 Chips. Lift: ein Tap statt Tippen.

Pattern 2: URL-Trigger (?chat=...) — das Killer-Feature

Der Floating-Button ist passiv. Das URL-Trigger-Pattern macht den Chat aktiv aufrufbar von jeder Stelle:

• ?chat=open öffnet den Chat leer
• ?chat=Was+kostet+ein+MVP%3F öffnet und pre-fillt die Frage
• ?chat=ask:Was+kostet+ein+MVP%3F öffnet und sendet sofort an die AI

Implementierung: useEffect liest window.location.search beim Mount, handelt den Param, history.replaceState entfernt ihn aus der URL damit kein Refresh-Loop entsteht.

Dann auf jeder relevanten Page einen subtilen Link: oder frag die AI: Welches Paket passt zu uns? Tap → Chat öffnet pre-filled → User schickt → AI antwortet → Hand-off zur Calendly-Buchung. Drei Klicks von Pricing zu Erstgespräch.

Pattern 3: Calendly-Hand-off-Card nach 2 Messages

Wann soll man den User zur Buchung schicken? Nicht sofort (zu pushy). Nicht erst nach 10 Messages (verloren). Sweet Spot: nach 2 User-Messages. Da hat der User schon investiert, und das lieber direkt sprechen?-Prompt fühlt sich hilfreich an statt aufdringlich.

Die Karte ist visuell distinct von Message-Bubbles — gradient border, calendar icon, prominenter Button. Liest sich als CTA, nicht als Chat-Text.

Pattern 4: Stage-aware Follow-up Chips

Nach jeder AI-Antwort: 3 kontextuelle Chips. Aber welche? Zähle die User-Messages und cycle durch:

• Early (1 msg): Zeig mir konkrete Cases · Was kostet ein MVP? · Welcher Stack?
• Mid (2-3): Festpreis wirklich Festpreis? · Wie lange dauert das? · Habt ihr AI-Praxis-Erfahrung?
• Late (4+): Erstgespräch buchen · Per WhatsApp schreiben · Roadmap ansehen

Die Late-Chips bypassen die AI komplett: Erstgespräch buchen → router.push("/contact"). Schnellere Conversion, gespartes Token-Budget.

Pattern 5: Email-Fallback wenn AI offline

Was wenn der AI-Gateway-Key fehlt oder die API timeout't? Statt eine kalte AI gerade offline-Message zu zeigen und den User zu verlieren, rendern wir inline eine Mini-Email-Form. POST geht an /api/newsletter (das eh BotID-protected ist und Resend nutzt). On Success ersetzt sich die Form durch ein Häkchen-Bestätigungs-Element. Sub-Conversion gerettet.

Pattern 6: Analytics-Events für jeden Schritt

Ohne Messung ist alles oben Tribal Knowledge. Sechs Vercel-Analytics-Events vom Open bis zum Klick:

• chat_opened mit path und ggf. via:"url_trigger"
• chat_first_message mit 50-char Preview (PII-safer als full text)
• chat_chip_used mit stage und chip
• chat_handoff_click wenn die Calendly-Card geklickt wird
• chat_conversion_route route'd zu /contact, WhatsApp oder /roadmap
• chat_email_submitted wenn die Fallback-Form abgeschickt wird

Alle Calls sind cookie-consent-gated: ohne Einwilligung wird der Analytics-Provider gar nicht geladen, track() wird zum No-op. DSGVO-konform per Default.

Das große Ganze

Jedes einzelne Pattern ist klein. Zusammen formen sie eine geführte User-Journey:

1. User landet auf /preise, sieht den AI-Hook
2. Tap → Chat öffnet → Frage vorbefüllt → User schickt
3. AI antwortet mit Markdown und Link auf /cases
4. 3 mid-stage Chips erscheinen, User tappt einen weiter
5. Nach 2. Message: Calendly-Hand-off-Card erscheint
6. User tappt Termin buchen → /contact mit inline-Calendly-Embed
7. Booking. Conversion.

Was du nachbauen kannst

Die Patterns sind AI-Service-agnostisch. Tausch streamText gegen eine vorgefertigte FAQ-Mapping, und der gleiche Funnel funktioniert. Was bleibt:

• Page-Pfad → kontextuelle Initial-Suggestions
• URL-Param → tiefer Link in den Chat
• Stage-Counting → progressive Disclosure von Conversion-Optionen
• Hand-off-Card als visuell distinkte Component
• Inline-Email-Fallback wenn der Primary-Path failt
• Strukturierte Analytics-Events pro Schritt

Wenn du gerade selbst an einem Chat-Widget baust und dich fragst warum konvertiert das nichts — das hier ist warum. Setz die sechs Pattern. Dann kommt der Funnel.