Pembaruan Terakhir (26-05-2023)
  • Update script: membuat notifikasi semua komentar di blogger (mode popup)
  • Spesifikasi: src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/user53cm.js'

  • Toast notif disertai Text-to-speech
  • Cukup klik 1 kali maka mode responsif akan aktif (sebelumnya dua kali kik)
  • Sekarang komentar telah di tambahkan beberapa fitur custom segera periksa

Cara membuat live chat via WhatsApp diblogger

views

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

Chat Support

Hallo, Ada yang bisa Kami bantu?
Keindahanmu akan kuabadikan disetiap karyaku.

Posting Komentar

Pergunakanlah kecerdasan anda saat berkomentar, dan tinggalkan komentar sesuai topik tulisan. Komentar dengan link aktif tidak akan ditampilkan.
Masukkan URL Gambar atau URL Video YouTube atau Potongan Kode , atau Quote , lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image video quote pre code
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.