So fügen Sie einen WhatsApp-Chat-Button zu WordPress hinzu (3 kostenlose Möglichkeiten, 2026)

Ihre WordPress-Website ist live und es kommen Besucher — und dann? Die meisten Besucher landen, lesen und gehen wieder, ohne eine einfache Möglichkeit zu haben, eine Frage zu stellen. Ein WhatsApp-Chat-Button löst dieses Problem an einem Nachmittag: Ein Tippen öffnet einen Chat mit Ihrer Nummer in der App, die Ihre Kunden bereits nutzen. Dieser Beitrag zeigt drei kostenlose Möglichkeiten, einen solchen Button im Jahr 2026 hinzuzufügen — einen einfachen wa.me-Link (mit einem optionalen schwebenden Snippet), ein Chat-Widget-Plugin oder Ihren Page Builder — und wo jede dieser Optionen endet, sodass Sie wissen, wann Sie stattdessen zur WhatsApp Business API wechseln sollten. The Tech Pad ist eine WhatsApp Business-Plattform auf der offiziellen Meta-Cloud-API mit 26 kostenlosen WordPress-Konnektoren und einem gemeinsamen Team-Posteingang, und sie übernimmt genau dort, wo Chat-Buttons aufhören. Ihr erster Monat ist kostenlos, wenn Sie starten, und jedes Unternehmen, das Sie vermitteln, sich anmelden und eine WhatsApp-Nummer verbinden, schenkt Ihnen einen weiteren kostenlosen Monat — bis zu 5 weitere kostenlose Monate — insgesamt bis zu 6 Monate kostenlos.

Was eine WhatsApp-Chat-Schaltfläche tatsächlich macht

Eine Chat-Schaltfläche ist ein Link. Hinter der grünen Blase befindet sich eine URL in einer von zwei Formen: https://wa.me/<countrycode><number> oder https://api.whatsapp.com/send?phone=<number>. Wenn ein Besucher darauf tippt, öffnet sein Gerät WhatsApp — die App auf dem Handy oder web.whatsapp.com in einem Desktop-Browser ohne die App — mit einer bereits gestarteten Unterhaltung zu Ihrer Nummer.

Das ist der ganze Trick, und es ist wichtig, weil ein Button etwas bewirkt verkaufen tun: Es sendet nichts von Ihrer Website. Der Besucher gibt die erste Nachricht ein, daher ist sie immer eingehend, immer freiwillig und kostenlos. Das Gespräch findet in der eigenen WhatsApp-App des Kunden statt, nicht auf Ihrem Server. Keine API, keine Genehmigung, keine Gebühr pro Nachricht.

Drei Möglichkeiten, eine Schaltfläche hinzuzufügen: verglichen

Alle drei Methoden unten sind kostenlos zum Start. Die Unterschiede liegen darin, wie viel Kontrolle Sie über Platzierung, Zielgruppenansprache und Tracking haben möchten.

Methode 1: ein wa.me-Link ohne ein Plugin

Das Format ist wa.me/<countrycode><number>?text=<urlencoded-message>. Für eine indische Nummer sieht das so aus:

https://wa.me/919876543210?text=Hi%2C%20I%20have%20a%20question

Verwenden Sie die Ländervorwahl ohne + oder Leerzeichen — 91 für Indien, 1 für die USA. Der text Parameter füllt die erste Nachricht des Besuchers voraus; Leerzeichen müssen URL-kodiert sein (%20) und auch Satzzeichen (%2C für ein Komma). Wenn Sie den Link in JavaScript erstellen, encodeURIComponent() kümmert sich darum für Sie.

Sie können diesen Link überall einfügen, wo WordPress einen Link akzeptiert:

• Button-Block im Gutenberg-Editor, verlinkt mit der wa.me-URL.
• Navigationselement — füge es als benutzerdefinierten Link hinzu.
• Footer- oder Sidebar-Widget — ein Text- oder benutzerdefiniertes HTML-Widget.
• Sticky Floating Button — füge den untenstehenden Code-Schnipsel in Customizer → Zusätzliches CSS ein sowie ein benutzerdefiniertes HTML-Widget in deinem Footer. Es heftet einen Button an die untere rechte Ecke mit einem sicheren z-Index und einem 48px Tap-Ziel, der minimalen komfortablen Größe für mobile Daumen.

<a class="wa-float" href="https://wa.me/919876543210?text=Hi%2C%20I%20have%20a%20question" target="_blank" rel="noopener">Chat on WhatsApp</a>

