WhatsApp-Button in WordPress einfügen: 3 Methoden

Es gibt drei Wege, einen WhatsApp-Button in WordPress einzufügen: ein Skript in den Footer kopieren, ein eigenes Plugin installieren oder einen normalen Link auf einer Seite beziehungsweise im Menü ergänzen. Dieser Guide erklärt alle Varianten, zeigt den richtigen Platz für den Code in klassischen und Block-Themes und nennt die Prüfungen, damit der Button die Seite weder ausbremst noch wichtige Inhalte verdeckt.

Zuerst brauchst du den Link, auf den der Button zeigt. Falls du noch keinen hast, kannst du in wenigen Minuten einen WhatsApp-Link erstellen.

Welche Methode passt zu dir?

Schwebender Button per Skript: erscheint auf jeder Seite, bleibt schlank und benötigt kein zusätzliches Plugin.
Eigenes Plugin: vollständige Einrichtung ohne Code im Dashboard, aber ein weiteres Plugin muss gepflegt werden.
Normaler Link oder Button: keine zusätzliche Last, erscheint jedoch nur dort, wo du ihn einfügst.

Methode 1: das WaLinks-Widget mit einer Skriptzeile

Das WaLinks-WhatsApp-Widget ist ein grüner, schwebender Button in der unteren Seitenecke. Auf dem Smartphone öffnet er den Chat in der WhatsApp-App, am Computer in WhatsApp Web. Er ist im Starter-Tarif enthalten. So richtest du ihn ein:

Erstelle in WaLinks einen Link mit deiner Nummer und optional einer vorausgefüllten Nachricht.
Öffne im Dashboard das Widget dieses Links und wähle Farbe, Seite (rechts oder links) und optional einen Begrüßungstext, der nach 3 Sekunden als Sprechblase erscheint.
Kopiere den Installationscode. Er besteht aus einer einzigen Zeile wie dieser:

<script src="https://wha.mx/w/your-business.js" data-position="left" data-greeting="Hallo! Wie können wir helfen?" async></script>

Die data--Attribute erscheinen nur, wenn du die Standarddarstellung änderst. Nummer und Nachricht liegen im Link selbst; du kannst sie im Dashboard bearbeiten, ohne WordPress anzufassen. Farbe, Seite und Begrüßung gehören dagegen zum Code. Nach einer Änderung kopierst du die Zeile erneut und ersetzt die alte.

Das Skript gehört auf jeder Seite direkt vor das schließende </body>-Tag. WordPress bietet dafür drei Stellen.

Option A: ein Block „Individuelles HTML“ im Footer

Fügst du das Skript in einem Beitrag in einen Block „Individuelles HTML“ ein, erscheint der Button nur in diesem Beitrag. Für die gesamte Website muss der Block in einen gemeinsam genutzten Bereich:

Block-Theme wie Twenty Twenty-Four oder Twenty Twenty-Five: Gehe zu Design → Editor, öffne den Template-Teil Footer, füge einen Block „Individuelles HTML“ hinzu, setze die Zeile ein und speichere.
Klassisches Theme: Gehe zu Design → Widgets, wähle einen Footer-Bereich und füge einen Block „Individuelles HTML“ hinzu. Das funktioniert nur, wenn dein Theme einen Footer-Widget-Bereich anbietet.

Wenn das Skript beim Speichern verschwindet, fehlt deinem Konto die Berechtigung unfiltered_html. Auf einer normalen Website besitzen Administratoren und Redakteure diese Berechtigung; in einem Multisite-Netzwerk nur Super-Administratoren.

Option B: functions.php und der Hook wp_footer

Wenn du dich mit Code auskennst, füge Folgendes in die functions.php eines Child-Themes ein. Im Parent-Theme würde das nächste Update die Änderung löschen:

add_action( 'wp_footer', function () {
    echo '<script src="https://wha.mx/w/your-business.js" async></script>';
} );

