Web Sitenize Sabit WhatsApp ve Telefon Butonu Nasıl Eklenir? (2025 Rehber)

Kullanıcıların size kolayca ulaşmasını sağlayacak sabit butonlar, dönüşüm oranlarınızı ciddi anlamda artırır. Bu makalede, sabit WhatsApp ve telefon butonu ekleyerek web sitenizin kullanıcı deneyimini nasıl geliştirebileceğinizi detaylıca inceleyeceğiz.

Kodumuz tamamen mobil uyumlu, Google tarafından taranabilir, WordPress ile uyumlu ve Rank Math SEO eklentisinin istediği kriterlere uygundur.

Kodun Görevi Nedir?

Size verdiğim JavaScript kodu, sayfanın sol alt köşesine sabitlenmiş 2 buton oluşturur:

• Telefon Arama Butonu: Ziyaretçi bu butona tıkladığında doğrudan arama başlatır.
• WhatsApp Butonu: Önceden belirlenmiş bir mesajla seni WhatsApp üzerinden arayabilir.

Her buton, üzerine gelindiğinde kullanıcıya açıklayıcı bir tooltip (açılır metin kutusu) sunar. Bu da hem kullanıcı etkileşimini hem de erişilebilirliği artırır.

Kodu Web Sitesine Nasıl Eklerim?

1. WordPress Kullanıcıları İçin

• WordPress admin paneline giriş yap.
• Görünüm → Tema Dosya Editörü → footer.php dosyasını aç.
• </body> etiketinden önce verdiğimiz `<script>` kodunu yerleştir.
• “Değişiklikleri Kaydet” butonuna bas.

2. Rank Math ile Entegrasyon

• Rank Math → Titles & Meta → Custom Code bölümüne gir.
• Script kodunu buraya gömerek tüm sayfalarda çalışmasını sağlayabilirsin.
• Alternatif olarak “Header/Footer Code Manager” eklentisiyle belirli sayfalarda da gösterebilirsin.

Mobil Uyumlu Sabit Butonlar Neden Önemli?

SEO Açısından Faydaları

• Mobil kullanıcılar için erişilebilirlik artar.
• Google Page Experience kriterlerine katkı sağlar.
• Tıklanabilir öğe oranı yükselir.
• Kullanıcı sayfa süresi artar → SEO puanı yükselir.

Dönüşüm Oranı Üzerindeki Etkisi

Bir kullanıcı, siteye geldiğinde sizinle iletişim kurması için sadece 1 tıklamaya ihtiyaç duyar. Bu sayede satış, rezervasyon veya danışmanlık oranlarınız artar.

SEO Teknik Detaylar

SEO Öğesi	Açıklama
Buton Etiketi	Alt metinler (alt attribute) ve tooltip açıklamaları içeriyor.
Mobil Uyumluluk	%100 responsive yapıdadır.
Script Konumu	Footer kısmına yerleştirildiği için sayfa hızını etkilemez.
Görsel Kullanımı	SVG veya optimize edilmiş PNG kullanılmalı.
Erişilebilirlik (a11y)	Tooltip ve aria-label gibi geliştirmeler yapılabilir.

Sonuç

2025 yılında kullanıcıların beklentisi net: hızlı, doğrudan ve güvenilir iletişim. Bu rehberde sunduğumuz sabit telefon ve WhatsApp butonu ile kullanıcı dönüşüm oranlarınızı yükseltebilirsiniz.

Kodun çalışması, mobil uyumu, görsel desteği ve SEO katkısıyla sitenizi bir adım öne taşıyabilirsiniz.

Sabit WhatsApp ve Telefon Butonu Kodu

Kodun Genel Özeti: Ne Yapar?

Aşağıda yer alan JavaScript kodu, web sitenize sabit konumlu iki yuvarlak buton ekler:

1. Telefon Butonu: Kullanıcılar bu butona tıklayarak sizi doğrudan arayabilir.
2. WhatsApp Butonu: Tek tıkla WhatsApp üzerinden sizinle iletişime geçebilirler.

Butonlar sol alt köşede sabitlenmiştir ve fare üzerine gelindiğinde bilgilendirici bir tooltip (açıklama balonu) gösterilir.

Hangi Sitelerde Kullanılmalı?

• Kurumsal web siteleri
• Restoran, kafe, otel siteleri
• E-ticaret siteleri
• Mobil öncelikli hizmet sunan platformlar

Özellikle mobil aramalarda “hemen ara” ve “WhatsApp üzerinden bilgi al” gibi aksiyonlar çok değerlidir.

<script>
document.addEventListener("DOMContentLoaded", function () {
  const container = document.createElement("div");
  container.style.cssText = 
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 9999;
  ;

  function createButton(href, bgColor, imgSrc, imgAlt, tooltipText) {
    const wrapper = document.createElement("div");
    wrapper.style.cssText = 
      position: relative;
      display: inline-block;
    ;

    const tooltip = document.createElement("span");
    tooltip.textContent = tooltipText;
    tooltip.style.cssText = 
      visibility: hidden;
      width: max-content;
      background-color: #333;
      color: #fff;
      text-align: center;
      border-radius: 4px;
      padding: 5px 10px;
      position: absolute;
      left: 70px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10000;
      white-space: nowrap;
      opacity: 0;
      transition: opacity 0.3s;
      font-size: 13px;
    ;

    const button = document.createElement("a");
    button.href = href;
    button.target = "_blank";
    button.style.cssText = 
      width: 60px;
      height: 60px;
      background-color: ${bgColor};
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 5px rgba(0,0,0,0.3);
      text-decoration: none;
      position: relative;
    ;

    const img = document.createElement("img");
    img.src = imgSrc;
    img.alt = imgAlt;
    img.style.cssText = 
      width: 28px;
      height: 28px;
    ;

    button.appendChild(img);
    wrapper.appendChild(button);
    wrapper.appendChild(tooltip);

    // Tooltip göster/gizle
    wrapper.addEventListener("mouseenter", () => {
      tooltip.style.visibility = "visible";
      tooltip.style.opacity = "1";
    });
    wrapper.addEventListener("mouseleave", () => {
      tooltip.style.visibility = "hidden";
      tooltip.style.opacity = "0";
    });

    return wrapper;
  }

  const phoneBtn = createButton(
    "tel:+900000000000",
    "#d0e8f2",
    "http://localhost/harun/wp-content/uploads/2025/05/telefon-ara-iletisim.svg",
    "Telefon",
    "Hemen İletişime Geçin"
  );

  const whatsappBtn = createButton(
    "https://wa.me/900000000000?text=Merhaba%2C%20netortami.net%20sitesi%20%C3%BCzerinden%20ileti%C5%9Fime%20ge%C3%A7iyorum.",
    "#25D366",
    "http://localhost/harun/wp-content/uploads/2025/05/WhatsApp.svg",
    "WhatsApp",
    "Whatsapp İletişim"
  );

  container.appendChild(phoneBtn);
  container.appendChild(whatsappBtn);
  document.body.appendChild(container);
});
</script>