Ein WhatsApp-Button auf deiner Website nimmt den langsamsten Schritt zwischen einem Besucher und einem Gespräch heraus: deine Nummer finden, speichern und eine erste Nachricht tippen. Ein Tipp, und WhatsApp öffnet sich mit fertigem Chat. Die gute Nachricht: Du brauchst dafür kein Plugin, kein Abo und kein JavaScript, ein WhatsApp-Button ist nur ein normaler Link, hübsch gemacht mit ein bisschen Styling. Dieser Leitfaden zeigt zuerst die schlichte HTML-Variante, dann den schnellsten Weg auf WordPress, Shopify und den großen Website-Baukästen.
Schritt 1: deinen Click-to-Chat-Link holen
Jeder WhatsApp-Button, auf jeder Plattform, zeigt auf dasselbe: einen wa.me-Click-to-Chat-Link. Er enthält deine Telefonnummer und, optional, eine vorgefüllte Nachricht. Das Format sieht so aus:
https://wa.me/15551234567?text=Hi%21%20I%20have%20a%20question%20about%20your%20services
Die Nummer muss im vollen internationalen Format stehen, nur Ziffern, Ländervorwahl zuerst, kein Pluszeichen, keine Leerzeichen oder Bindestriche, und die Nachricht muss URL-kodiert sein. Am einfachsten bekommst du beides mit dem kostenlosen WhatsApp-Link-Generator richtig: Tippe deine Nachricht, sieh der Live-Vorschau zu und kopiere den fertigen Link. Die vollständige Syntax steht in unserem kompletten wa.me-Leitfaden.
Schlichtes HTML: ein Button zum Einfügen in jede Seite
Im einfachsten Fall ist der Button ein Anchor-Tag mit deinem Link. Das funktioniert in jeder HTML-Seite, jedem statischen Seitengenerator oder jedem „Custom HTML"-Feld in einem Website-Baukasten:
<a href="https://wa.me/15551234567?text=Hi%21" target="_blank" rel="noopener">Chatte mit uns auf WhatsApp</a>
Damit es wie ein richtiger WhatsApp-Button aussieht und nicht wie ein Textlink, füge Inline-Styles hinzu, WhatsApp-Grün (#25D366), weißer Text, abgerundete Ecken und etwas Abstand:
<a href="https://wa.me/15551234567?text=Hi%21" target="_blank" rel="noopener" style="display:inline-block;background:#25D366;color:#fff;padding:12px 24px;border-radius:50px;font-weight:600;text-decoration:none;">💬 Auf WhatsApp chatten</a>
Für die beliebte schwebende „Blase" in der unteren Ecke pack denselben Link in einen Stil mit fester Position: position:fixed, Abstände von unten und rechts von rund 20px und ein runder Hintergrund um das WhatsApp-Symbol. Es bleibt nur ein Link, kein Skript, nichts, was die Seite verlangsamt.
WordPress: kein Plugin nötig
- Füge im Block-Editor einen Custom-HTML-Block (oder einen Buttons-Block) dort ein, wo du den Button haben willst.
- Füge das gestylte Anchor-Tag von oben ein, mit deinem eigenen wa.me-Link.
- Für einen seitenweiten Button füge dasselbe HTML in einen Widget-Bereich (Design → Widgets) oder in die Footer-Vorlage deines Themes ein.
Plugins wie „Click to Chat" bringen schwebende Buttons, Regeln für Geschäftszeiten und Agenten-Auswahl. Sie sind in Ordnung, wenn du diese Extras willst, aber wenn du nur den Button brauchst, macht der HTML-Block dieselbe Arbeit mit null zusätzlichen Skripten und nichts Neuem zum Aktuellhalten.
Shopify
- Geh zu Onlineshop → Themes → Anpassen.
- Füge einen Abschnitt Custom Liquid oder Custom HTML hinzu (die meisten modernen Themes haben einen) und füge den Button-Code ein.
- Um ihn auf jeder Seite zu zeigen, bearbeite den Footer-Abschnitt des Themes oder füge das Snippet in theme.liquid direkt vor dem schließenden Body-Tag ein.
Wix, Squarespace und andere Baukästen
Jeder große Baukasten hat ein „HTML einbetten"- oder „Code"-Element, füge dort dasselbe Anchor-Tag ein. Viele haben auch einen nativen WhatsApp-Button in ihren Social- oder Kontakt-Elementen; die fragen nur nach der Telefonnummer, wenn du also eine vorgefüllte Nachricht willst, nimm stattdessen die HTML-Einbettung mit deinem erzeugten Link.
Sollen Besucher deine Seite teilen, statt dir zu schreiben?
Ein Chat-Button startet ein Gespräch mit dir. Wenn du eigentlich willst, dass Besucher deine Seite an ihre Kontakte schicken (eine Petition, ein Produkt, ein Artikel), nimm stattdessen das kostenlose WhatsApp-Share-Widget. Es holt Titel, Beschreibung und Vorschaubild deiner Seite und erzeugt eine einbettungsfertige Share-Karte mit einem „Auf WhatsApp teilen"-Button, in einer Version für Websites und einer anderen, die Gmail und Outlook übersteht, für E-Mail-Kampagnen. Kommt die Karte im Chat mit falschem Titel oder ohne Bild an, lies, warum die WhatsApp-Linkvorschau nicht erscheint.
Die Klicks messen
Ein WhatsApp-Klick verlässt deine Seite, deine Analyse sieht das Gespräch also nicht, aber die Klicks kannst du zählen. Häng ein UTM-Tag an die Seiten-URL, die du in der Nachricht nennst, oder erfasse den Button-Klick als Ereignis in Google Analytics / Tag Manager (ein einfacher Klick-Trigger auf Links, die wa.me enthalten). Wenn der Button an mehreren Stellen auftaucht, gib jedem eine andere vorgefüllte Nachricht, damit du an der ersten Zeile eines Chats ablesen kannst, woher er kam.
Häufige Fragen
Brauche ich WhatsApp Business für einen Website-Button?
Nein. Ein wa.me-Link funktioniert sowohl mit dem persönlichen WhatsApp als auch mit WhatsApp Business. Ein kostenloses WhatsApp-Business-Konto bringt hinter demselben Button nützliche Extras dazu, ein Unternehmensprofil, Abwesenheitsnachrichten und Schnellantworten.
Funktioniert der Button am Desktop?
Ja. Auf dem Handy öffnet der Link die WhatsApp-App; am Computer öffnet er WhatsApp Web oder die Desktop-App, wenn der Besucher angemeldet ist. Derselbe Link bedient beides.
Darf ich das offizielle WhatsApp-Logo auf dem Button nutzen?
Meta veröffentlicht Markenrichtlinien mit freigegebenen Logo-Dateien für genau diesen Zweck. Halte dich an das offizielle Glyph, verzerre oder verfärbe es nicht und erweck nicht den Eindruck, WhatsApp unterstütze dein Unternehmen.