 |
| Blogger Whatsapp Sohbet Eklentisi |
Resimden gördüğünüz kadarıyla da eklentinin nasıl çalıştığını anlayabilirsiniz. Eklentiye 2 adet Müşteri Temsilcisi ekleyebilirsiniz. Ziyaretçiler bağlanmak istediği müşteri temsilcisini seçtikten sonra, Whatsapp uygulamasına otomatik olarak girmeden önce bir mesaj yazabilir.
Detaylı olarak incelemek isteyenler için;
Canlı ön izleme : Blogger Whatsapp Sohbet Eklentisi - Ön izleme
Blogger için Whatsapp Sohbet Eklentisi
Whatsapp sohbet eklentisini aşağıda paylaşacağım işaretli kodları düzenleyerek isteğinize göre kolayca düzenleyebilirsiniz. Aynı şekilde renk ve pozisyon için, CSS kodlarından kolayca düzenleyebilirsiniz.
WhatsApp Sohbet Eklentisi Kurulumu
Bu anlatım Blogger / Blogspot için geçerlidir.
Lütfen Blogger > Temalar > HTML'yi Düzenle'ye gidin.
Aşağıdaki CSS kodunu
]]></b:skin> veya </style> kodunun üstüne ekleyin./* CSS Multiple Whatsapp Chat */
#whatsapp-chat{position:fixed;background:#fff;width:350px;border-radius:10px;box-shadow:0 1px 15px rgba(32,33,36,.28);bottom:90px;right:30px;overflow:hidden;z-index:99;animation-name:showchat;animation-duration:1s;transform:scale(1)}
a.blantershow-chat{background:linear-gradient(to right top,#6f96f3,#164ed2);color:#fff;position:fixed;z-index:98;bottom:25px;right:30px;font-size:15px;padding:10px 20px;border-radius:30px;box-shadow:0 1px 15px rgba(32,33,36,.28)}
a.blantershow-chat i{transform:scale(1.2);margin:0 10px 0 0}.header-chat{background:linear-gradient(to right top,#6f96f3,#164ed2);color:#fff;padding:20px}
.header-chat h3{margin:0 0 10px}.header-chat p{font-size:14px;line-height:1.7;margin:0}
.info-avatar{position:relative}.info-avatar img{border-radius:100%;width:50px;float:left;margin:0 10px 0 0}
.info-avatar:before{content:'\f232';z-index:1;font-family:"Font Awesome 5 Brands";background:#23ab23;color:#fff;padding:4px 5px;border-radius:100%;position:absolute;top:30px;left:30px}
a.informasi{padding:20px;display:block;overflow:hidden;animation-name:showhide;animation-duration:2.5s}
a.informasi:hover{background:#f1f1f1}.info-chat span{display:block}#get-label,span.chat-label{font-size:12px;color:#888}
#get-nama,span.chat-nama{margin:5px 0 0;font-size:15px;font-weight:700;color:#222}#get-label,#get-nama{color:#fff}span.my-number{display:none}
.blanter-msg{color:#444;padding:20px;font-size:12.5px;text-align:center;border-top:1px solid #ddd}
textarea#chat-input{border:none;font-family:'Arial',sans-serif;width:100%;height:20px;outline:none;resize:none}
a#send-it{color:#555;width:70px;margin:-5px 0 0 5px;font-weight:700;padding:8px;background:#eee;border-radius:10px}
.first-msg{background:#f5f5f5;padding:30px;text-align:center}
.first-msg span{background:#e2e2e2;color:#333;font-size:14.2px;line-height:1.7;border-radius:10px;padding:15px 20px;display:inline-block}
.start-chat .blanter-msg{display:flex}#get-number{display:none}a.close-chat{position:absolute;top:5px;right:15px;color:#fff;font-size:30px}
@keyframes showhide{from{transform:scale(.5);opacity:0}}@keyframes showchat{from{transform:scale(0);opacity:0}}
@media screen and (max-width:480px){#whatsapp-chat{width:auto;left:5%;right:5%;font-size:80%}}
.hide{display:none;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}
.show{display:block;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}
Kodu ekledikten sonra Yerleşim > Gadget Ekle > HTML/JAVASCRİPT tıklayın ve içine aşağıdaki kodu ekleyin.
<div id='whatsapp-chat' class='hide'> <div class='header-chat'> <div class='head-home'><h3>Merhaba!</h3> <p>WhatsApp'ta sohbet etmek için aşağıdaki müşteri temsilcilerimizden birine tıklayın veya ornek@gmail.com adresine e-posta gönderin</p></div> <div class='get-new hide'><div id='get-label'></div><div id='get-nama'></div></div></div> <div class='home-chat'> <!-- Info Contact Start --> <a class='informasi' href='javascript:void' title='Chat Whatsapp'> <div class='info-avatar'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyWti1yKovb3mibQHKb6xHGW1ykxeOEYPp2vB40mtcZYqmMTxgdQM2Kjoyt4lcAjVkeYLiDYSavRBaffOR0wvBmAPH_6j5WddvmVczDsya3th2JjGPcfoKXwScks0UsnYNzV8mvOAL1XY/s70/supportmale.png'/></div> <div class='info-chat'> <span class='chat-label'>Destek</span> <span class='chat-nama'>Müşteri Temsilcisi 1</span> </div><span class='my-number'>905555555555</span> </a> <!-- Info Contact End --> <!-- Info Contact Start --> <a class='informasi' href='javascript:void' title='Chat Whatsapp'> <div class='info-avatar'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDM-hneFnGIcPoLOqhVzalsUXVQA-RpT4oKD66K26S-A74rxrhQIL8jVdau33bLoBMA6-SZgX6WXPeGybFBRbO1A8D1wRWAf0b49H5rWq4ijVcDRje7-LO_rX49ev6VUZfK-c8VaiaRQE/s70/supportfemale.png'/></div> <div class='info-chat'> <span class='chat-label'>Satış</span> <span class='chat-nama'>Müşteri Temsilcisi 1</span> </div><span class='my-number'>905555555555</span> </a> <!-- Info Contact End --> <div class='blanter-msg'>Bizi <i> 7/24 </i> arayabilirsiniz<b>+90555 555 555</b></div></div> <div class='start-chat hide'> <div class='first-msg'><span>Merhaba! Nasıl yardımcı olabilirim??</span></div> <div class='blanter-msg'><textarea id='chat-input' placeholder='Bir cevap yazın' maxlength='120' row='1'></textarea> <a href='javascript:void;' id='send-it'>Gönder</a></div></div> <div id='get-number'></div><a class='close-chat' href='javascript:void'>×</a> </div> <a class='blantershow-chat' href='javascript:void' title='Show Chat'><i class='fab fa-whatsapp'></i>Nasıl Yardımcı Olabilirim?</a>
Yukarıdaki kodu kendi iletişim bilgilerinize göre düzenleyebilirsiniz. "905555555555" 90'na dokunmadan telefon numaranız ile değiştirin.
</body> Kodunun hemen üstüne aşağıda vermiş olduğum Javascript kodunu ekleyin. <script type='text/javascript'>
//<![CDATA[
/* Whatsapp Chat Widget by www.idblanter.com */
$(document).on("click","#send-it",function(){var a=document.getElementById("chat-input");if(""!=a.value){var b=$("#get-number").text(),c=document.getElementById("chat-input").value,d="https://web.whatsapp.com/send",e=b,f="&text="+c;if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))var d="whatsapp://send";var g=d+"?phone="+e+f;window.open(g, '_blank')}}),$(document).on("click",".informasi",function(){document.getElementById("get-number").innerHTML=$(this).children(".my-number").text(),$(".start-chat,.get-new").addClass("show").removeClass("hide"),$(".home-chat,.head-home").addClass("hide").removeClass("show"),document.getElementById("get-nama").innerHTML=$(this).children(".info-chat").children(".chat-nama").text(),document.getElementById("get-label").innerHTML=$(this).children(".info-chat").children(".chat-label").text()}),$(document).on("click",".close-chat",function(){$("#whatsapp-chat").addClass("hide").removeClass("show")}),$(document).on("click",".blantershow-chat",function(){$("#whatsapp-chat").addClass("show").removeClass("hide")});
//]]>
</script>
Şablonu Kaydet butonuna basarak işlemimizi tamamlayalım. Şimdi sitenizi kontrol ederek Blogger Whatsapp Sohbet Eklentisinin çalıştığını fark edeceksiniz.
Eklentide simgeler çalışmıyorsa aşağıdaki adımları uygulayın!
Simgeler (icon) gözükmüyorsa, Fontawesome ve jQuery kullanmıyorsunuzdur.</head> Kodunun üstüne aşağıdaki vermişim olduğum kodları ekleyin.
Fontawesome
<link href ='https://use.fontawesome.com/releases/v5.8.2/css/all.css' rel ='stylesheet' type ='text/css'/>
jQuery
<script src ='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'> </script>
Şablonu Kaydet butonuna basarak işlemi sonlandırıyoruz.
Buraya kadar okuduğunuz için teşekkürler. Kurulum aşamasında yaşadığınız problemleri yorum olarak gönderirseniz yardımcı olmaya çalışacağım.