Hello sobat IcloudZer kali ini admin bakalan memberikan informasi mengenai blogger, yaitu dalam membahas bagaimana caranya membuat live chat diblogger dengan tampilan keren pastinya, okay
Info: Baiklah sobat IcloudZer jika kamunya sudah penasaran yuk langsung aja kita bahas bersama sama okay
Live Chat
Fitur live chat ini sangat bagus apabila diterapkan pada blog yang menampilkan rekomendasi barang atau sejenisnya, lebih tepatnya blog jual beli online
Mode Melayang
Tombol live chat via WhatsApp ini memiliki gaya atau mode mengambang, dan tampilannya benar benar responsif pada tampilan mobile
Info: Admin bakalan memberikan contoh tampilannya pada akhir postingan ini oke
Fungsi Live chat
Fungsi dari pada live chat ini adalah untuk menampilkan informasi kontak via WhatsApp, yang diwakili oleh tombol chat, jadi bisa dibilang bahwa fitur ini disebut dengan Tombol live chat diblogger, yang apabila tombolnya itu diklik maka akan membuka suatu tampilan lainnya seperti pada chat WhatsApp pada umumnya, nantinya chat tersebut akan langsung diarahkan keobrolan WhatsApp
Cara pembuatan
Baiklah saatnya admin akan membahas bagaiamana caranya membuat tombol live chat via WhatsApp diblogger, simak dan pelajari artikel ini baik baik agar paham
Kode CSS
Seperti biasanya kamu bisa menyalin kode CSS dibawah ini, kemudian kamu bisa meletakkannya diatas kode ]]><b:skin>
/* Live chat by Icloudice */
.wwc-chat{position:relative;position:fixed!important;z-index:10;bottom:0}
.wwc-chat.js-chat{right:7%}
.wwc-chat i{position:relative;display:inline-block;width:16px;height:16px;line-height:16px;text-align:center}
.c-chat{padding:10px;width:200px;color:#333333;text-align:center;pointer-events:auto;cursor:pointer;background-color:#fff;border-top:4px solid #d71149;border-top-left-radius:4px;border-top-right-radius:4px;box-shadow:0 0 1px 1px #ddd}
.c-chat span {font-size:12px;font-weight:700}
.box{width:350px;height:auto;z-index:999;position:fixed;padding:0;bottom:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column;right:15px;left:auto;top:auto;display:none;overflow:hidden;background:#fff;border-radius:10px;box-shadow:0 0 30px rgba(0,0,0,.3)}
.box .box-chat {width:100%;margin:0;box-shadow:0 0}
.box-chat .title-pesan{display:grid;width:100%;position:relative;background-color:#075e54;color:rgba(255,255,255,.86);padding:15px;grid-template-columns:1fr auto;grid-column-gap:10px;margin:0;font-size:13px;font-weight:400}
.title-pesan .tutup{display:block!important;color:rgba(255,255,255,.5);padding:0 20px!important;cursor:pointer;font-size:30px!important;font-weight:300!important;transition:.2s}
.title-pesan .tutup:hover {color:#fff}
.box .content-box {padding: 15px 40px 15px 15px;min-height: 300px;background-color: #ece5dd;}
.hello:before{content:"";position:absolute;left:-10px;top:0;border-style:solid;border-width:0 10px 14px 0;border-color:transparent #e2fcc6 transparent transparent}
.box .content-box .hello{padding:5px 10px;background-color:#dcf8c6;border:1px solid #cef5af;box-shadow:0 1px 1px rgba(0,0,0,.2);position:relative;border-top-right-radius:3px;border-bottom-left-radius:3px;border-bottom-right-radius:3px}
.wwc-pesan {position:relative}
.wwc-wrap {grid-template-columns: 1fr auto;display: grid;grid-gap: 10px;}
input.pesan {padding: 20px 15px;border: 0;width: 100%;}
.wwc-wrap a.submit.s2 {display: inline-block;padding:10px;background: transparent;font-size:16px;text-align:center;color:#b1b1b1}
.js-chat a.submit{display:block;text-align:center;border:0;width:100%;display:block;background:#25d366;color:#fff;padding:10px 20px;cursor:pointer;border-radius:2px;font-weight:600;font-size:105%;letter-spacing:1px}
a:hover.submit.s2 {color:#666}
.submit.s2 i {display: inline-block;vertical-align: middle;font-size:16px;margin: 0;padding:10px}
.detail_produk {grid-template-columns:auto 1fr;display: grid;grid-gap: 10px;margin:0 0 20px}
input.nama,input.email,textarea.alamat{position:relative;z-index:1;font:400 13px Helvetica Neue,Helvetica,Arial,Cantarell,sans-serif;border:1px solid #eee;padding:10px 15px;border-radius:2px;width:100%;background:transparent}Info: Atau kamu bisa menggunakan tag kode style untuk meletakkan kode CSS tersebut
Kode HTML
Langkah selanjutnya kamu bisa menyalin lagi kode HTML dibawah ini kemudian kamu bisa meletakkannya diatas kode </body>
<a class="buka-btn wwc-chat js-chat" href="#mulai_chat">
<div class="c-chat">
<i class="fa fa-whatsapp">
</i>
<span>
Mulai Chat
</span>
</div>
</a>
<div class="buka box" id="mulai_chat">
<div class="box-chat">
<h3 class="title-pesan">
<span class="title-content">
Tim Support
</span>
<a class="tutup" href="javascript:void(0)">
×
</a>
</h3>
<div class="content-box">
<div class="buka-chat">
<div class="hello">
Hallo, Ada yang bisa Kami bantu?
</div>
</div>
</div>
<div class="form js-chat">
<div class="wwc-wrap">
<label class="item">
<input class="pesan wajib" placeholder="Tulis pesan Anda disini lalu tekan enter.." type="text"/>
</label>
<a class="item submit s2">
<i class="fa fa-paper-plane">
</i>
</a>
</div>
</div>
</div>
</div>Info: Kode diatas berfungsi untuk menampilkan tombol chatnya okay
Kode Javascript
Langkah selanjutnya adalah kamu bisa menyalin kode javascript dibawah ini kemudian kamu bisa meletakkannya diatas kode </body>
<script type="text/javascript">
//<![CDATA[
/*! jQuery replaceText by "Cowboy" Ben Alman | v1.1.0 - http://benalman.com/projects/jquery-replacetext-plugin/ */
$(document).on("keypress",".js-chat input, .js-chat textarea",function(){if(event.keyCode===13){$(this).parents(".wwc-chat").find(".submit").trigger("click")}});$(document).on("click",".js-chat .submit",function(){whatsApp($(this).parents(".buka").attr("id"));return false});function whatsApp(l){var b=true;$("#"+l+" .wajib").each(function(){if($.trim($(this).val())==""$.trim($(this).val())=="default"){$(this).addClass("focus")}});$("#"+l+" .wajib").each(function(){if($.trim($(this).val())==""){b=false;$(this).parents("label").find(".validasi").addClass("show");$(this).focus();return false}else{if($.trim($(this).val())=="default"){b=false;$(this).parents("label").find(".validasi").addClass("show");return false}}});if(b===true){var d="";var s="https://web.whatsapp.com/send";if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){s="whatsapp://send"}if(l=="mulai_chat"){var e=nameSeller,o=textMessage,p=62,g=nomorWhatsapp,j=$("#"+l+" .pesan").val();var d=s+"?phone="+p+g+"&text="+o+" "+e+".. "+j+"%0A%0ADikirim dari "+location.href}else{if(l=="pembelian_whatsapp"){var e=nameSeller,o=textMessage,p=62,g=nomorWhatsapp,n=$(".name_detail").text(),a=$("#"+l+" .nama").val(),m=$("#"+l+" .email").val(),t=$("#"+l+" .jumlah").val(),q=$("#"+l+" .alamat").val();var d=s+"?phone="+p+g+"&text="+o+" "+e+", saya mau pesan *"+n+".*%0A%0A// Data Pembeli //%0A%0A*Nama* : "+a+"%0A*Email*: "+m+"%0A*Alamat* : "+q+"%0A%0ADikirim dari "+location.href}else{alert("id tidak ditemukan")}}$(this).attr("href",d);var k=960,r=540,c=Number((screen.width/2)-(k/2)),i=Number((screen.height/2)-(r/2)),f=window.open(this.href,"","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=1, copyhistory=no, width="+k+", height="+r+", top="+i+", left="+c);f.focus();return false}}$(document).on("click",".popWin",function(){var c=$(this).attr("href"),a=$(this).attr("data-popWidth"),b=$(this).attr("data-popHeight");if(a==null){a=960}if(b==null){b=540}left=Number((screen.width/2)-(a/2)),tops=Number((screen.height/2)-(b/2)),popupWindow=window.open(c,"","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=1, copyhistory=no, width="+a+", height="+b+", top="+tops+", left="+left);popupWindow.focus();return false});function resizeHeaderOnScroll(){const b=window.pageYOffsetdocument.documentElement.scrollTop,a=100,c=document.getElementById("newbar");if(b>a){c.classList.add("sticky")}else{c.classList.remove("sticky")}}window.addEventListener("scroll",resizeHeaderOnScroll);$(".buka-btn, .wwc-chat, .add-chat").on("click",function(){$("body").addClass("hideScroll");var e=$(this).attr("data-title");var d=$(this).attr("href");$(d).addClass("open");$(d).find(".title-content").html(e);if($(this).attr("data-img")!=null){var a=$(this).attr("data-img");$(d).find(".content img").show();$(d).find(".content img").attr("src",a)}if($(this).attr("data-width")!=null){var b=$(this).attr("data-width");$(d).find(".wrap").attr("style","max-width:"+b+"px!important;")}if($(this).attr("data-tooltip")!=null){var c=$(this).attr("data-tooltip");$(d).find(".buka-wrap").show();$(d).find(".buka-wrap").html(c)}});$(".buka .tutup").on("click",function(){$("body").removeClass("hideScroll");$(this).parents(".buka").removeClass("open")});$(document).keyup(function(a){if(a.key==="Escape"){$(".buka .tutup").trigger("click")}});$(".menu-desktop, .closeLabel, .label-button, .label-dropdown .utama").click(function(){$(".label-dropdown .Label").toggle()});$(".menu-link").click(function(){$(".menu-dropdown .LinkList").toggle();$(".label-dropdown .Label").hide();$(".menu-link").find("svg.menu-mobile").toggleClass("pro.menu-mobile");$(".menu-link").find("svg.menu-mobile-close").toggleClass(".menu-mobile-close");$(".close-menu").fadeToggle()});$(".close-menu").click(function(){$(".label-dropdown .Label").hide();$(".menu-link").find("svg.menu-mobile-close").removeClass(".menu-mobile-close");$(".menu-link").find("svg.menu-mobile").addClass("pro.menu-mobile");$(".close-menu").fadeOut()});$(".search-button").click(function(){$(".header-search").show();$(".header-search form .text").focus()});$(".header-search form svg.back").click(function(){$(".header-search").hide();$(".header-search form .text").blur()});$(".search-form").click(function(){if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Nokia|IEMobile|Opera Mini/i.test(navigator.userAgent)){$(".header-search form svg.back").trigger("click")}$(".header-search form svg.delete-icon").trigger("click")});$(document).on("keyup",".header-search form .text",function(){if(event.keyCode===13){if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Nokia|IEMobile|Opera Mini/i.test(navigator.userAgent)){$(".header-search form svg.back").trigger("click")}else{$(".search-form").hide()}}});$(".header-search form .text").keyup(function(){if($(this).val()!=""){$(".search-form").show();$(".header-search form svg.delete-icon").show()}else{$(".search-form").hide();$(".header-search form svg.delete-icon").hide()}});$(".header-search form svg.delete-icon").click(function(){$(".search-form").hide();$(".header-search form svg.delete-icon").hide();$(".header-search form .text").val("")});if(sessionStorage.getItem("ss_notif")==null){$(".menu-notif span").fadeIn()}$(".menu-notif").click(function(){$(".menu-notif span").hide();sessionStorage.setItem("ss_notif",false)});if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Nokia|IEMobile|Opera Mini/i.test(navigator.userAgent)){$("a").each(function(){var a=$(this).attr("href")+"?m=1";var b=$(this).attr("href")+"&m=1";if(a==window.location||b==window.location){$(this).addClass("active")}})}else{$("a").each(function(){var a=$(this).attr("href");if(a==window.location){$(this).addClass("active")}})}$("textarea.code").each(function(){var b=$(this).val(),a=b.replace(/<br\s?\/?>/g,"");$(this).val(a);$(this).on("click",function(){$(this).select()});$(this).attr("readonly","readonly")});
(function(a){a.fn.replaceText=function(d,e,f){return this.each(function(){var c=this.firstChild,b,h,i=[];if(c){do{if(c.nodeType===3){b=c.nodeValue;h=b.replace(d,e);if(h!==b){if(!f&&/</.test(h)){a(c).before(h);i.push(c)}else{c.nodeValue=h}}}}while(c=c.nextSibling)}i.length&&a(i).remove()})}})(jQuery);function createCookie(j,i,h){if(h){var f=new Date();f.setTime(f.getTime()+(h*24*60*60*1000));var g="; expires="+f.toGMTString()}else{var g=""}document.cookie=j+"="+i+g+"; path=/"}function readCookie(c){var i=c+"=";var g=document.cookie.split(";");for(var j=0;j<g.length;j++){var h=g[j];while(h.charAt(0)==" "){h=h.substring(1,h.length)}if(h.indexOf(i)==0){return h.substring(i.length,h.length)}}return null}function eraseCookie(b){createCookie(b,"",-1)}$(function(){$("").click(function(){$("html, body").animate({scrollTop:0},"slow");return false})});$(document).ready(function(a){a("a.cart-btn").click(function(){a(".cart-box").slideToggle("fast");a(this).toggleClass("active");return false});a(".menu").superfish({speed:"fast",speedOut:"fast",})});jQuery('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter(".quantity input"),jQuery(".quantity").each(function(){var f=jQuery(this),c=f.find('input[type="number"]'),b=f.find(".quantity-up"),j=f.find(".quantity-down"),h=c.attr("min"),g=c.attr("max");b.click(function(){var d=parseFloat(c.val());if(d>=g){var e=d}else{var e=d+1}f.find("input").val(e),f.find("input").trigger("change")}),j.click(function(){var d=parseFloat(c.val());if(h>=d){var e=d}else{var e=d-1}f.find("input").val(e),f.find("input").trigger("change")})});$(function(){$(".separator:first").remove(),$(".post-body > img:first").remove()});
//]]>
</script>Info: Kode javascript diatas harus kamu pasang atau tombol live chat nya tidak akan berfungsi
Kode Javascript 2
Terus langkah selanjutnya adalah kamu bisa menyalin lagi kode javascript dibawah ini, kemudian kamu bisa meletakkannya diatas kode <head>
<script type="text/javascript">
//<![CDATA[
// Global variables with content. "Available for Edit"
var monthFormat = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
noThumbnail = "/",
paymentOption = "PayPal",
paypalMail = "angkasaraya455@gmail.com",
currencyOption = "USD",
textMessage = "Assallamualaikum",
nameSeller = "Mr",
nomorWhatsapp = "085834306926" ;
//]]>
</script>Info: Kamu bisa mengubah data data diatas yang menurut kamu perlu untuk diubah
Kode Javascript 3
Langkah selanjutnya adalah kamu bisa menyalin lagi kode javascript dibawah ini kemudian kamu bisa meletakkannya dibawah kode <body>
<script type="text/javascript">
//<![CDATA[
var paypalMail = "angkasaraya455@gmail.com";
var paymentOption = "PayPal";
var currencyOption = "IDR";
var textMessage = "Assallamualaikum";
var nameSeller = "Kaka Admin";
var nomorWhatsapp = "085834306926";
//]]>
</script>Info: Kode javascript diatas harus kamu pasang okay, dan kamu bisa mengubah data diatas yang menurut kamu pantas diubah okay
Contoh Tampilan
Baiklah jika kamu penasaran dengan contoh tampilan dari tombol live chatnya kamu bisa melihat contoh live chatnya seperti yang admin gunakan sekarang ini, menggunakan tombol berikut ini
Info: Bagaimana sobat IcloudZer keren bukan