<style>
.wa-float {
  position: fixed; bottom: 20px; right: 20px; z-index: 9999;
  background: #25D366; color: #ffffff; padding: 12px 20px;
  border-radius: 40px; min-height: 48px; display: inline-flex;
  align-items: center; text-decoration: none; font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.wa-float:hover { background: #1fb457; }
</style>

Teste den fertigen Link auf einem echten Telefon, bevor du ihn veröffentlichst, und auch auf einem Desktop — ohne installierte WhatsApp-App greift wa.me auf web.whatsapp.com zurück, was funktioniert, solange der vorab ausgefüllte Text erhalten bleibt. Halte vorab ausgefüllte Nachrichten auf einer Zeile; sehr langer Text wird auf einigen Geräten abgeschnitten.

Methode 2: ein Chat-Widget-Plugin

Wenn Sie eine schwebende Schaltfläche mit Gerätezielung, Zeitplanung oder mehreren Agenten möchten, ohne CSS schreiben zu müssen, ist ein Plugin die ehrliche Abkürzung. Alle diese haben kostenlose Versionen:

• Joinchat (Creame) — leichtgewichtig und konzentriert sich nur auf WhatsApp; eine solide Standardwahl.
• Click to Chat (HoliThemes) — kostenlos und einfach; Nummer, Position und ein paar Stile.
• Chaty (Premio) — unterstützt viele Kanäle, nicht nur WhatsApp; kostenfreie Stufe plus kostenpflichtige Pläne.
• WP Chat App (NinjaTeam) — schwebende Schaltfläche plus Multi-Agent und vorausgefüllte Nachrichten; kostenlos und kostenpflichtig.
• Buttonizer — ein allgemeiner Button-Launcher, der deinen WhatsApp-Button zusammen mit anderen beherbergen kann.
• Elementor schwebende Schaltflächen — natives Widget in Elementor Pro, falls du bereits damit baust.

Installiere, gib deine Nummer im internationalen Format ein, wähle Position und Farbe, und du bist fertig. Bezahlte Stufen fügen Targeting nach Gerät und Seite, Chat-Planung und Klick-Analysen hinzu. Keines dieser Plugins kann Nachrichten von deiner Website senden — dafür sind sie nicht gedacht, und das ist kein Fehler; es ist die Grenze zwischen Widgets und der API.

Methode 3: Elementor oder ein Gutenberg-Block

Wenn Sie Elementor Pro verwenden, platziert das Floating Buttons-Widget einen WhatsApp-Button nativ, kein zusätzliches Plugin. Im reinen Gutenberg erledigt der Button-Block mit einem wa.me-Link dieselbe Aufgabe — kombinieren Sie ihn mit dem schwebenden CSS aus Methode 1, wenn Sie ihn fixiert haben möchten. Ein Shortcode oder Block-Pattern in Ihrem Theme functions.php ist derselbe Link darunter; die einzige Frage ist, wo Sie ihn pflegen möchten.

Wo Chat-Buttons aufhören zu funktionieren

Eine Chat-Schaltfläche ist nur für eingehende Nachrichten. Sie kann keine Bestellbestätigung senden, wenn ein Kunde den Kauf abschließt, keine Erinnerung vor einem gebuchten Termin oder eine Benachrichtigung zur Warenkorb-Wiederherstellung zwei Stunden nach dem Abbruch — weil von Ihrer Website nie etwas gesendet wird. Es gibt keine Handhabung des 24-Stunden-Servicefensters von Meta, keine Vorlagenfreigabe und keinen gemeinsamen Posteingang: Jede Anfrage landet auf dem einen Telefon, dessen Nummer im Link steht, sodass eine zweite Agentenantwort eine zweite Nummer bedeutet.

Das ist die Aufgabe der WhatsApp Business API. Von Unternehmen initiierte Nachrichten außerhalb des 24-Stunden-Fensters müssen Meta-zugelassene Vorlagen verwenden (Kategorien Marketing, Dienstprogramm oder Authentifizierung), und die API sendet sie von einer Plattform wie The Tech Pad, deren kostenlose WordPress-Connectoren Formulareinträge, Buchungen und Bestellungen automatisch in WhatsApp übertragen, während Ihr Team von einem gemeinsamen Posteingang unter [/features/inbox/](/features/inbox/) antwortet. Es gibt keine monatliche SaaS-Gebühr für der Connectors; Sie zahlen Metas Konversationsgebühren pro Nachricht — ungefähr ₹0,10–0,30 für Nutzungsnachrichten in Indien, wobei Marketingnachrichten etwa 2–3× so viel kosten — überprüfen Sie also Metas aktuellen Preisplan. Wenn Sie zwischen einem Button und der API entscheiden, zeigt [dieser Vergleich](/blog/whatsapp-business-app-vs-api-2026/) die Grenzen auf.

Schritt für Schritt: Fügen Sie Ihren Button hinzu, gestalten Sie ihn und testen Sie ihn

1. Schreiben Sie Ihre Nummer im internationalen Format ohne + oder Leerzeichen — z. B. 919876543210 für Indien.
2. Bauen und testen Sie zuerst den Rohlink auf Ihrem Handy: https://wa.me/919876543210?text=Hi%2C%20I%20have%20a%20question. Er sollte WhatsApp mit der vorausgefüllten Nachricht öffnen.
3. Fügen Sie die Schaltfläche dort hinzu, wo Ihre Besucher hinschauen: ein Button-Block in der Nähe Ihrer Überschrift, ein Menüpunkt in der Navigation und/oder das Footer-Widget.
4. Für eine feste Version fügen Sie das schwebende HTML in ein benutzerdefiniertes HTML-Widget und das CSS in zusätzliches CSS ein, und überprüfen Sie es dann in einer mobilen Ansicht.
5. Wenn Sie stattdessen ein Plugin wählen, installieren Sie es, geben Sie dieselbe Nummer ein, wählen Sie Position und Farben und speichern Sie.
6. Klicken in GA4 verfolgen: geben Sie dem Link eine ID (z. B. id="wa-float") und fügen Sie einen kleinen Event-Listener hinzu oder verwenden Sie die integrierte Analyse Ihres Plugins.

document.getElementById('wa-float').addEventListener('click', function () {
  gtag('event', 'whatsapp_click');
});

1. Testen Sie die veröffentlichte Seite auf einem echten Handy und auf dem Desktop und bestätigen Sie, dass der vorausgefüllte Text sauber ankommt — keine %20 sichtbar im Chat-Fenster.

Vorausgefüllte Nachrichten zum Senden nach dem Klick

Das wa.me text Parameter füllt die erste Nachricht des Besuchers automatisch aus. Die später von Ihnen gesendeten Folge-Nachrichten – Bestätigungen, Angebotsnachverfolgungen – werden als Vorlagen über die API ausgeführt, wobei {{1}}, {{2}} Stilvariablen verwendet werden, sodass eine genehmigte Vorlage für jeden Kunden passt.

"Hi {{1}}, danke, dass Sie sich über WhatsApp gemeldet haben. Ihre Anfrage zu {{2}} wird von unserem Team bearbeitet — Sie können innerhalb einer Arbeitsstunde eine Antwort erwarten."

"Hi {{1}}, hier ist das Angebot, das wir für {{2}} besprochen haben. Würde ein kurzes Telefonat diese Woche Ihnen bei der Entscheidung helfen?"

FAQ

Brauche ich ein Plugin, um einen WhatsApp-Button zu WordPress hinzuzufügen? Nein. Ein einfacher wa.me-Link funktioniert überall dort, wo WordPress einen Link akzeptiert — ein Button-Block, ein Menüpunkt, ein Widget oder eine Theme-Vorlage. Ein Plugin ist nur dann hilfreich, wenn Sie einen schwebenden Button mit Geräteziel, Zeitplanung oder mehreren Agenten möchten, ohne den Code zu berühren.

Ist ein WhatsApp-Chat-Button kostenlos? Ja. Click-to-Chat-Links sind kostenlos und unbegrenzt, weil das Gespräch in der eigenen WhatsApp-App des Kunden stattfindet, und kostenlose Plugin-Versionen decken die Grundlagen ab. Sie zahlen nur die von Meta pro Nachricht anfallenden Gebühren, wenn Sie beginnen, geschäftlich initiierte Nachrichten über die WhatsApp Business API zu senden.

Wird eine Click-to-Chat-Schaltfläche meine Nummer sperren? Nein — der Kunde startet den Chat, was genau das Verhalten ist, das Meta wünscht. Sperren entstehen durch unerbetene ausgehende Nachrichten, die normalerweise über inoffizielle Tools gesendet werden. Ein Button, der Personen einlädt, Ihnen zu schreiben, ist eine der sichersten Methoden, um ein zugestimmtes Publikum aufzubauen.

Was ist der Unterschied zwischen einem Chat-Button und der WhatsApp Business-API? Eine Chat-Schaltfläche öffnet ein Gespräch; sie kann von sich aus nichts senden. Die API sendet automatische Nachrichten — Auftragsbestätigungen, Buchungserinnerungen, Warenkorbwiederherstellung — an viele Kunden gleichzeitig unter Verwendung genehmigter Vorlagen, und sie bietet Ihrem gesamten Team einen gemeinsamen Posteingang für die Antworten.

Abschließender CTA

Ein Chat-Button bringt Besucher ins Gespräch; die API sorgt dafür, dass das Gespräch ohne Copy & Paste weiterläuft. Das The Tech Pad läuft auf der offiziellen WhatsApp Cloud API und bietet Ihnen einen gemeinsamen Team-Posteingang, AI Copilot, ein Template-Center, Kampagnen und Analysen — plus 26 kostenlose WordPress-Connectoren (vollständige Liste unter [/plugins/](/plugins/), Preise unter [/pricing](/pricing)). Ihr erster Monat ist kostenlos, wenn Sie starten, und jedes Unternehmen, das Sie empfehlen, sich anmelden und eine WhatsApp-Nummer verbinden, gibt Ihnen einen zusätzlichen kostenlosen Monat — bis zu 5 weitere kostenlose Monate — bis zu 6 Monate insgesamt kostenlos. Richten Sie noch heute Ihren Button ein, und fügen Sie die API-Ebene hinzu, sobald die erste Bestellbenachrichtigung zu einer manuellen Aufgabe wird — starten Sie unter [/wa/](/wa/).