Ziyaretçilerinle doğrudan ve hızlı bir şekilde iletişim kurmak istiyorsan, sitene WhatsApp iletişim butonu eklemek mükemmel bir çözüm. Özellikle e-ticaret, blog veya hizmet sitelerinde ziyaretçilerin anlık sorularını cevaplamak, güven oluşturarak dönüşüm oranlarını artırabilir.
Bu yazıda, sıfırdan hiçbir eklentiye gerek duymadan kendi sitene modern, mobil uyumlu ve estetik bir WhatsApp iletişim butonu nasıl eklersin, adım adım göstereceğim.
✅ Anında iletişim: Kullanıcı form doldurmakla uğraşmaz, direkt mesaj atar.
✅ Güven oluşturur: Gerçek bir insanla iletişim kurulduğu hissini verir.
✅ Dönüşüm artışı: Özellikle ürün/hizmet satışı olan sitelerde daha fazla sipariş.
✅ Mobil uyumluluk: Ziyaretçilerin çoğu mobilde, WhatsApp zaten hep açık.
Aşağıdaki kodları sitenin <body> kısmına (mümkünse footer’a yakın) yapıştır. CSS kısmı, butonun tasarımını ve sağ alt köşeye sabitlenmesini sağlar.
<!-- WhatsApp Button -->
<a href="https://wa.me/905xxxxxxxxx" class="whatsapp-float" target="_blank" title="WhatsApp ile iletişime geç">
<img src="https://cdn-icons-png.flaticon.com/512/733/733585.png" alt="WhatsApp" />
</a>
<style>
.whatsapp-float {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999;
width: 60px;
height: 60px;
background-color: #25d366;
border-radius: 50%;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.3s;
}
.whatsapp-float:hover {
transform: scale(1.1);
}
.whatsapp-float img {
width: 30px;
height: 30px;
}
</style>
Not: 905xxxxxxxxx kısmını kendi WhatsApp numaranla değiştir. Başında + değil 90 yazılmalı ve boşluk olmamalı.
Web sitene “güven sinyali” katar, kullanıcı etkileşimini artırır.
Mobilde kullanıcı deneyimini artırdığı için Google Page Experience puanına olumlu katkı sağlar.
WhatsApp linkleri, tıklanabilir mikro dönüşüm noktaları yaratır.
Ayrıca “iletişim” sayfalarının görünürlüğünü artırır.
Son Yorumlar