Der Hook wp_footer gibt den Code in klassischen und Block-Themes direkt vor dem schließenden body-Tag aus. Du kannst die Datei bei klassischen Themes unter Design → Theme-Datei-Editor und bei Block-Themes unter Werkzeuge → Theme-Datei-Editor bearbeiten. Ein einzelner Syntaxfehler kann die Website lahmlegen; halte deshalb FTP oder den Dateimanager deines Hosters bereit.

Option C: ein Plugin für Header- und Footer-Code

Das ist der einfachste Weg, wenn du keine Dateien bearbeiten möchtest. Am häufigsten wird „WPCode“ eingesetzt, ein Plugin zum Einfügen von Header- und Footer-Code, das auf mehr als 3 Millionen Websites aktiv ist. Füge die Zeile in das Footer-Feld ein und speichere. Weil die Lösung nicht vom Theme abhängt, bleibt sie auch nach einem Theme-Wechsel erhalten.

Methode 2: ein spezielles WhatsApp-Plugin

Suche unter Plugins → Installieren nach „WhatsApp“. Dort findest du Dutzende Button- und Chat-Plugins. Sie funktionieren ähnlich: installieren, Nummer im internationalen Format eingeben, Beschriftung und Position wählen – fertig. Einige unterstützen zusätzlich Geschäftszeiten oder mehrere Mitarbeiter.

Prüfe vor der Installation im Plugin-Eintrag das Datum des letzten Updates, die Kompatibilität mit deiner WordPress-Version und die Zahl aktiver Installationen. Wenn du nur einen Button brauchst, erledigt eine einzige Skriptzeile denselben Zweck mit weniger Komponenten.

Methode 3: ein einfacher Button oder Menü-Link

Nicht alles muss schweben. Manchmal genügt ein Button auf der Kontaktseite oder ein Eintrag „WhatsApp“ im Menü – mit einem wa.me– oder Kurzlink:

https://wa.me/15551234567       (USA)
https://wa.me/5215512345678     (Mexiko)
https://wha.mx/your-business    (Kurzlink)

Auf einer Seite: Füge einen Buttons-Block hinzu, schreibe „Über WhatsApp kontaktieren“, klicke auf das Link-Symbol und füge die URL ein.
Im Menü eines klassischen Themes: Design → Menüs → Individuelle Links. URL einfügen, Beschriftung ergänzen und zum Menü hinzufügen.
Im Menü eines Block-Themes: Wähle unter Design → Editor den Navigationsblock im Header und füge einen individuellen Link hinzu.

Unsicher bei der Linkart? Der Beitrag wa.me oder Kurzlink vergleicht beide. Der praktische Unterschied: Einen Kurzlink kannst du bearbeiten und messen, ohne deine Website zu ändern.

Geschwindigkeit, Barrierefreiheit und mobile Platzierung

Halte die Seite schnell

Asynchron laden: Behalte das Attribut async, damit das Skript den Seitenaufbau nie blockiert. Der Widget-Code enthält es bereits.
Nur einen Button: Verwende das Skript nicht gleichzeitig mit einem WhatsApp-Plugin. Das wären zwei Downloads für dieselbe Aufgabe und zwei Buttons, die um dieselbe Ecke konkurrieren.

Mach ihn für alle nutzbar

Ein Button, der nur aus einem Symbol besteht, braucht Text für Screenreader. Das WaLinks-Widget enthält ein aria-label. Wenn du einen eigenen Bild-Button erstellst, gib ihm einen Alternativtext wie „Über WhatsApp kontaktieren“. Achte bei einer anderen Farbe außerdem auf ausreichenden Kontrast zum Hintergrund.

Verdecke auf Mobilgeräten keine Inhalte

