Whatsapp İletişim Butonu Ekleme [WordPress Değil]

Mobil cihazların hayatımıza girmesiyle birlikte bir uygulama ile daha tanıştık ve çok kısa sürede haşır neşir olduk. Nedir bu uygulamanın adı ? Tabi ki whatsapp. Whatsapp’ın kullanımının bu kadar yaygın olmasıyla birlikte artık  herkes sizinle whatsapp üzerinden iletişim kurmaya çalışıyor. Bu bir ünlü giyim markasından tutun basit bir teknik servise kadar. Hal böyle olunca web sitelerinde de son zamanlarda whatsapp iletişim butonlarını hayli fazlaca görüyorum ve bu sitelerin çoğununda wordpress tabanlı olduğunu gördüm.  Sonra araştırdım ve wordpress in bunun için bir eklentisi olduğunun farkına vardım ve çok basit bir şekilde eklenebilen bir eklenti. Peki bizim gibi wordpress kullanmayanlar bu butonu sitelerine nasıl ekleyecek ondan bahsedelim. Ben Google’da Türkçe arama yaptığımda bu soruya cevap alamadım herkes wordpress eklentisinin nasıl kurulacağını yazmış. İngilizce hiç bakmadan wordpress eklentisini inceleyerek size sitenize kolayca nasıl ekleyebileceğinizi gösteren bir yazı yazmak istedim.

Bu butonu sitenize eklemeniz için bir adet css dosyası var bunu sitenize include ediyorsunuz. Bir adet script kodu var, 3 tane whatsapp iconu birde html kodları, yani wordpress eklentisinden bence daha basit.

Gerekli dosyaları aşağıdaki vereğim linkten indirebilirsiniz.

Dosyanın içinden çıkan css dosyasına css klasörüne attıktan sonra sayfamızın head kısmına aşağıdaki kod ile ekleyiniz.

<link href="css/wapopup.css" rel="stylesheet">

Sonra sayfanızdaki js dosyalarının altına aşağıdaki script kodunu ekleyiniz.

<script>
(function($) {
var wa_time_out, wa_time_in;
$(document).ready(function() {
$(".wa__btn_popup").on("click", function() {
if ($(".wa__popup_chat_box").hasClass("wa__active")) {
$(".wa__popup_chat_box").removeClass("wa__active");
$(".wa__btn_popup").removeClass("wa__active");
clearTimeout(wa_time_in);
if ($(".wa__popup_chat_box").hasClass("wa__lauch")) {
wa_time_out = setTimeout(function() {
$(".wa__popup_chat_box").removeClass("wa__pending");
$(".wa__popup_chat_box").removeClass("wa__lauch");
}, 400);
}
} else {
$(".wa__popup_chat_box").addClass("wa__pending");
$(".wa__popup_chat_box").addClass("wa__active");
$(".wa__btn_popup").addClass("wa__active");
clearTimeout(wa_time_out);
if (!$(".wa__popup_chat_box").hasClass("wa__lauch")) {
wa_time_in = setTimeout(function() {
$(".wa__popup_chat_box").addClass("wa__lauch");
}, 100);
}
}
});
});
})(jQuery);
</script>

Sonraki adım ise sayfamızda </body> etiketinin hemen üstüne aşağıdaki kodları kendinize göre düzenleyerek yapıştırınız.

<div class="wa__btn_popup">
<div class="wa__btn_popup_txt wa__btn_popup_txt2">Sorularınız için...</div>
<div class="wa__btn_popup_icon"></div>
</div>
<div class="wa__popup_chat_box">
<div class="wa__popup_heading">
<div class="wa__popup_title">Konuşmayı başlat</div>
<div class="wa__popup_intro"></a></div>
</div>
<!-- /.wa__popup_heading -->
<div class="wa__popup_content wa__popup_content_left">
<div class="wa__popup_notice"></div>
<div class="wa__popup_content_list">

<div class="wa__popup_content_item">
<a target="_blank" href="https://api.whatsapp.com/send?phone=90538928xxxx&text=Merhaba" class="wa__stt wa__stt_online">
<div class="wa__popup_avatar">
<div class="wa__cs_img_wrap" style="background: url(img/cgtytpl.jpg) center center no-repeat; background-size: cover;"></div>
</div>

<div class="wa__popup_txt">
<div class="wa__member_name">Çağatay Topal</div>
<!-- /.wa__member_name -->
<div class="wa__member_duty"></div>
<!-- /.wa__member_duty -->
</div>
<!-- /.wa__popup_txt -->
</a>
</div>

</div>
<!-- /.wa__popup_content_list -->
</div>
<!-- /.wa__popup_content -->
</div>

Son bir işlemimiz kaldı oda 3 adet icon dosyası var onlarıda css dosyasına bakarsanız yolu /img klasörü içine atmanız yeterlidir.

Dosyaları indirmek için Tıklayınız