WhatsApp-Button auf der Website einbinden: Code, Plugin oder Widget

SendSeven Team, Editorial Team

WhatsApp-Button auf der Website einbinden: HTML-Code zum Kopieren, der richtige wa.me-Link mit Umlauten, Wege für WordPress, Shopify und Wix, das Verhalten am Computer, DSGVO, Messung und was nach dem Klick passiert. Mit Live-Demo.

Viele Kunden schreiben lieber, als anzurufen, und WhatsApp haben sie ohnehin auf dem Smartphone. Ein WhatsApp-Button auf Ihrer Website oder Homepage macht aus dieser Gewohnheit einen Kontaktweg: ein Klick, und der Chat mit Ihrem Unternehmen ist offen. Den Button einzubauen dauert wenige Minuten. Dieser Beitrag zeigt den Code zum Kopieren, den Weg in WordPress, Shopify und Wix und die Stellen, an denen ein Button in der Praxis scheitert: am Computer, beim Datenschutz, bei der Messung und im Posteingang.

Was ist ein WhatsApp-Button für die Website?

Ein WhatsApp-Button ist ein Button oder Link auf Ihrer Website, der direkt einen WhatsApp-Chat mit Ihrer Unternehmensnummer öffnet. Technisch steckt dahinter der Click-to-Chat von WhatsApp: ein Link auf wa.me mit Ihrer Nummer und, wenn Sie wollen, einem Text, der im Eingabefeld schon bereitsteht. Auf dem Smartphone öffnet der Link die WhatsApp-App, am Computer WhatsApp Web oder die Desktop-App.

Der Besucher muss Ihre Nummer weder abtippen noch speichern. Er sieht den vorausgefüllten Text, ergänzt ihn oder schickt ihn ab, und Sie haben eine Anfrage mit Telefonnummer im Posteingang. Ob der Button grün, in Ihrer Markenfarbe oder als runde Schaltfläche am Bildschirmrand erscheint, ist reine Gestaltung. Der Link darunter ist immer derselbe.

Live-Demo

Probieren Sie es aus: Diese Buttons öffnen einen echten Chat

Jeder Button hier ist ein ganz normaler wa.me-Link zu unserem Support. Auf dem Smartphone öffnet sich die WhatsApp-App, am Computer WhatsApp Web oder die Desktop-App.

1. Klassisch in WhatsApp-Grün

Per WhatsApp fragen

Fällt sofort auf, die Farbe kennt jeder.

2. In Ihrer Markenfarbe

Chat auf WhatsApp starten

Der Button trägt Ihre Farbe, das WhatsApp-Logo bleibt unverändert.

3. Schwebend unten rechts

www.ihre-website.de

Fragen? Schreiben Sie uns

Bleibt beim Scrollen sichtbar, auf jeder Seite.

4. QR-Code für den Computer

Sie sitzen am Computer? Scannen Sie den Code mit der Kamera Ihres Smartphones, dann öffnet sich der Chat direkt in Ihrer WhatsApp-App.

Alle Varianten füllen dieselbe Nachricht vor: Hallo SendSeven, ich habe noch weitere Fragen zu WhatsApp-Buttons für meine Website. Abgeschickt wird erst, wenn Sie auf Senden tippen. Erst dann sehen wir Ihre Nummer, und unser Support-Team antwortet Ihnen im Chat.

Wie baue ich den wa.me-Link richtig auf?

Der Link besteht aus https://wa.me/, Ihrer vollständigen internationalen Nummer ohne Pluszeichen, ohne führende Null und ohne Leer- oder Sonderzeichen, und optional aus ?text= mit der URL-kodierten Nachricht. So beschreibt es WhatsApp in der offiziellen Hilfe zu Click-to-Chat.

Aus +49 (0) 821 7898-8853 wird so 4982178988853: Ländervorwahl 49, die Null der Vorwahl entfällt, Klammern, Bindestriche und Leerzeichen ebenso. Der fertige Link lautet https://wa.me/4982178988853.

Die vorausgefüllte Nachricht muss URL-kodiert sein. Buchstaben, Ziffern sowie Bindestrich, Punkt, Unterstrich und Tilde bleiben, alles andere wird zu einem Prozent-Code. Gerade Umlaute gehen leicht schief, denn sie bestehen in UTF-8 aus zwei Bytes:

