So fügen Sie einen WhatsApp-Button zu Webflow hinzu (kostenlos – keine App erforderlich)
Du entwickelst auf Webflow, weil du Kontrolle willst – saubere Interaktionen, genaues Design, nichts Aufgepfropftes, das seinen Platz nicht verdient. Ein WhatsApp-Button sollte zu dieser Philosophie passen: keine schwere Integration, keine Drittanbieter-App, die deine Kunden verwaltet, nur ein Tap von deiner Seite zu einem echten WhatsApp-Chat mit deiner Nummer.
Hier erfahren Sie, wie Sie in etwa zwei Minuten einen schwebenden WhatsApp-Button zu jeder Webflow-Website hinzufügen können – keine Webflow-App, kein Konto, keine monatliche Gebühr.
Der schnelle Weg: öffnen Sie unseren kostenlosen WhatsApp-Button-Generator für Webflow, geben Sie Ihre Nummer ein, wählen Sie einen Stil aus, kopieren Sie den Code und fügen Sie ihn ein Website-Einstellungen → Benutzerdefinierter Code → Footer-Code. Das ist die gesamte Einrichtung.
Warum einen WhatsApp-Button auf Ihrer Webflow-Website platzieren
- Chat konvertiert, wo Formulare zögern. Ein Besucher, der gerade eine Entscheidung trifft – Preisgestaltung, Verfügbarkeit, eine individuelle Anfrage – erhält in WhatsApp schneller eine Antwort als in einem Formular, über das er nachdenken muss.
- WhatsApp ist dort, wo Ihre Kunden sind. Für Milliarden von Menschen ist es die am häufigsten genutzte App auf dem Telefon; der Button begegnet ihnen dort.
- Antworten landen auf deinem Handy. Der Button öffnet WhatsApp mit Ihrer Nummer und einer vorausgefüllten Nachricht — antworten Sie in Sekunden von überall, sogar unterwegs.
- Er harmoniert gut mit Ihrem Stack. Chats kommen zuerst direkt zu Ihnen; verbinden Sie später dieselbe Nummer mit The Tech Pad für KI-Antworten und ein gemeinsames Team-Postfach.
Das erhalten Sie mit dem kostenlosen Generator
Das Webflow WhatsApp-Button-Generator bietet Ihnen eine echte schwebende Schaltfläche:
- 8 nur für WhatsApp verfügbare Stile — das offizielle WhatsApp-Logo und Blasenmarkierungen in Markenfarbschalen (grün, dunkelgrün, weiß, blaugrün)
- Ihre Nummer + vorausgefüllte Nachricht — legen Sie die erste Nachricht fest, die Besucher sehen
- Form, Größe und Position — rund oder quadratisch, links oder rechts, beliebige Größe
- Live-Vorschau — den genauen Button ansehen, bevor Sie etwas kopieren
- Kein Konto, kein API-Schlüssel, keine Kosten — für immer kostenlos
| Fähigkeit | Kostenloser Button | Das The Tech Pad Upgrade |
|---|---|---|
| Besucher starten einen WhatsApp-Chat mit Ihrer Nummer | ✅ | ✅ |
| Nur WhatsApp-Stile + Live-Vorschau | ✅ | ✅ |
| KI antwortet 24/7 in der Sprache des Kunden | — | ✅ |
| Ein Team-Posteingang für WhatsApp + Website-Chat | — | ✅ |
| Offizielle WhatsApp Business (Meta) API | — | ✅ |
| Preis | Für immer kostenlos | Kostenlos starten |
Fügen Sie den Button in 3 Schritten zu Webflow hinzu
- Generieren Sie Ihren Code. Öffnen Sie den kostenlosen Generator, geben Sie Ihre WhatsApp-Nummer mit Ländervorwahl ein (nur Ziffern, z.B.
919876543210), wählen Sie einen Stil und klicken Sie Code kopieren. - Öffne benutzerdefinierten Code. Drücken Sie im Webflow-Designer W (oder klicken Sie auf das W Logo oben links) und öffnen Sie Benutzerdefinierter Code.
- Füge ihn in den Footer-Code ein und veröffentliche. Fügen Sie den Code in das Footer-Code Box — sie wird auf jeder Seite geladen, direkt vor dem schließenden body-Tag — klicken Änderungen speichern, dann Veröffentlichen.
Der Code ist ein kleines Script-Tag, das asynchron geladen wird, sodass Ihre Seite nicht verlangsamt wird:
<script async src="https://thetechpad.com/chat/widget.js" data-ttp-wa="919876543210" data-ttp-wa-icon="wa-classic" data-ttp-wa-shape="round" data-ttp-wa-size="56" data-ttp-wa-pos="right"></script>Wann ist es live? Benutzerdefinierter Code wird angewendet, wenn du deine Website auf einem Webflow-Seitenplan veröffentlichst (einschließlich der Einstiegskostenstufe). Auf der kostenlosen Staging-Domain wird er nur zu Vorschauzwecken angezeigt — veröffentliche, und deine Besucher sehen den Button.
Warum Code statt einer Webflow-App?
Webflow-Apps und Integrationen bringen echte Leistung, aber eine einzelne schwebende WhatsApp-Schaltfläche benötigt keine: keine Installation aus dem Marketplace, keine Berechtigungsaufforderungen, kein Abonnement. Der Code-Weg hält es schlank:
- Nichts zu installieren oder genehmigen — nur benutzerdefinierter Code und ein Klick auf Veröffentlichen
- Ihre Nummer, Ihre Regeln — Nachrichten gehen an die von Ihnen gewählte WhatsApp-Nummer, nicht an ein Drittanbieter-Postfach
- Der gleiche Code funktioniert auch anderswo — betreibt auch eine Shopify, Squarespace, Blogger, HubSpot oder Wix Website? Jede hat ihre eigene Generatorseite mit Einfügeschritten.
Willst du, dass der Knopf für dich antwortet?
Eine Schaltfläche ist der erste Schritt — der nächste ist sofortiges Antworten, selbst wenn Sie beschäftigt sind oder schlafen. The Tech Pad verwandelt dieselbe WhatsApp-Nummer in einen 24/7 KI-Assistenten:
- KI antwortet sofort von Ihrer Webseite und Ihren Produktseiten — in der Sprache Ihres Kunden
- Ein gemeinsames Team-Postfach für WhatsApp-Chats, Website-Chat und Benachrichtigungen
- Die offizielle WhatsApp Business API auf Ihrer eigenen, von Meta verifizierten Nummer
- Kostenlos zu starten, keine Kreditkarte erforderlich — verbinden Sie sich unter thetechpad.com
Zwei Minuten heute reichen aus, um eine aktive WhatsApp-Schaltfläche auf Webflow zu haben. The Tech Pad später hinzuzufügen, lässt sie für Sie antworten.