Konular
Videolar
Sunular
Testler

Web Sitesine Sohbet İçin Bir WhatsApp düğmesi Ekleme

WhatsApp Business'ı kullanmanın dünyadaki 1,5 milyardan fazla kişiyle iletişim kurmanıza izin vereceğini okumuş olmalısınız, ancak gerçek şu ki, bu potansiyel müşterilere ulaşmak için, işinizle iletişim kurmaları için onları motive etmek için mevcut her kanaldan yararlanmanız gerekir.

Şu anda mobil cihazların web sitenizin trafiğinin neredeyse yarısını oluşturduğunu unutmayın , web siteniz WhatsApp sohbetlerinin en iyi kaynaklarından biri olabilir.

Web sitenize sohbet düğmesine basmanın basit ve çekici bir yolunu paylaşmak istiyoruz, bu, ziyaretçilerinizin tek bir tıklamayla sizinle iletişim kurmasını sağlar. Bunu yapmak için, web sitenizin koduna erişiminiz ve size yardımcı olması için temel web programlama bilgisi veya programcı bilgisine sahip olmalısınız.

Bileşenler

Bu sohbet için tıkla düğmesini oluşturmak için kullanacağız:

  • jQuery
  • Yüzen WhatsApp eklentisi : Rafael Botazini tarafından oluşturulan, bir masaüstü bilgisayardan çalıştırılıyorsa WhatsApp web ile veya bir mobil cihazdan kullanılıyorsa WhatsApp uygulamasıyla konuşmaya başlayacak kayan bir düğme oluşturmanıza olanak sağlayan bir JQuery eklentisi. Yüklemeniz gerekecek: floating-wpp.min.css, floating-wpp.min.js ve whatsapp.svg.
  • WhatsApp Business telefon numarası : Bu numara, WhatsApp Sohbet bağlantısını çalıştırmak için eklenti tarafından kullanılacaktır.
    Bu kod açık kaynaklı bileşenler kullanıyor ve resmi WhatsApp veya Toky ürünleri değiller, bu nedenle yararlı kaynaklar olarak sağlanıyorlar ama uygulanmasına destek vermiyoruz.

WhatsApp sohbet için tıkla düğmesini web siteme nasıl ekleyebilirim?

Kütüphaneleri ve CSS'yi web sitenizin başlığına ekleyerek başlarız:

<!--JQuery-->  
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>  
<!--Floating WhatsApp css-->  
<link rel="stylesheet" href="floating-wpp.min.css">  
<!--Floating WhatsApp javascript-->  
<script type="text/javascript" src="floating-wpp.min.js"></script>
 
 
 
 

Şimdi, WAButton ID ile bir div eklemelisiniz, buradaki eklentinin sohbet için tıkla düğmesini oluşturacağı yer. 

<!--Div where the WhatsApp will be rendered-->  
<div id="WAButton"></div>
  

Önceki adımda eklediğimiz divde eklentinin kullanıldığı bir komut dosyası bloğu eklemelisiniz:

<script type="text/javascript">  
   $(function () {
           $('#WAButton').floatingWhatsApp({
               phone: 'WHATSAPP-PHONE-NUMBER', //WhatsApp Business phone number
               headerTitle: 'Chat with us on WhatsApp!', //Popup Title
               popupMessage: 'Hello, how can we help you?', //Popup Message
               showPopup: true, //Enables popup display
               buttonImage: '<img src="whatsapp.svg" />', //Button Image
               //headerColor: 'crimson', //Custom header color
               //backgroundColor: 'crimson', //Custom background button color
               position: "right" //Position: left | right

           });
       });
</script>
  

Bu kod aşağıdaki temel parametrelere sahiptir:

  • telefon : WhatsApp Business için kullandığınız telefon numarası.
  • position : Düğmenin "sola" mı, yoksa "sağa" mı görünmesini istediğinizi tanımlayın.
  • popupMessage : Açılan pencerede görünecek ve ziyaretçiyi sohbet başlatmaya davet eden mesaj.
  • showPopup : Mesaj açılır penceresinin etkin mi devre dışı mı olduğunu tanımlayın. Devre dışı bırakılırsa, sadece düğme belirir ve tıkladığınızda sohbete başlanır.
  • autoOpenTimeout : Eklentinin açılan pencereyi otomatik olarak açmak için beklemesi gereken milisaniye sayısı.
  • headerColor : Açılan pencerenin başlık çubuğunun arka plan rengi.
  • headerTitle : Açılan pencerenin başlığı
  • buttonImage : Bir <img> etiketinde görünmesini istediğiniz resim.
  • Size : CSS formatında düğme genişliği, varsayılan “72px”.
  • backgroundColor : Kayan düğme için arka plan rengi
