Sitemize WhatsApp İletişim Butonu (Canlı Destek) Eklemenin Kolay Yolu

*Önemli not!
Bazı kişiler bu sayfadaki kodu olduğu gibi kopyaladığı için siteye koydukları whatsapp hattında benim numaram çıkıyor. Bu sebeple numaramı 5 Ocak 2020 itibariyle kodun içinden kaldırıyorum.

Telefon numaramı izinsiz kullanmış olanlar da bu uyarımdan itibaren sitelerinden numaramı kaldırmadıkları takdirde yasal işlem başlatacağım.

İnternet sitemiz üzerinden ürün ya da hizmet satıyorsak, bu ürün ya da hizmeti alacak olan müşterilerimiz, bilgi edinmek, satın almak ya da benzeri bir konuda bize ulaşmak için hızlı bir yol ararlar.

Bu durumda, tercih ettikleri yollarında başında, en hızlı iletişim kurabilecekleri şu araçlar gelir:

  • Canlı Destek Butonu
  • WhatsApp Butonu
  • Facebook Messenger Butonu

Bugün bunlardan ikincisi ve en çok tercih edilen yöntem olan WhatsApp İletişim Butonunu çok kısa yoldan eklemeyi öğreneceğiz.

Küçük bir kod parçası geliştirdim, bu kod sayesinde jQuery dışında hiç bir kütüphaneye ihtiyaç duymadan WhatsApp iletişim Butonunu sitemize ekleyebileceğiz.

Aşağıdaki kodu <head> </head> etiketleri arasına ya da footer kısmına ekleyerek çalıştıracağız. (Mutlaka jQuery kodlarının altında yer almalıdır.)

<script>
window.onload = function(){
whatsapp_se_btn_phone = 'TELEFON NUMARASI'; //Telefon numaramız.
             whatsapp_se_btn_msg = 'Sizinle iletişime geçmek istiyorum.'; //Yazılmasını istediğimiz hazır mesaj.
         $(document.body).append('<div class="whatsapp-se-btn"></div>'),whatsapp_se_btn_base64="https://image.flaticon.com/icons/svg/124/124034.svg",$(".whatsapp-se-btn").attr("style","position:fixed;bottom:15px;right:15px;overflow:hidden;background:#1bd741;color:#ffffff;text-align:center;padding:4px 4px;z-index:9999999;cursor:pointer;box-shadow:#000000 0 0 5px;border-radius:100px;"),$(".whatsapp-se-btn").html('<img style="width: 45px;" src="'+whatsapp_se_btn_base64+'" alt="Whatsapp ile İletişime Geç" />'),$(".whatsapp-se-btn").attr("onclick",'location.href="https://wa.me/'+whatsapp_se_btn_phone+"?text="+whatsapp_se_btn_msg+'"');}
</script>

Yukarıdaki kod parçacığını eklerken dikkat etmemiz gereken iki şey var; whatsapp_se_btn_phone ve whatsapp_se_btn_msg değişkenleri.

whatsapp_se_btn_phone değişkenine kendi telefon numaramızı,
whatsapp_se_btn_msg değişkenine ise müşterimizin bizimle iletişime geçerken otomatik olarak yazılmasını istediğimiz başlangıç mesajını yazıyoruz.

İşte bu kadar basit! Artık çalışan bir WhatsApp İletişim Butonumuz var.

Whatsapp mesaj bölümünün yeni pencerede açılması için bu kodu kullanabilirsiniz, yukarıdaki kod ile tek farkı yeni pencerede açılmasıdır:

<script>
window.onload = function(){
whatsapp_se_btn_phone = 'TELEFONNUMARASI'; //Telefon numaramız.
whatsapp_se_btn_msg = 'Sizinle iletişime geçmek istiyorum.'; //Yazılmasını istediğimiz hazır mesaj.
$(document.body).append('<div class="whatsapp-se-btn"></div>'),whatsapp_se_btn_base64="https://image.flaticon.com/icons/svg/124/124034.svg",$(".whatsapp-se-btn").attr("style","position:fixed;bottom:15px;right:15px;overflow:hidden;background:#1bd741;color:#ffffff;text-align:center;padding:4px 4px;z-index:9999999;cursor:pointer;box-shadow:#000000 0 0 5px;border-radius:100px;"),$(".whatsapp-se-btn").html('<img style="width: 45px;" src="'+whatsapp_se_btn_base64+'" alt="Whatsapp ile İletişime Geç" />'),$(".whatsapp-se-btn").attr("onclick",'window.open("https://wa.me/'+whatsapp_se_btn_phone+"?text="+whatsapp_se_btn_msg+'")');}
</script>