Auf kleinen Bildschirmen schrumpft das Widget auf 54 Pixel und sitzt 16 Pixel vom Rand entfernt. Trotzdem ist die untere Ecke oft belegt: Cookie-Banner, Nach-oben-Buttons und die in vielen WooCommerce-Themes fixierte Leiste „In den Warenkorb“. Bei Überschneidungen verschiebst du den Button mit data-position="left" nach links oder mit einer Zeile eigenem CSS nach oben (Design → Customizer → Zusätzliches CSS beziehungsweise der Stilbereich im Website-Editor):

#walinks-widget-your-business { bottom: 90px !important; }

Ersetze your-business durch den Namen deines Links und prüfe das Ergebnis auf einem echten Smartphone.

So misst du Button-Klicks

Das Widget verweist auf deinen Kurzlink, deshalb läuft jeder Klick darüber. In der WhatsApp-Link-Analyse siehst du Klicks, Geräte, Länder und Spitzenzeiten. Verwende einen Link für deine Website und getrennte Links für Instagram oder den QR-Code. So erkennst du genau, wie viele Gespräche deine Website startet.

Wenn du vor der ersten Nachricht einige Kundendaten erfassen möchtest, lies, wann ein Kontaktformular oder WhatsApp-Button sinnvoll ist.

Häufige Fehler

Der Button erscheint nach dem Einfügen nicht: Fast immer ist der Cache schuld. Leere die Caches deines Performance-Plugins, Hosters und CDN und teste anschließend in einem privaten Browserfenster.
Er erscheint erst nach einer Mausbewegung: Manche Performance-Plugins halten JavaScript bis zur ersten Interaktion zurück. Bei WP Rocket heißt die Einstellung „JavaScript-Ausführung verzögern“; füge wha.mx/w/ zu den ausgeschlossenen Dateien hinzu. Andere Optimierungs-Plugins bieten ähnliche Optionen.
Falsch formatierte Nummer: Im wa.me-Link steht die Nummer mit Ländervorwahl, ohne +, Leerzeichen, Bindestriche oder führende Null.
In einen einzelnen Beitrag eingefügt: Ein HTML-Block im Beitrag wirkt nur dort. Für die gesamte Website verwendest du den Footer, wp_footer oder ein Header-und-Footer-Plugin.

FAQ

Brauche ich ein Plugin, um WhatsApp in WordPress einzufügen? Nein. Du kannst ein Skript in den Footer kopieren, einige Zeilen in functions.php ergänzen oder einen Buttons-Block mit Link verwenden. Ein Plugin erspart dir nur den Umgang mit Code.

Funktioniert der Button mit WooCommerce? Ja. WooCommerce nutzt dasselbe Theme wie der Rest deiner Website, deshalb erscheint der Button auch im Shop.

Funktioniert das auf WordPress.com? Das Einfügen von Skripten oder Installieren von Plugins erfordert bei WordPress.com einen entsprechenden Tarif. Bei einer selbst gehosteten WordPress-Website gibt es diese Einschränkung nicht.

Kann ich die Nummer ändern, ohne die Website zu bearbeiten? Mit Widget oder Kurzlink ja: Ändere das Ziel im Dashboard, und der Button verweist bereits auf die neue Nummer. Einen von Hand geschriebenen wa.me-Link müsstest du überall aktualisieren.

Zusammenfassung

Den schwebenden Button installierst du mit einer Skriptzeile vor </body>.
Füge sie in den Footer-Template-Teil eines Block-Themes, ein Footer-Widget eines klassischen Themes, über wp_footer im Child-Theme oder per Header-und-Footer-Plugin ein.
Ein spezielles Plugin vermeidet Code, verursacht aber Pflegeaufwand. Achte auf regelmäßige Updates.
Für einen statischen Button genügt ein Buttons-Block oder individueller Menü-Link.
Lade mit async, nutze nur einen Button und prüfe mobil, dass weder Cookie-Banner noch Warenkorb verdeckt werden.
Wenn er nicht erscheint, leere den Cache und schließe das Skript von verzögertem JavaScript aus.
Gib deiner Website einen eigenen Link und miss dessen Klicks.