WhatsApp-Button zur Website hinzufügen (HTML, PHP, WordPress)

Ein WhatsApp-Kontaktbutton ist eine praktische Möglichkeit, Besuchern die sofortige Kontaktaufnahme zu ermöglichen. Dieser Leitfaden erklärt die Einbindung auf verschiedenen Systemen von HTML bis WordPress anhand von Codebeispielen.

WhatsApp-Button auf einer HTML- oder PHP-Website

Bei einer direkt auf HTML oder PHP basierenden Website können Sie diese Schritte befolgen.

Einen einfachen WhatsApp-Link erstellen

<a href="https://wa.me/905xxxxxxxxx" target="_blank">
  WhatsApp ile Bize Ulaşın
</a>

Hinweis:905xxxxxxxxx ersetzen Sie durch Ihre Telefonnummer einschließlich Landesvorwahl. Für Türkiye verwenden Sie „90“, ohne Pluszeichen, Leerzeichen oder Klammern.

Einen festen WhatsApp-Button mit Symbol hinzufügen

<a href="https://wa.me/905xxxxxxxxx" target="_blank"
  style="position: fixed; bottom: 20px; right: 20px;
  background-color: #25D366; color: white; border-radius: 50px;
  padding: 12px 20px; text-decoration: none; font-weight: bold;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
  📱 WhatsApp
</a>

Dieses Beispiel fixiert den Button unten rechts. Farben, Abstände, Schatten und Position können an Ihr Webdesign angepasst werden.

Den Code am Seitenende einfügen

Fügen Sie den Code in die Datei footer.php oder unmittelbar vor das schließende </body> -Tag ein. In einer gemeinsamen Footer-Datei erscheint der Button auf allen Seiten.

WhatsApp-Button in WordPress hinzufügen

WordPress-Nutzer können WhatsApp per Plugin oder manuell eingefügtem Code integrieren.

Einbindung mit Plugin

Click to Chat

• Öffnen Sie Ihr WordPress-Dashboard.
• Plugins → Installieren ist der entsprechende Bereich.
• Suchen und installieren Sie „Click to Chat“.
• Aktivieren Sie das Plugin.
• Konfigurieren Sie Telefonnummer und Buttondesign in den Einstellungen.

Alternative Plugins

• WP Social Chat — früher WhatsApp Chat
• Join.chat

Code manuell in WordPress einfügen

<a href="https://wa.me/905xxxxxxxxx" target="_blank"
  style="position: fixed; bottom: 20px; right: 20px;
  background-color: #25D366; color: white; border-radius: 50px;
  padding: 12px 20px; text-decoration: none; font-weight: bold;">
  📞 Bize WhatsApp'tan Yazın
</a>

Fügen Sie den Code in die footer.php -Datei Ihres Themes ein oder in einen individuellen HTML-Block in Elementor oder Gutenberg.

Bei direkter Bearbeitung einer Theme-Datei kann der Code durch ein Update verloren gehen. Verwenden Sie dauerhaft ein Child-Theme, ein Code-Werkzeug oder ein geeignetes Plugin.

WhatsApp-Button in Shopify hinzufügen

• Öffnen Sie im Shopify-Dashboard Online Store → Themes → Customize .
• Öffnen Sie den Bereich für benutzerdefinierten Code oder Custom Liquid in den Themeoptionen.
• Fügen Sie den WhatsApp-Buttoncode ein und speichern Sie.

WhatsApp-Button in Wix hinzufügen

• Wählen Sie im Wix Editor Add → Button .
• Tragen Sie https://wa.me/905xxxxxxxxx als Buttonlink ein.
• Lassen Sie den Link in einem neuen Tab öffnen und prüfen Sie die mobile Ansicht.

WhatsApp-Button in Squarespace hinzufügen

Settings → Advanced → Code Injection ermöglicht das Einfügen von HTML in den Footer. Ihr Squarespace-Tarif muss die Code-Injektion gegebenenfalls unterstützen.

Eine WhatsApp-Nachricht vorgeben

Wenn beim Klick eine vorbereitete Nachricht erscheinen soll, verwenden Sie den Parameter ?text= . Leerzeichen und türkische Zeichen müssen URL-kodiert werden.

<a href="https://wa.me/905xxxxxxxxx?text=Merhaba,%20web%20sitenizden%20ulaşıyorum."
  target="_blank">
  WhatsApp ile İletişime Geç
</a>

Nach der Einbindung prüfen

• Kontrollieren Sie Telefonnummer und Landesvorwahl.
• Testen Sie WhatsApp Web am Desktop und die WhatsApp-App mobil.
• Der Button darf Menü, Cookiehinweis oder andere feste Elemente nicht überdecken.
• Prüfen Sie Farbkontrast und barrierefreien Linktext.
• Messen Sie Klicks mit Google Analytics oder einem Tag-Manager.

Nach dem Button: Kontakt- und Anfrageablauf der Website

Dass WhatsApp geöffnet wird, bedeutet nicht, dass eine Nachricht versandt wurde oder eine echte Anfrage eingegangen ist. Prüfen Sie zuerst die auslösende Leistungsseite und danach Zeitpunkt und Art der Teamantwort. Fragen Sie anfangs nur notwendige Daten ab; übertragen Sie keine personenbezogenen Angaben in Analyseereignisse oder URL-Parameter.

• Klick: WhatsApp-, Telefon- und E-Mail-Aktivierungen sind getrennte Interaktionen.
• Übermittlung: Bei Formularen muss eine erfolgreiche Übertragung durch Server oder Empfängersystem bestätigt werden.
• Echte Anfrage: Ein Gespräch, in dem das Team die Person erreicht und den Leistungsbedarf klärt, wird anhand der Geschäftsunterlagen separat bewertet.

Für die gemeinsame Gestaltung von Kontaktbutton, mobiler Seite und Anfrageschritten können Sie unsere Leistungen für Webdesign und Kontakt-Erlebnis prüfen. Die Weiterleitung von Werbebesuchern zur passenden Seite behandeln wir in unserem Leitfaden zu Google Ads und Landingpages .

Fazit

Ein WhatsApp-Button ermöglicht schnelle Kommunikation und vereinfacht den Kontaktablauf. Mit der zu Ihrem System passenden Methode lässt er sich in wenigen Minuten ergänzen.