Ein Beispiel aus unserer Live-Demo: „für“ wird zu f%C3%BCr. Der komplette Link zu unserem Support sieht so aus:

https://wa.me/4982178988853?text=Hallo%20SendSeven%2C%20ich%20habe%20noch%20weitere%20Fragen%20zu%20WhatsApp-Buttons%20f%C3%BCr%20meine%20Website.

Die häufigsten Fehler sind ein Pluszeichen oder eine Null hinter der Ländervorwahl (wa.me/+49… oder wa.me/490170…), nicht kodierte Leerzeichen und ein Kaufmannsund oder eine Raute im Text, die den Rest der Nachricht abschneiden. Fehlt die Nummer ganz, öffnet WhatsApp nur die Kontaktauswahl. Wenn Sie nichts von Hand kodieren möchten, erstellt unser kostenloser WhatsApp-Link-Generator den Link samt QR-Code.

Welche Möglichkeiten gibt es, einen WhatsApp-Button einzubinden?

Es gibt drei Wege: den wa.me-Link als eigenen HTML-Code, ein fertiges Plugin für Ihr Website-System oder ein Chat-Widget, das WhatsApp mit anderen Kanälen und einem Posteingang verbindet. Der Code ist am schlanksten, das Plugin geht ohne Code-Kenntnisse, das Widget lohnt sich, sobald mehr als eine Person antwortet.

Für einen einzelnen Button auf der Kontaktseite reicht der HTML-Code. Ein Plugin lohnt sich, wenn Sie den Button ohne Code-Kenntnisse auf allen Seiten zeigen möchten. Ein Widget ist der richtige Weg, wenn Anfragen aus mehreren Kanälen bei einem Team landen sollen.

Wie sieht der HTML-Code für einen WhatsApp-Button aus?

Der einfachste WhatsApp-Button ist ein normaler HTML-Link auf wa.me mit target="_blank", damit Ihre Seite im Browser offen bleibt. Im Beispiel steht unsere Support-Nummer. Ersetzen Sie sie durch Ihre eigene und passen Sie den Text an:

<a href="https://wa.me/4982178988853?text=Hallo%2C%20ich%20habe%20eine%20Frage%20zu%20Ihrem%20Angebot."
   target="_blank" rel="noopener">
  Per WhatsApp fragen
</a>

Für einen schwebenden Button, der auf jeder Seite unten rechts sitzt, kommt etwas CSS dazu. Der Code gehört einmal vor das schließende </body>-Tag Ihres Templates:

<a href="https://wa.me/4982178988853?text=Hallo%2C%20ich%20habe%20eine%20Frage."
   class="wa-float" target="_blank" rel="noopener"
   aria-label="Chat auf WhatsApp starten">
  <img src="/bilder/whatsapp-icon.svg" alt="" width="28" height="28">
</a>

<style>
  .wa-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  }
</style>

Auf drei Details kommt es an. Das aria-label: Ein Button, der nur ein Logo zeigt, braucht einen Namen für Screenreader. Die Größe: 56 Pixel sind auf dem Smartphone gut zu treffen, unter 44 Pixel wird es knapp. Das ist auch die Mindestgröße, die Apple und die WCAG für Touch-Ziele empfehlen. Das Icon: Laden Sie das WhatsApp-Logo aus den offiziellen Brand-Ressourcen von WhatsApp herunter, verändern Sie es nicht, auch nicht in der Farbe, und legen Sie es auf Ihren eigenen Server. Ein Icon von einem fremden Server überträgt bei jedem Seitenaufruf die IP-Adresse Ihrer Besucher.

Wie binde ich den WhatsApp-Button in WordPress, Shopify oder Wix ein?

In allen gängigen Systemen gilt dasselbe Prinzip: Ein einzelner Button kommt als HTML-Block in die Seite, ein schwebender Button einmal in den Footer vor </body>. Nur die Menüs heißen anders.

WordPress