Not: Kodun çalışması için sayfamıza jQuery kütüphanesinin eklenmiş olması gerekmektedir.

WhatsApp İletişim Butonu Neden Önemli?

Müşterilerimiz ya da ziyaretçilerimiz sitemizi ziyaret ettiğinde sergiledikleri davranışlar çok önemlidir. Ancak hepimiz için daha önemlisi bu davranışların amaçladığımız işlemlere dönüşmesidir.

Mesela bir e-ticaret sitemizin olduğunu düşünelim, müşterilerimizin internet sitemizi gezmeleri, üründen ürüne gezip açıklamaları okumaları, sosyal hesaplarında paylaşmaları, arkadaşlarına refere olarak yeni kişilere yönlendirmeleri gerek SEO açısından, gerekse bizim müşteri profilimizi tanımamız açısında önemlidir.

Ancak dürüst olmak gerekirse, biz e-ticaret sitemizdeki ürünümüzü ya da hizmetimizi satmak istiyoruz. İşte bütün bu davranışların alışverişe dönüşmesi için müşteriye dokunabiliyor olmamız önemlidir.

Müşterilerimize en iyi dokunma yolu ise, onlarla canlı iletişim halinde olabilmemizdir. Müşterilerimizin bizimle canlı irtibata geçebilmeleri için onlara seçenekleri de biz sunarız. En bilinen yöntemler, çağrı merkezi ve canlı destek sistemleridir. Bu iki kanalın birbirine karşı artıları ve eksileri vardır, kısaca bunlara da değinelim.

Çağrı Merkezinin Avantajları ve Dezavantajları

Bir müşterinin internet sitemizden alışveriş yapmasını tetikleyen en önemli etkenlerden biri güvendir. Çağrı merkezlerinin en büyük avantajı müşterilere güven sağlamasıdır. Çünkü yapılan araştırmalar insanların yazışmaktan ziyade konuştukları insanlara daha çok güvendiğini göstermiştir. Ayrıca Çağrı Merkezi bir işletme için güven veren bir prestij kaynağıdır.

Çağrı merkezilerinin en büyük dezavantajı, yüksek maliyetlere sebep olmasıdır. Bir müşteri yetkilisi, aynı anda sadece bir müşteriye sağlıklı hizmete verebilir. Müşteri yoğunluğuna göre çağrı merkezi yoğunluğu da doğru orantılı olarak artar ve bu da çağrı merkezinde ek arkadaşlara ihtiyaç duymamızı sağlar. Haliyle maliyeti arttırır. Ayrıca çağrı merkezimiz kalifiye arkadaşlar tarafından yönetilmiyor ise müşterilerimizde negatif bir intiba bile oluşturabilir.

WhatsApp / Canlı Destek Sisteminin Avantajları ve Dezavantajları

WhatsApp ya da herhangi bir canlı destek sistemi, çağrı merkezlerine oranla çok daha düşük maliyetlidir. Hatta WhatsApp desteği için bir akıllı telefondan başka teknoloji yatırımı yapmamıza gerek yoktur. Canlı destek sistemini kullanan ekip arkadaşımız aynı anda birden çok müşteriye hizmet verebilir. Ek olarak WhatsApp desteğinin, diğer canlı destek sistemlerine oranla ufak da olsa müşteriye daha fazla güven verdiği de şahsi tecrübelerimle doğruladığım bir bilgidir.

Canlı destek sistemlerinin en büyük dezavantajı, çağrı merkezlerine göre daha az güvenli hissettirdiği bir gerçektir. Bu sebeple çağrı merkezini alternatif iletişim kanalı olarak hazırda bulundurmak mantıklı bir seçenektir.

Müşteri Destek Sistemlerinin Genel Avantajları

