Websitesine WhatsApp Butonu Nasıl Eklenir?

Web sitenize WhatsApp butonu eklemek, ziyaretçilerle anında iletişim kurmanın en pratik yollarından biri. Telefon numaranızı doğrudan paylaşmak yerine, tek tıkla WhatsApp sohbeti başlatan bir buton hem kullanıcı deneyimini iyileştirir hem de dönüşüm oranını artırır.

wa.me Linki Nedir?

WhatsApp, wa.me adresini resmi yönlendirme servisi olarak sunmaktadır. Formatı şu şekildedir:

https://wa.me/<telefon_numarası>

Telefon numarasını ülke kodu dahil, başında + veya 0 olmadan yazmanız gerekir. Türkiye için örnek:

https://wa.me/905551234567

Önceden mesaj metni de eklenebilir:

https://wa.me/905551234567?text=Merhaba%2C%20bilgi%20almak%20istiyorum.

---

Temel HTML Butonu

En sade haliyle bir WhatsApp butonu:

<a href="https://wa.me/905551234567" target="_blank" rel="noopener noreferrer">
  WhatsApp ile Yaz
</a>

target="_blank" ile yeni sekmede açılır, rel="noopener noreferrer" ise güvenlik için önerilir.

---

Stillendirilmiş Buton (HTML + CSS)

Markaya uygun yeşil renkli bir buton:

<a href="https://wa.me/905551234567"
   target="_blank"
   rel="noopener noreferrer"
   class="whatsapp-btn">
  <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
  </svg>
  WhatsApp ile Yaz
</a>

.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #25D366;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}

.whatsapp-btn:hover {
  background: #20BD5A;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

---

Sayfanın Köşesine Sabit Buton (Fixed)

Ziyaretçinin sayfayı kaydırırken her zaman görünür olan köşe butonu:

<a href="https://wa.me/905551234567"
   target="_blank"
   rel="noopener noreferrer"
   class="whatsapp-float"
   title="WhatsApp ile ulaşın">
  <svg width="28" height="28" fill="currentColor" viewBox="0 0 24 24">
    <!-- yukarıdaki aynı SVG path -->
  </svg>
</a>

.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45);
  z-index: 999;
  transition: transform 0.2s, box-shadow 0.2s;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.6);
}

---

Önemli Notlar

Telefon numarası formatı: wa.me linkinde numara başına +, 00 veya 0 koymayın. Ülke kodu + numara şeklinde yazın: 905551234567

Önceden mesaj: ?text= parametresinde Türkçe karakterleri URL encode etmeyi unutmayın. Boşluk için %20, virgül için %2C kullanılır. Daha güvenli yol olarak JavaScript’te encodeURIComponent() kullanabilirsiniz:

const phone = '905551234567';
const message = 'Merhaba, bilgi almak istiyorum.';
const url = `https://wa.me/${phone}?text=${encodeURIComponent(message)}`;

Mobil vs masaüstü: wa.me linki mobil cihazlarda WhatsApp uygulamasını, masaüstünde WhatsApp Web’i açar. Ek bir şey yapmanıza gerek yok.

WhatsApp Business: Kişisel WhatsApp yerine WhatsApp Business kullanıyorsanız da aynı wa.me linki çalışır. Numara değişmez.

---

Kendi Sitemde Nasıl Uyguladım?

Bu sitede hem Hero bölümündeki butonlarda hem de iletişim sayfasının alt kısmında WhatsApp butonunu kullandım. Astro.js ile statik site ürettiğim için butonlar doğrudan HTML olarak render ediliyor, herhangi bir JS kütüphanesine ihtiyaç duymadım.

Buton tasarımında btn-outline CSS sınıfına border-color ve color inline stil override ederek WhatsApp markasına özgü #25D366 yeşilini kullandım.