• Button in einer Seite: Fügen Sie im Block-Editor den Block „Individuelles HTML“ ein und kopieren Sie den Link-Code hinein.
• Schwebender Button auf allen Seiten: Am sichersten mit einem Plugin für Header- und Footer-Code wie WPCode. Dort fügen Sie den Code in den Footer-Bereich ein. Wer bei einem klassischen Theme direkt die footer.php bearbeitet, sollte ein Child-Theme nutzen, sonst ist der Code nach dem nächsten Theme-Update weg. Block-Themes haben keine footer.php, dort ist WPCode der einfachere Weg.
• Fertige WhatsApp-Plugins: Im Plugin-Verzeichnis gibt es viele. Prüfen Sie vor der Installation, ob das Plugin Dateien von fremden Servern lädt, wann es zuletzt aktualisiert wurde und ob es mit Ihrem Cookie-Banner zusammenspielt.

Shopify

• Schwebender Button im ganzen Shop: Unter Onlineshop > Themes klicken Sie beim aktuellen Theme auf das Drei-Punkte-Menü und dann auf „Code bearbeiten“. Öffnen Sie die Datei layout/theme.liquid und fügen Sie den Code direkt vor </body> ein. Duplizieren Sie das Theme vorher über dasselbe Menü.
• Button auf einer Seite oder Produktseite: In Online-Store-2.0-Themes wie Dawn fügen Sie im Theme-Editor einen Abschnitt „Benutzerdefiniertes Liquid“ hinzu und setzen den Link-Code hinein.

Wix und Webflow

• Wix: Für einen Button auf einer Seite nutzen Sie im Editor das Element zum Einbetten von HTML-Code. Wix zeigt eingebetteten Code in einem eigenen Rahmen. Ein schwebender Button über der ganzen Website gehört deshalb unter Einstellungen > Entwicklung und Integrationen > Benutzerdefinierter Code. Den Bereich nutzen Sie nur mit veröffentlichter Website, verbundener Domain und damit einem Premiumpaket.
• Webflow: Seitenweit tragen Sie den Code in den Website-Einstellungen unter „Custom code“ ins Feld „Footer code“ ein, das setzt einen kostenpflichtigen Site-Plan voraus. Für einen einzelnen Button nutzen Sie das Element „Code Embed“.

Ein Chat-Widget mit WhatsApp einbinden

Ein Widget wie das von SendSeven wird genauso eingebaut: Sie fügen ein Skript-Schnipsel einmal vor </body> ein. In WordPress geht das über den Footer oder WPCode, in Shopify über theme.liquid, in Wix und Webflow über den Bereich für benutzerdefinierten Code, wie oben beschrieben. Alle Einstellungen im Detail beschreibt unsere Anleitung zum Website-Widget.

Was passiert, wenn jemand am Computer auf den Button klickt?

Am Computer öffnet ein wa.me-Link zuerst eine Seite von WhatsApp, von der es in die Desktop-App oder zu WhatsApp Web geht. Ist der Besucher dort nicht angemeldet, muss er erst sein Smartphone koppeln, und genau an dieser Stelle brechen viele ab.

Auf dem Smartphone ist der Weg kurz: Klick, die App öffnet sich, die Nachricht steht bereit. Am Computer hängt alles davon ab, ob WhatsApp dort schon eingerichtet ist. Gerade im B2B, wo viele Besucher am Arbeitsplatz recherchieren, ist das oft nicht der Fall.

Die Lösung ist ein QR-Code: Der Besucher scannt ihn mit dem Smartphone und landet direkt im Chat in seiner App. In der Live-Demo oben sehen Sie das am Computer als vierte Variante. Mit reinem HTML bauen Sie das über eine CSS-Regel, die den QR-Code nur auf großen Bildschirmen zeigt. Das SendSeven-Widget übernimmt den Wechsel selbst: Klickt jemand am Computer auf WhatsApp, zeigt das Widget einen QR-Code und bietet WhatsApp Web als zweiten Weg an. Auf dem Smartphone öffnet sich direkt die App. Die Funktion ist bei neuen Widgets eingeschaltet, bestehende Widgets behalten ihr bisheriges Verhalten. Sie gilt auch für Telegram, Messenger, Instagram und SMS. Wo Sie QR-Codes außerhalb der Website einsetzen, zeigt unser Beitrag zu sechs Orten für den WhatsApp-QR-Code.