Müşteriye herhangi bir kanal ile canlı destek vermenin en büyük yararlarını maddeler halinde şöyle özetleyebiliriz:

  • Davranışların dönüşüm oranını arttırır
  • Daha samimi müşteri ilişkileri kurmaya yardımcı olur
  • Müşteriye güven verir
  • Daha sağlıklı müşteri datası toplamaya yardımcı olur
  • Müşteri profili hakkında bilgi verir
  • Daha sadık müşteriler elde etmemizi sağlar
  • Markamızın bilinirliğini arttırır



Comments

“Sitemize WhatsApp İletişim Butonu (Canlı Destek) Eklemenin Kolay Yolu” için 24 cevap

  1. Ayhan avatarı

    Ellerine sağlık Yazılımcıların kralıııı.

    1. Şevket Erer avatarı

      Eyvallah SEO’nun kralı 🙂

  2. Yerel Site avatarı
    Yerel Site

    Çok güzel bilgi teşekkür ederim.

  3. Mert ilbey avatarı
    Mert ilbey

    Ben sizden bir konuda yardim.almak istiyorum.numaranizi verebilirmisiniz resim.atmam gerekiyorda

    1. Şevket Erer avatarı

      Merhabalar, geç dönüş için kusura bakmayın. Mail olarak iletişim bilgilerimi ilettim.

  4. […] arttır. Buna canlı destek de eklendiğinde performans daha da yükselir. Daha önceki yazımda e-ticaret sistemlerinde canlı destek sistemlerinin önemine […]

  5. FATİH avatarı

    Merhaba,
    Öncelikle böyle bir paylaşım için teşekkür ederim,
    Bu işlemden sonra bütün makalelerini okumaya karar verdim ve sık kullanılanlar listeme sitenin linkini yapıştırdım 😀
    Başarılarının ve paylaşımlarının devam etmesi dileğiyle

    Fatih KARNAL
    themarka.net
    mrbek.com

    1. Şevket Erer avatarı

      Merhaba,
      Çok teşekkür ederim, yararlı olduysa ne mutlu 🙂

  6. FATİH avatarı

    Merhaba emeğiniz için allah razı olsun
    sizden bir ricam olacak,
    butona tıklayınca whatsapp yeni bir sekmede açılsa çok güzel olacak çünkü sitenin arka tarafta açık kalıyor olması ve kullanıcının geri dönüş kısmında daha kolay gelmesi için faydası olacağını düşündüğümden sizden böyle bir ricada bulunuyorum.

    1. Şevket Erer avatarı

      Merhabalar,
      Talebiniz üzerine konuyu güncelledim, yeni sekmede açılmasını isterseniz kodu güncelleyebilirsiniz. Yukarıdaki anlatımda mevcut.

      1. Fatih avatarı

        Ben teşekkür ederim

  7. Seslichat Panelci avatarı

    İşime yaradı hocam çok saolun başarılarınızın devamını beklerim

    1. Şevket Erer avatarı

      Rica ederim, teşekkürler 🙂

  8. recep avatarı

    guzel bir paylaşım olmuş hocam elinize sağlık.

    1. Şevket Erer avatarı

      Teşekkür ederim 🙂

  9. recep avatarı

    oldukça kaliteli bir makale

  10. ihsan avatarı
    ihsan

    çok teşekkürler

  11. kozanfirmam avatarı

    güzel olmuş emeğinize sağlık

  12. Fırat avatarı
    Fırat

    Google Chrome’da ve Opera’da mobil tarayıcıda açınca whatsapp simgesi görünmüyor ama Firefox’ta düzgün çalışıyor. Neden olabilir acaba? Düzeltmenin bir yolu varsa açıklarsanız sevinirim.

    1. Şevket Erer avatarı

      Sorun düzeltilmiştir, kodu güncelleyerek test edebilirsiniz.

  13. yenibosna satılık daire avatarı
    yenibosna satılık daire

    Faydalı bir çalışma teşekkürler.

  14. ahmet arslan avatarı

    Oldukça faydali makale olmuş tesekurler

  15. Selçuk ŞAHİNDURAN avatarı

    Elini sağlık faydalı bir yazı.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir