Web Sitesine WhatsApp
Butonu Ekleme Rehberi.

Ziyaretçilerinize anında ulaşmak istiyorsanız, WhatsApp iletişim butonu pratik bir çözümdür. Bu rehberde HTML tabanlı sitelerden WordPress’e kadar farklı altyapılar için WhatsApp butonunu nasıl ekleyeceğinizi kod örnekleriyle anlatıyoruz.

HTML veya PHP Sitesine WhatsApp Butonu Ekleme

Siteniz doğrudan HTML veya PHP tabanlıysa aşağıdaki adımları izleyebilirsiniz.

Temel WhatsApp bağlantısı oluşturun

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

Not: 905xxxxxxxxx kısmına kendi telefon numaranızı ülke koduyla yazın. Türkiye için “90” ön ekini kullanın; numaraya artı işareti, boşluk veya parantez eklemeyin.

İkonlu ve sabit WhatsApp butonu ekleyin

<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>

Bu örnek, butonu ekranın sağ alt köşesinde sabitler. Renk, boşluk, gölge ve konum değerlerini sitenizin tasarımına göre değiştirebilirsiniz.

Kodu sayfanın altına yerleştirin

Kodu footer.php dosyasına veya kapanış </body> etiketinden hemen önce ekleyebilirsiniz. Ortak footer dosyasına eklenirse buton tüm sayfalarda görünür.

WEB SİTESİ ALTYAPISI

İndirimli Hosting

%70’e varan indirimle hosting sahibi olun.

İndirimi incele ↗

WordPress Sitesine WhatsApp Butonu Ekleme

WordPress kullanıcıları eklentiyle veya manuel kod ekleyerek WhatsApp iletişimini siteye entegre edebilir.

Eklenti ile ekleme

Click to Chat

• WordPress paneline girin.
• Eklentiler → Yeni Ekle bölümünü açın.
• “Click to Chat” eklentisini aratın ve yükleyin.
• Eklentiyi etkinleştirin.
• Ayarlar bölümünde telefon numaranızı ve buton tasarımını yapılandırın.

Alternatif eklentiler

• WP Social Chat — eski adıyla WhatsApp Chat
• Join.chat

WordPress’e manuel kod ekleme

<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>

Kodu temanızın footer.php dosyasına ekleyebilir veya Elementor ya da Gutenberg kullanıyorsanız bir özel HTML bloğuna yapıştırabilirsiniz.

Tema dosyasını doğrudan düzenlemek, tema güncellendiğinde kodun kaybolmasına neden olabilir. Kalıcı kullanım için child theme, kod ekleme aracı veya uygun bir eklenti tercih edin.

Shopify Sitesine WhatsApp Butonu Ekleme

• Shopify panelinden Online Store → Themes → Customize bölümüne girin.
• Tema seçeneklerindeki özel kod veya Custom Liquid alanını açın.
• WhatsApp buton kodunu ekleyip kaydedin.

Wix Sitesine WhatsApp Butonu Ekleme

• Wix Editor’da Add → Button seçeneğini kullanın.
• Buton bağlantısına https://wa.me/905xxxxxxxxx adresini ekleyin.
• Bağlantının yeni sekmede açılmasını seçin ve mobil görünümü kontrol edin.

Squarespace Sitesine WhatsApp Butonu Ekleme

Settings → Advanced → Code Injection bölümünden footer alanına HTML kodunu ekleyebilirsiniz. Kullandığınız Squarespace planında kod ekleme özelliğinin açık olması gerekebilir.

WhatsApp Mesajını Önceden Tanımlama

Ziyaretçi bağlantıya tıkladığında mesaj kutusunda hazır bir metin görünmesini istiyorsanız ?text= parametresini kullanın. Boşluklar ve Türkçe karakterler URL biçimine uygun kodlanmalıdır.

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

Butonu Ekledikten Sonra Kontrol Edin

• Telefon numarasının ülke koduyla doğru yazıldığını doğrulayın.
• Masaüstünde WhatsApp Web, mobilde WhatsApp uygulamasının açıldığını test edin.
• Butonun menü, çerez bildirimi veya başka sabit öğeleri kapatmadığından emin olun.
• Renk kontrastını ve erişilebilir bağlantı metnini kontrol edin.
• Google Analytics veya etiket yöneticisiyle tıklamaları ölçün.

Sonuç

WhatsApp butonu sayesinde ziyaretçilerinizle hızlı iletişim kurabilir ve iletişim akışını kolaylaştırabilirsiniz. Yukarıdaki yöntemlerden sitenizin altyapısına uygun olanı kullanarak bu özelliği birkaç dakika içinde ekleyebilirsiniz.