Ist ein WhatsApp-Button auf der Website DSGVO-konform?

Ja, ein selbst gehosteter wa.me-Link lässt sich DSGVO-konform einbinden: Er überträgt beim Laden Ihrer Seite keine Daten an WhatsApp, erst der Klick des Besuchers führt dorthin. Genauer hinsehen müssen Sie bei Plugins und Widgets, die Skripte, Schriften oder Icons von fremden Servern laden, und bei der Frage, wo der Chat danach verarbeitet wird.

• Vor dem Klick: Ein selbst gehosteter Button mit eigenem Icon lädt nichts von Dritten. Plugins, die Dateien von fremden Servern holen, übertragen dabei die IP-Adresse und gehören deshalb in Ihre Prüfung und gegebenenfalls in den Cookie-Banner.
• Datenschutzerklärung: Sie enthält üblicherweise einen Hinweis auf WhatsApp als Kontaktweg und auf die Daten, die Sie im Chat erhalten. Die genaue Formulierung klären Sie am besten mit Ihrem Datenschutzbeauftragten.
• Nach dem Klick: Läuft der Chat über die WhatsApp Business App auf einem Diensthandy, kann die App auf das Adressbuch zugreifen, wenn Sie ihr die Berechtigung erteilen, und damit auch auf Nummern von Kontakten, die nie zugestimmt haben. Über die WhatsApp Business Platform und einen Anbieter mit Auftragsverarbeitungsvertrag (AVV) bleibt das Adressbuch außen vor, und Ihr Team arbeitet in einer Oberfläche mit Rollen und Rechten.

Dieser Abschnitt ersetzt keine Rechtsberatung. Die Einzelheiten zu Einwilligung, Speicherfristen und Anbieterwahl finden Sie im Leitfaden zu WhatsApp Business und DSGVO.

Wie messe ich Klicks auf den WhatsApp-Button?

Klicks auf den Button messen Sie in Google Analytics 4 am einfachsten über den Google Tag Manager: Ein Trigger reagiert auf Links, deren Adresse wa.me enthält, und sendet ein eigenes Ereignis. In Deutschland setzt diese Messung in der Regel eine Einwilligung im Cookie-Banner voraus, das Tag feuert deshalb erst nach Zustimmung.

1. Aktivieren Sie im Tag Manager die integrierten Klick-Variablen, darunter Click URL.
2. Legen Sie einen Trigger vom Typ „Klick – Nur Links“ an, der auslöst, wenn Click URL wa.me enthält.
3. Verbinden Sie ihn mit einem GA4-Ereignis-Tag, etwa mit dem Namen whatsapp_click, und übergeben Sie die Seite als Parameter.
4. Binden Sie das Tag an die Einwilligung aus Ihrem Cookie-Banner, damit es ohne Zustimmung nicht feuert.

In Wix binden Sie den Tag Manager über die Marketing-Integrationen ein, nicht über benutzerdefinierten Code. Was danach im Chat passiert, sieht Google Analytics nicht. WhatsApp übergibt weder UTM-Parameter noch die Herkunftsseite. Ein einfacher Trick schafft Klarheit: Geben Sie jedem Button eine eigene vorausgefüllte Nachricht, etwa „Ich habe eine Frage zu den Preisen“ auf der Preisseite. Dann sehen Sie im Chat, woher die Anfrage kommt. Im SendSeven-Widget zeigt die Widget-Statistik zusätzlich die Klicks je Kanal, also wie oft Besucher etwa WhatsApp gewählt haben, dazu Aufrufe und Interaktionen. Wie Sie WhatsApp-Gespräche bis zum Umsatz verfolgen, wenn Anzeigen ins Spiel kommen, zeigt der Leitfaden zu Click-to-WhatsApp Ads und wa.me.

Was passiert nach dem Klick in Ihrem Unternehmen?

Nach dem Klick landet die Nachricht bei der Nummer hinter dem Button. Mit der WhatsApp Business App ist das ein Smartphone. Sobald mehrere Kollegen antworten oder viele Chats kommen, lohnt sich ein Team-Posteingang, in dem Ihr Team gemeinsam arbeitet. Hier entscheidet sich, ob der Button Kunden bringt oder nur Nachrichten, die niemand rechtzeitig liest.

