Web Sitesine WhatsApp İletişim Butonu Ekleme (HTML, CSS ve JavaScript Kodları)

Meta Açıklaması: Web sitesine WhatsApp butonu nasıl eklenir? HTML, CSS ve JavaScript kullanarak sağ alt köşeye sabit WhatsApp iletişim butonu ekleme yöntemlerini örnek kodlarla öğrenin.

Giriş

Günümüzde ziyaretçilerin büyük bölümü firmalarla telefon yerine WhatsApp üzerinden iletişim kurmayı tercih ediyor. Özellikle kurumsal siteler, e-ticaret projeleri, haber siteleri, emlak siteleri ve hizmet sektöründe faaliyet gösteren web siteleri için WhatsApp butonu müşteri dönüşüm oranlarını artıran önemli bir araçtır.

Bu rehberde, herhangi bir eklenti kullanmadan web sitenize sabit bir WhatsApp butonu eklemeyi öğreneceksiniz.

WhatsApp Butonu Ne İşe Yarar?

WhatsApp iletişim butonu sayesinde ziyaretçiler;

  • Tek tıklamayla mesaj gönderebilir.
  • Telefon numarasını kaydetmek zorunda kalmaz.
  • Hızlı destek alabilir.
  • Mobil cihazlardan kolayca iletişim kurabilir.

Bu yöntem özellikle;

  • Kurumsal siteler
  • Haber siteleri
  • Dernek siteleri
  • E-ticaret projeleri
  • Emlak siteleri
  • Bloglar

için oldukça kullanışlıdır.

Basit WhatsApp Linki Oluşturma

Öncelikle WhatsApp bağlantı yapısını bilmeniz gerekir.

https://wa.me/905551112233

Numaranızı başında sıfır olmadan ve ülke koduyla birlikte yazmalısınız.

Örnek:

905551112233

Hazır Mesaj Gönderme

Kullanıcıya otomatik mesaj oluşturabilirsiniz.

https://wa.me/905551112233?text=Merhaba%20bilgi%20almak%20istiyorum

HTML Kodları



    WhatsApp

Bu kod tek başına çalışır ancak görünümü oldukça basittir.

CSS ile Profesyonel Tasarım

.whatsapp-button{

position:fixed;

right:20px;

bottom:20px;

background:#25D366;

color:#fff;

padding:15px 20px;

border-radius:50px;

text-decoration:none;

font-size:16px;

font-weight:bold;

box-shadow:0 5px 20px rgba(0,0,0,0.2);

z-index:9999;

transition:0.3s;

}

.whatsapp-button:hover{

transform:scale(1.08);

}

Sonuç

Buton ekranın sağ alt köşesinde sabit şekilde görünecektir.

İkonlu WhatsApp Butonu

Daha profesyonel görünüm için ikon ekleyebilirsiniz.

Önce Font Awesome kütüphanesini ekleyin.

Ardından butonu oluşturun.





Bize Yazın

Titreşim Animasyonu Ekleme

Daha fazla dikkat çekmesi için animasyon ekleyebilirsiniz.

@keyframes pulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.1);
}

100%{
transform:scale(1);
}

}

.whatsapp-button{

animation:pulse 2s infinite;

}

Mobil Uyumlu Kullanım

Mobil cihazlarda ekranı kaplamaması için küçük bir ayar yapılabilir.

@media(max-width:768px){

.whatsapp-button{

padding:12px 16px;

font-size:14px;

right:15px;

bottom:15px;

}

}

Tam Çalışan Kod










WhatsApp Butonu













Bize Yazın

WordPress Sitesine WhatsApp Butonu Ekleme

WordPress kullanıyorsanız aşağıdaki yöntemleri uygulayabilirsiniz:

  • Footer.php dosyasına ekleyebilirsiniz.
  • HTML bileşeni kullanabilirsiniz.
  • Elementor HTML alanına ekleyebilirsiniz.
  • Özel kod eklentileri kullanabilirsiniz.

SEO Açısından WhatsApp Butonu Zararlı mı?

Hayır. Doğru kullanıldığında SEO açısından herhangi bir olumsuz etkisi yoktur.

Ancak;

  • Çok büyük olmamalı.
  • İçeriği kapatmamalı.
  • Mobil ekranda kullanıcı deneyimini bozmamalıdır.

Google, kullanıcı deneyimine önem verdiği için aşırı büyük açılır pencereler olumsuz etki oluşturabilir.

Sık Sorulan Sorular

WhatsApp butonu ücretsiz midir?

Evet. Sadece bağlantı kodunu kullanarak ücretsiz şekilde ekleyebilirsiniz.

Her tema ile çalışır mı?

Evet. HTML destekleyen tüm web sitelerinde kullanılabilir.

Mobilde açılır mı?

Evet. Telefonda WhatsApp uygulaması açılır.

Masaüstünde çalışır mı?

Evet. WhatsApp Web üzerinden çalışır.

Sonuç

WhatsApp iletişim butonu, ziyaretçilerin sizinle hızlı şekilde iletişime geçmesini sağlayan en etkili yöntemlerden biridir. Özellikle müşteri dönüşümlerini artırmak isteyen işletmeler için küçük ama güçlü bir çözümdür.