WhatsApp-Button für Deine Homepage einbinden

Mit einem WhatsApp-Button auf Deiner Homepage ermöglichst Du Deinen Besuchern eine direkte, schnelle und unkomplizierte Kontaktaufnahme. Besonders auf mobilen Endgeräten steigert ein WhatsApp-Button die Conversion deutlich, da Nutzer ohne Umwege mit Dir chatten können.

Egal, ob Du Deine Webseite mit HTML, PHP oder WordPress betreibst – es gibt zahlreiche Möglichkeiten, einen WhatsApp-Button professionell einzubinden.

Nachfolgend findest Du ein vollständig fertiges, lizenzfreies HTML-Codebeispiel inklusive CSS-Styling für einen neutralen WhatsApp-Button.

Eigenschaften des Codes:

Reines HTML + CSS (kein JavaScript notwendig)
Keine WhatsApp-Grafiken, Icons oder Markenassets
Neutraler Button-Stil (Corporate- & DSGVO-freundlich)
Per Copy & Paste sofort nutzbar
Funktioniert auf HTML-Webseiten und in WordPress (HTML-Block)
Frei verwendbar, keine Lizenzpflicht

HTML & CSS: Neutraler WhatsApp-Button (Copy & Paste)

<!-- WhatsApp Button START -->
<style>
.whatsapp-button {
    display: inline-block;
    padding: 14px 22px;
    background-color: #2f855a; /* neutrales Grün */
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-button:hover {
    background-color: #276749;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.whatsapp-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(47, 133, 90, 0.4);
}
</style>

<a
    class="whatsapp-button"
    href="https://wa.me/491234567890?text=Hallo%20ich%20habe%20eine%20Frage"
    target="_blank"
    rel="noopener noreferrer"
>
    Kontakt per Messenger
</a>
<!-- WhatsApp Button END -->

So sieht der eingebundene Button aus:

Kontakt per Messenger

So passt Du den Code an

Telefonnummer ändern

Ersetze die Nummer im Link (ohne Leerzeichen oder Sonderzeichen):

https://wa.me/491234567890

Beispiel für Deutschland:
49 + Mobilnummer ohne führende Null

Starttext ändern

Der Text hinter ?text= muss URL-kodiert sein.

Beispiel:

Hallo ich habe eine Frage

URL-kodiert:

Hallo%20ich%20habe%20eine%20Frage

Button-Text ändern

Ändere einfach den sichtbaren Text:

Kontakt per Messenger

z. B.:

Jetzt Nachricht senden
Schnelle Anfrage stellen
Direkt kontaktieren

Farbe an Dein Design anpassen

Passe im CSS den Farbwert an:

background-color: #2f855a;

Beispiel:

Blau: #2563eb
Grau: #374151
Schwarz: #111827

Einbindung in WordPress

Öffne den Beitrag oder die Seite
Füge einen „Individuellen HTML“-Block hinzu
Kopiere den kompletten Code hinein
Speichern – fertig

Der Button funktioniert sofort, auch ohne Plugin.

DSGVO-Hinweis für Deine Seite (empfohlen)

Der Button stellt erst beim Klick eine Verbindung zu WhatsApp her.
Trotzdem solltest Du in Deiner Datenschutzerklärung darauf hinweisen, dass ein externer Dienst genutzt wird.

Lizenzhinweis

Dieser Code ist:

100 % lizenzfrei
frei kopierbar, veränderbar und kommerziell nutzbar
ohne Namensnennung verwendbar

Vorteile eines WhatsApp-Buttons auf Deiner Webseite

Direkte Kommunikation ohne Kontaktformular
Höhere Conversion-Rate auf mobilen Geräten
Schnelle Kundenanfragen in Echtzeit
Ideal für Service, Beratung und Support
Vertrauenssteigerung durch persönliche Ansprache

Gerade für Dienstleister, Online-Shops, lokale Unternehmen und Berater ist ein WhatsApp-Button eine sinnvolle Ergänzung.

Anbieter & Tools für WhatsApp-Buttons

Die folgenden Anbieter stellen WhatsApp-Buttons, Widgets oder Plugins bereit. Sie eignen sich für HTML-Webseiten und/oder WordPress und sind alphabetisch sortiert.

Anbieterübersicht

Link zum Anbieter	Beschreibung des Angebots
https://chaty.app/	Multichannel-Chat-Widget mit WhatsApp, Telegram und Messenger. Geeignet für WordPress und HTML-Webseiten.
https://getbutton.io/	Kostenloser WhatsApp-Button mit einfacher Einbindung per HTML-Code oder Plugin.
https://join.chat/	Speziell für WhatsApp entwickelte Lösung mit DSGVO-Optionen und WordPress-Plugin.
https://wordpress.org/plugins/click-to-chat-for-whatsapp/	Beliebtes WordPress-Plugin für WhatsApp-Buttons mit vielen Design- und Anzeigeoptionen.
https://business.whatsapp.com/	Offizielle WhatsApp-Business-Lösung für Unternehmen inklusive Click-to-Chat-Funktion.

DSGVO-Hinweis zum WhatsApp-Button

Beim Einsatz eines WhatsApp-Buttons solltest Du folgende Punkte beachten:

WhatsApp ist ein externer Dienst eines Drittanbieters
Eine Weitergabe personenbezogener Daten ist möglich
Empfehlenswert ist ein Hinweis in der Datenschutzerklärung
Optional: Einbindung erst nach Nutzer-Einwilligung (Cookie-Consent)

Für rechtssichere Webseiten empfiehlt sich eine abgestimmte Datenschutzerklärung.

SEO-Vorteile eines WhatsApp-Buttons

Auch aus SEO-Sicht kann ein WhatsApp-Button sinnvoll sein:

Verbesserte Nutzerinteraktion
Niedrigere Absprungrate
Positive Nutzersignale
Bessere mobile Nutzererfahrung

Wichtig ist, dass der Button nicht aufdringlich wirkt und sinnvoll in das Layout integriert wird.