Ein Posteingang für Ihr Team

Im Team-Posteingang von SendSeven landen WhatsApp-Chats neben E-Mail, SMS, Instagram, Messenger, Live-Chat und Telegram. Ihr Team weist Chats zu, sieht, wer gerade antwortet, und schreibt interne Notizen, die der Kunde nicht sieht. Wie das im Alltag aussieht, beschreibt unser Beitrag zu WhatsApp Business mit mehreren Nutzern.

Antworten am Abend und am Wochenende

Ein Teil der Anfragen über den Button kommt nach Feierabend. Ein KI-Agent beantwortet wiederkehrende Fragen zu Öffnungszeiten, Lieferung oder Preisen sofort aus Ihrer Wissensdatenbank und übergibt alles andere an Ihr Team. Am nächsten Morgen liegt die Übergabe mit dem ganzen Verlauf im Posteingang.

Ein Widget für WhatsApp und weitere Kanäle

Nicht jeder Besucher möchte WhatsApp nutzen. Im SendSeven-Widget legen Sie fest, welche Kanäle erscheinen: nur WhatsApp oder WhatsApp neben Live-Chat, E-Mail, Telegram und weiteren Kanälen. Schalten Sie den Live-Chat ab, zeigt ein neues Widget die Kanäle als Liste mit Logos. Mit der Schnellwahl, die es für Bubble-Widgets gibt, fächert die runde Bubble die Kanäle beim Klick auf. WhatsApp ist dann zwei Klicks entfernt. Für die Bubble stehen 15 Icons zur Wahl, darunter das WhatsApp-Logo.

Brauchen Sie nur einzelne Buttons, etwa für einen Blogbeitrag, eine Landingpage oder die E-Mail-Signatur, finden Sie im Bereich Widgets unter „Promotion“ fertige Links und QR-Codes als PNG oder SVG sowie HTML-Snippets für Kanal-Buttons, Badges und E-Mail-Signaturen. Die vorausgefüllte Nachricht legen Sie dort selbst fest. So bauen Sie einen WhatsApp-Button per Snippet, ohne den Link selbst zu kodieren. Mehr zum Kanal finden Sie auf unserer Seite zu WhatsApp für Unternehmen.

Was kostet ein WhatsApp-Button?

Der Button selbst kostet nichts: Ein wa.me-Link ist kostenlos, egal ob Sie die WhatsApp Business App oder die API nutzen. Kosten entstehen erst durch Antworten über die WhatsApp Business Platform und durch die Software, mit der Ihr Team arbeitet.

• Eingehende Nachrichten sind immer kostenlos.
• Schreibt der Kunde zuerst, öffnet sich ein 24-Stunden-Fenster für Ihre Antworten.
• Seit dem 1. Oktober 2026 berechnet Meta auch Service-Nachrichten, also Ihre Antworten im 24-Stunden-Fenster. Die ersten 1.000 pro Telefonnummer und Monat bleiben kostenlos, ab der 1.001. gilt der Utility-Tarif, in Deutschland 4,56 Cent je zugestellter Nachricht. Die Einzelheiten stehen in unserem Überblick zu den WhatsApp-Preisen 2026 und in der Preisübersicht von Meta.
• Mit der WhatsApp Business App fallen keine Nachrichtenkosten an. Dafür antwortet nur, wer das Smartphone und die damit verknüpften Geräte bedient.

Bei SendSeven sind Website-Widgets ab dem Basic-Paket für 49 € im Monat enthalten, KI-Agenten und der Flow Builder ab dem Professional-Paket für 79 € im Monat. Die KI-Nutzung wird über KI-Credits abgerechnet. Alle Preise verstehen sich netto zuzüglich Mehrwertsteuer, die Übersicht steht auf der Preisseite. Sie können SendSeven 14 Tage kostenlos testen, mit 100 Testnachrichten und ohne Kreditkarte.

Sie haben noch eine Frage zu Ihrem Button? Nutzen Sie die Live-Demo oben, dann landet sie direkt bei unserem Support.

Häufig gestellte Fragen