Kategoriler
E-Ticaret Sistemleri Web Tasarım ve Yazılım

Eklentisiz & Modülsüz Whatsapp İletişim Butonu Yapımı

WordPress, Opencart, Prestahop ve dahası için sitenize modülsüz ve eklentisiz Whatsapp iletişim butonunu nasıl yapılır? Bir e-ticaret altyapısı veya WordPress tabanlı web sayfası kullanıyorsunuz ve sitenizde bir Whatsapp iletişim butonu olsun istiyorsanız eklenti veya modül kullanmadan bunu yapmanız çok kolay. Bir kaç satır kod ile Whatsapp butonunu sitemize nasıl ekleyeceğimizi görelim.

Günümüzde müşteriler ve ziyaretçiler ile iletişim kurmanın en kolay yolu hiç kuşkusuz Whatsapp uygulaması. Bu nedenle müşterileriniz web sayfanızı ziyaret ettiğinde kolayca sizlere soru sorabilmesi için Whatsapp iletişim seçeneğinin olduğunu görmesi sizler için büyük bir artıdır. Bu buton, müşteri tıkladığında direk Whatsapp uygulaması üzerinden size mesaj göndermesini sağlar. Bu yapacağımız işlem ile, sitemizin hem masaüstü hemde mobil versiyonunda tüm sayfalarda görünecek olan bir Whatsapp iletişim butonu yapacağız.


Whatsapp İletişim Butonu Nasıl Yapılır?

İlk olarak aşağıdaki kodu sitenizin ana CSS dosyasının en alta ekleyin;

WordPress: wp-content/themes/temanız/style.css
Opencart: catalog/view/theme/temanız/css veya stylesheet/stylesheet.css
Prestashop: themes/temanız/assets/css/theme.css

(Not: Bu dosya yolları temanıza göre değişiklikler gösterebilir)

.whatsapp {
	position: fixed;
	bottom: 25px;
	right: 25px;
	z-index: 9999;
}
	.whatsapp-button {
		background: #25D366;
		width: 69px;
		height: 69px;
		color: white;
		border-radius: 100%;
    		text-align: center;
    		/*box-shadow: 0px 0px 17px #00000038;*/
    		border: 7px solid rgb(202 255 219);
	}
	.whatsapp li {
		font-size: 35px;
    		margin-top: 17px;
	}

Daha sonra alttaki kodu sitenizin Footer dosyasının en altına <?php } ?></body>  etiketlerinden önce veya temanızın Header dosyasının en altına ekleyin.

WordPress: wp-content/themes/temanız/footer.php veya header.php
Opencart: catalog/view/theme/temanız/template/common/footer.tpl veya header.tpl
Prestashop: themes/temanız/templates/_partials/footer.tpl veya header.tpl

(Not: Bu dosya yolları temanıza göre değişiklikler gösterebilir)

<div class="whatsapp">
   <a href="https://api.whatsapp.com/send?phone=9053XXXXXXXX&">
   <div class="whatsapp-button"><li class="fa fa-whatsapp"></li></div></a>
</div>

Kod içerisindeki 9053XXXXXXXX kısmına, telefon numaranızı yazın.

Bu işlemleri yaptıktan sonra yeşil buton görünüyor fakat içerisinde Whatsapp iconu görünmüyor ise, alttaki kodu Header dosyası içerisinde <head></head> etiketleri arasına ekleyin;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Buton üzerinde değişiklikler

Butonunuzu biçimlendirmeniz için bir kaç detaydan bahsedelim;

CSS kodları içerisinde bulunan right: 25px; satırında right yerine left yazarsanız, buton sitenizin sol alt köşesinde konumlanacaktır.
/*box-shadow: 0px 0px 17px #00000038;*/ satırının başından ve sonundan /* */ işaretlerini kaldırdığınızda, butonunuzun arkasında gölge oluşacaktır.
/*border: 7px solid rgb(202 255 219);*/ satırının başından ve sonundan /* */ işaretlerini kaldırdığınızda, butonunuzun etrafında şeffaf halka oluşacaktır.

Sağlıklı günlere #EvdeKal