Siteye WhatsApp Butonu Ekleme

WhatsApp Butonu Neden Önemli?

WhatsApp butonu sitenize eklemenin birçok avantajı vardır:

• Kolay İletişim: Ziyaretçiler tek tıkla sizinle iletişime geçebilir

• Artan Dönüşüm: Potansiyel müşteriler hızlıca soru sorabilir

• Mobil Uyumluluk: Özellikle mobil kullanıcılar için son derece pratik

• Güven Artışı: Direkt iletişim imkanı güven oluşturur

WordPress WhatsApp Butonu Ekleme

Aşağıda vereceğim kodlar tüm internet yazılımlarında çalışmaktadır. WordPress websitenize WhatsApp butonu eklemek istiyorsanız tema ayarlarınızdan footer.php dosyasında "body" kapanış etiketinden önce bu kodları eklerseniz WhatsApp butonunuz aktif olmuş olur.

HTML ve CSS ile Basit WhatsApp Butonu

İşte sitenize ekleyebileceğiniz basit ama etkili bir WhatsApp butonu kodu

Aşağıdaki kod bloğunda stil kodları bulunmaktadır.

<style>
  .fixed-whatsapp {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #25D366;
    color: white;
    padding: 12px 16px;
    width: 100%;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    text-decoration: none;
  }

  .whatsapp-icon {
    width: 32px;
    height: 32px;
  }

  @media (min-width: 768px) {
    .fixed-whatsapp {
      display: none;
    }
  }
</style>

Burada ise html kodumuz bulunmaktadır.

<a
  href="https://wa.me/905458104148?text=Merhaba%2C%20bilgi%20alabilir%20miyim%3F"
  target="_blank"
  class="fixed-whatsapp"
>
  <svg
    class="whatsapp-icon"
    aria-hidden="true"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
  >
    <path
      fill="currentColor"
      fill-rule="evenodd"
      d="M12 4a8 8 0 0 0-6.895 12.06l.569.718-.697 2.359 2.32-.648.379.243A8 8 0 1 0 12 4ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10a9.96 9.96 0 0 1-5.016-1.347l-4.948 1.382 1.426-4.829-.006-.007-.033-.055A9.958 9.958 0 0 1 2 12Z"
      clip-rule="evenodd"
    />
    <path
      fill="currentColor"
      d="M16.735 13.492c-.038-.018-1.497-.736-1.756-.83a1.008 1.008 0 0 0-.34-.075c-.196 0-.362.098-.49.291-.146.217-.587.732-.723.886-.018.02-.042.045-.057.045-.013 0-.239-.093-.307-.123-1.564-.68-2.751-2.313-2.914-2.589-.023-.04-.024-.057-.024-.057.005-.021.058-.074.085-.101.08-.079.166-.182.249-.283l.117-.14c.121-.14.175-.25.237-.375l.033-.066a.68.68 0 0 0-.02-.64c-.034-.069-.65-1.555-.715-1.711-.158-.377-.366-.552-.655-.552-.027 0 0 0-.112.005-.137.005-.883.104-1.213.311-.35.22-.94.924-.94 2.16 0 1.112.705 2.162 1.008 2.561l.041.06c1.161 1.695 2.608 2.951 4.074 3.537 1.412.564 2.081.63 2.461.63.16 0 .288-.013.4-.024l.072-.007c.488-.043 1.56-.599 1.804-1.276.192-.534.243-1.117.115-1.329-.088-.144-.239-.216-.43-.308Z"
    />
  </svg>
  <span>WhatsApp ile iletişime geç</span>
</a>

WhatsApp Link Yapısını Anlama

WhatsApp butonunun doğru çalışması için link yapısını anlamak önemlidir:

• Temel Format: https://wa.me/TELEFON_NUMARASI

• Önceden Tanımlı Mesaj: https://wa.me/TELEFON_NUMARASI?text=MESAJ

• Telefon Numarası: Ülke kodu ile birlikte (Türkiye için +90)

Örnek: https://wa.me/905551234567?text=Merhaba,%20sitenizden%20geliyorum.

Daha detaylı bilgi ve WhatsApp link oluşturmak için WhatsApp Link Oluşturucu aracını kullanabilirsiniz.