Siteye WhatsApp iletişim butonu ekleme

4
131

Sitenizi ziyaret edenlere bu iletişim kanalından ulaşmak istiyor musunuz? WhatsApp iletişim özelliğini sitemize nasıl ekleriz? Siteye WhatsApp iletişim butonu ekleme işlemi zor değil, bu yazımda yine basit bir şekilde anlatmaya çalıştım.

WhatsApp kullanımı artık can sıkıcı bir biçimde arttı ve bu uygulamanın yüklü olmadığı telefon yok sanırım. Böyle olunca uygulama canımızdan bezdirse de sitemize bu iletişim yöntemini eklemek istiyoruz. Geçenlerde bir ziyaretçimin bunu nasıl yaptığımı sorması üzerine bu yazıyı yazmaya karar verdim.

Ne kullanacağız, nasıl yapacağız?

Bu işlem için bir eklenti kullanmadım. Hazır bir kod var ve bu kodu düzenleyip sitemize ekleyeceğiz. Bahsettiğim kod WhatsHelp.io adlı bir site içerisinden oluşturuldu. Altyapısını da bu site sağlıyor. Sitenizde kullanabileceğiniz kodu aşağıya ekledim.

Kod düzenleme

Sitenize WhatsApp iletişim butonu ekleyebilmek için aşağıdaki kodu kullanabilirsiniz.

<script type="text/javascript>
    (function () {
        var options = {
            whatsapp: "+905320000000", // WhatsApp numaranızı buraya girin
            call_to_action: "Merhaba, nasıl yardımcı olabilirim?", // Görünecek metin
            position: "right", // Position may be 'right' or 'left'
        };
        var proto = document.location.protocol, host = "whatshelp.io", url = proto + "//static." + host;
        var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
        s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
        var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
    })();
</script>

Yukarıda 3 kısımda düzenleme yapabilirsiniz, diğer kısımlarda bir değişiklik yapmayın. Birincisi ve mutlaka yapılması gereken whatsapp: ile başlayan satır. Buradaki numarayı kendi numaranız ile değiştirin.

İkinci kısım siteye eklenecek butonun yanında çıkacak yazı (Merhaba, nasıl yardımcı olabilirim?), bunu kendi istediğiniz bir cümleyle değiştirebilirsiniz.

Son olarak position: şeklinde başlayan satır var, butonun sitede duracağı yerin ayarı. Sitenizde iletişim butonunu sayfanın sağ alt köşesinde göstermek için “right”, sol alt köşesinde göstermek için “left” şeklinde ayarlayabilirsiniz.

Hazırlanan kodu siteye ekleme (Manuel Yöntem)

Düzenlediğiniz kodu sitede header.php dosyasına ekleyeceğiz. Bunun için sitenizin Yönetici Paneline giriş yapın ve Görünüm menüsünde en altta bulunan Düzenleyici sekmesini tıklayarak sayfayı açın. Sağ tarafa tema php sayfaları gelecek. Bunlardan header.php yazan dosyayı seçin.

Düzenlemesini yaptığınız kodu </head> ile biten satırın üzerine yapıştırın ve kaydedin.

Hazırlanan kodu siteye ekleme (Eklenti ile)

Ben fazla eklenti kullanma taraftarı olmadığımdan manuel olarak ekleme yaptım. Eğer bu yöntem zor gelecekse WhatsHelp Chat Button eklentisi yardımıyla kodu sitenize ekleyebilirsiniz. Kullanımı çok basit ve eklentinin sayfasında anlatılıyor.

Artık sitenizin sağ veya sol alt köşesine iletişim butonu eklenecek. Mobil kullanıcılarınız butonu tıkladığında WhatsApp açılacak ve size direkt mesaj yazabilecekler. Masaüstü bilgisayar veya notebook gibi bir cihazda buton tıklanırsa WhatsApp Web uygulama sayfası açılacak ve buradan size yazabilecekler.

Sanırım sade ve kısa bir anlatım oldu. Herkese iyi bloglamalar…

Paylaşmak önemsemektir!

4
Kimler Neler Demiş?

avatar
500
2 Comment threads
2 Thread replies
3 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
CengizMehmet HAKANSefa Recent comment authors
  Subscribe  
En Yeniler Eskiler Beğenilenler
Bildir
Cengiz
Ziyaretçi
Cengiz

Faydalı paylaşım. Site hızında sorun yaratır mı?

Sefa
Ziyaretçi
Sefa

Çok teşekkürler, e-ticaret siteleri için müşteri ile hızlı iletişimde çok fayda sağlayacak