Web Sitesine Sohbet İçin Bir WhatsApp düğmesi Ekleme

Sohbet için tıkla düğmesi doğru kurulursa, mobil cihazlarda şöyle görünecektir:

Web Sitesine Sohbet İçin Bir WhatsApp düğmesi Ekleme

 

 

Bu düğmenin nasıl çalışacağını aşağıdaki jsFiddle'da görebilirsiniz . WhatsApp Business telefon numaranızı belirtilen alana eklemeniz yeterlidir:

Toky ile, WhatsApp Business'ı tarayıcınızdan kullanabilir, müşteri tarafından başlatılan konuşmaları verimli bir şekilde yönetebilir ve satışlarınızı ve müşteri hizmetlerinizi iyileştirebilecek doğrudan ve kişisel bir iletişim kanalına sahip olabilirsiniz. Ücretsiz Toky deneyin

Kaynak

2,470 Okunma Henüz yorum yapılmamış 11/12/2019 18:09:47

Yorumunuzu Ekleyin

Web Tasarımı Yaparken Kullanılan Programlar

Her programcının ve her web tasarımcının kendi özel alet çantası olmakla birlikte , genel olarak web tasarımında kullanılan web tasarımcıların en çok tercih ettiği program isimlerini burada sizlerle paylaşağım.

40,695 Okunma Henüz yorum yapılmamış 24/09/2012 09:07:04

Web Sayfası Tasarım Hataları

Deneyimler neticesinde oluşturulmuş bir liste

25,517 Okunma Henüz yorum yapılmamış 18/10/2007 02:24:10 15/12/2013 01:42:24

Web Siteleri Nasıl Çalışır

Hosting ya da daha Türkçe karşılığıyla "Barındırma", web sayfalarınızı internet'te yayınlamak için gerekli alanın kiralanmasıdır. Diğer bir ifade ile, Hosting, bir web sitesinde yayınlanmak istenen sayfaların, resimlerin veya dokümanların internet kullanıcıları tarafından erişebileceği bir bilgisayarda tutulmasıdır.

21,322 Okunma Henüz yorum yapılmamış 26/09/2012 00:12:17 15/03/2015 00:14:09

Domain ve Hosting Nedir?

Domain, Hosting ve Subdomain nedir?

15,441 Okunma Henüz yorum yapılmamış 15/02/2014 17:16:09 15/02/2014 17:18:50

Domain Nasıl Alınır?

onlinenic ve natro host firmalarından domain alımı için hesap oluşturma

14,701 Okunma Henüz yorum yapılmamış 11/02/2014 15:30:30 12/02/2014 15:41:44

Reverse DNS ve PTR Kaydı

DNS türlerinden bir tanesi de PTR kaydıdır, RDNS(Reserve Domain Name System) olarak ta adlandırlır.

11,816 Okunma Henüz yorum yapılmamış 24/11/2015 02:46:12 01/08/2020 14:18:37

Web Geliştirmede Kullanılan En İyi 5 Programlama Dili


Web Geliştirme! Bazılarını heyecanlandıran, bazılarını korkutan bir sözdür. Web geliştirmede kullanılan en iyi 5 programlama dili konusunda size rehberlik edeceğiz, böylece başlamak için hangi dilleri bilmeniz gerektiğini bileceksiniz. Bir geliştiricinin bir web sitesi tasarlamasına ve tasarımlara işlevsellik eklemesine yardımcı olan tüm programlama dillerinden bahsedeceğiz. Ana web geliştirme dillerine ve birbirleriyle karşılaştırıldığında nasıl durduklarına ayrıntılı bir şekilde bakalım.

48 Okunma Henüz yorum yapılmamış 14/01/2021 15:01:17

XAMPP Nasıl Kurulur?

Xampp hakkında kısaca bilgi verildi.Görsel desteğiyle nasıl kurulacağı anlatıldı.

43 Okunma Henüz yorum yapılmamış 14/01/2021 15:04:54

Yükleniyor...