WhatsApp
Telefon

Sitene Whatsapp Ekleme - Whatsapp Button Ekleme

Yazılarımız ve Makalelerimiz.

Anasayfa Multi Medya Blog Sitene Whatsapp Ekleme - Whatsapp Button Ekleme
112 Okuma

Yeni teknoloji iletişim araçlarını etkin biçimde kullanmak, yeni müşterilere erişmenizi ve mevcut müşterilerinizin sizinle iletişim kurmalarını kolaylaştırır.Ürün ve hizmetlerinize ilişkin müşterilere hızlı biçimde cevap vermek bu noktada büyük önem taşır.

Özellikle bir e-ticaret sitesine sahipseniz; sayfalarınızı ziyaret edenlerin sorularına hem mobil hem de masaüstü kullanımda kolayca cevap verebilmelisiniz. Bugün pek çok cep telefonu kullanıcısı WhatsApp isimli uygulamayı aktif biçimde kullanıyor. Ayrıca WhatsApp web üzerinden de pek çok kullanıcı da masaüstü bilgisayarlarda aktif biçimde ilgili programı aktifleştirmiş durumda. Hal böyle olunca web sitenizi WhatsApp ile entegre etmek hızlı iletişim kurmanızı sağlayabilir. İşte, web sitenize kolayca ve hızlı biçimde WhatsApp entegre etmenin yolları…

Eklentisiz Kod Üzerinden WhatsApp Ekleme Mümkün Mü?
Eklentilerin web sitenizi yavaşlattığını düşünenlerdenseniz, şimdi söz edeceğimiz yol ideal bir tercih olabilir. Hiçbir eklenti kurmadan, kolayca web sitenizin “head” bölümüne ekleyeceğiniz küçük bir kodla bu işi çözebilirsiniz.

Aşağıda yer alan kodu kendinize göreözelleştirerek kullanabilirsiniz:

<script type=”text/javascript”>

(function () {

var options = {

WhatsApp: “+905310000000”, //

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 yer alan kodda 3 farklı yerde değişiklik gerçekleştirebilirsiniz. Diğer kısımlarda değişiklik yapmayınız.

Öncelikle WhatsApp ile başlayan satırda yer alan cep telefonu numarasını kullanmak istediğiniz nuramayla değiştirin. Kullanacağınız cep telefonunun WhatsApp profilini şirketinize göreözelleştirmeniz faydalı olacaktır. Örneğin; şirket logonuzu, yetkili kişinin ismi ve ünvanı gibi ayrıntılarıda düzenleyebilirsiniz.


Web sitenizde görünecek WhatsApp butonu yanında belirecek olan yazıyı da dilerseniz; call_to_action satırından sonra yazan “Merhaba, nasıl yardımcı olabilirim?” yazısını da kendinize göre revize edebilirsiniz. Kişiler web sitenizde gördükleri WhatsApp logosunun üzerine doğru yöneldiklerinde otomatik olarak söz konusu yazı ekranda belirecek.

Son adım olarak ise dilerseniz; position satırından sonra gelen “right” kısmını web sitenizde WhatsApp görselinin görünmesini istediğiniz yere göre; “left” şeklinde değiştirdiğinizde sol alt kısımda, “right” şeklinde bırakmanız halinde sağ alt köşede gözükecektir. Web sitenizde görünecek olan WhatsApp logosunun ana sayfada yer alan görsel ya da metin unsurlarının okunmasına engel olup olmadığını mutlaka kontrol edin. Ayrıca; ekleme yaptığınız kodla birlikte WhatsApp logosunun web sitenizdeki tüm sayfalarda aktif hale geleceğini de unutmamalısınız. Artık kodunuz hazırsa şimdi web sitenize kodunuzu yerleştirebilirsiniz.

Manuel Olarak WhatsApp Kodunun Yerleştirilmesi
Web sitenizin yönetici panelinden görünüm ve düzenleyici kısmına gelin, buradan ise düzenleyiciyi açın. Önünüze açılan dosyalardan header.php yazanı açın ve </head> yazan satıra kodunuzu yapıştırın. Dosyayı güncelle dedikten sonra web sitenizi kontrol edebilirsiniz.

Hazırladığınız Kodu Web Sitenize Eklenti Aracılığıyla da Yükleyebilirsiniz
Hazırladığınız kodu dilerseniz eklenti aracılığıyla da sisteme ekleyebilirsiniz. WhatsHelp Chat Button bu konuda size yardımcı olabilecek bir eklenti. Web sitenizin eklentiler kısmından ilgili eklentiyi yükleyin. Sonrasında eklentinin talimatları doğrultusunda kodunuzu yapıştırın.

WhatsApp uygulamasını web sitenizde entegre ettikten sonra hem masaüstü kullanıcılar hem de mobil kullanıcılar için sizinle iletişime geçmeleri kolaylaşacak. Mobil kullanıcılar web sayfanızdaki WhatsApp logosuna tıkladığında otomatik olarak WhatsApp açılacak. Masaüstü kullanıcılar için ise WhatsApp web uygulaması açılacak.

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.

Merhabalar, sitenizi ziyaret eden kullanıcılarınızın veya müşterilerinizin size daha hızlı ulaşabilesi için WhatsApp kodu eklemek istediniz fakat güzel diyebileceğiniz bir kodlama bulamadınız mı? Şimdi aşağıda paylaşacağım kodlar ile web sitenize WhatsApp iletişim butonunu ekleyebileceksiniz ve görsel olarak güzel olan bir kullanımı mevcut. Kodu sitenize Eklemesi oldukça basittir şimdiden kolay gelsin.

KOD :

<script type=”text/javascript”>
(function () {
var options = {
whatsapp: “+905320000000”, // İşetişime Geçilecek WhatsApp Numaranızı girin
call_to_action: “Merhaba, nasıl yardımcı olabilirim?”, // Selamlama kısmında görüntülenecek metin yazınızı girin.
position: “right”, // Sitenizin solunda olmasını isterseniz ‘left’, sağında olmasını isterseniz ‘right’.
};
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>

 

WhatsApp numaranızı, karşılama mesajınızı ve pozisyon ayarlarını yaptıktan sonra kodu kopyalayıp sitenizin mümkünse head tagları arasına olmaz ise footer tagları arasına ekleyebilirsiniz. Veya hiçbilmiyorum derseniz herhangi bir alana eklerseniz de çalışacaktır. Örnek için şuan sayfanın sağ alt tarafında WhasApp ikonu mevcuttur tıpkısının aynısı olacaktır :).

Okuyucu Yorumları

0 Yorum