Cara Membuat Widget Chatbox Whatsapp di Blog

Sebenarnya widget chat whatsapp ini bersifat optional, sebagian dari pengguna menyembunyikan whatsappnya dengan alasan privacy dan sebagian lagi ingi

Please wait 0 seconds...

Scroll Down and click on Go to Link for destination

Congrats! Link is Generated

Sebenarnya widget chat whatsapp ini bersifat optional, sebagian dari pengguna menyembunyikan whatsappnya dengan alasan privacy dan sebagian lagi ingin membagikan whatsappnya karena blog atau web yang di kelola bersifat bisnis.

Oleh karena itu saya akan membagikan tutorial tentang cara membuat widget chatbox whatsapp di blog barangkali teman - teman blogger membutuhkan widget ini. Kelebihan dari widget ini salah satunya bisa di kostumisasi dengan mudah bahkan pemula sekalipun.

Widget ini sangat cocok buat kalian yang memiliki blog toko online karena selain terkesan lebih profesional dengan menggunakan widget chatbox whatsapp ini dapat mempercantik blog kalian, tapi fungsi utamanya adalah user bisa berkominkasi langsung dengan admin blog melalui whatsapp.

Untuk melihat demonya silahkan klik tombol demo di bawah ini dan lihat di bagian sebelah kiri bagian bawah

Cara Membuat Widget Chatbox Whatsapp di Blog

Sebelum lanjut ke tutorial pastikan template kalian sudah terpasang Jquery dan jika template kalian belum terpasang jQuery silahkan salin kode di bawah ini dan letakan teapt di atas kode </head> atau </head>

<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

Sekarang kita akan lanjut ke tutorialnya
Salin kode CSS dibawah ini dan letakan diatas kode ]]></b:skin>

/* CSS Chatbox Whatsapp By Jago Desain And Redesign By telatngoding.com */
svg{width:22px;height:22px;vertical-align:middle;fill:#fff}
.chatMenu,.chatButton .svg-2{display:none}

a#send-it{color:#555;width:55px;margin:5px;font-weight:700;padding:10px;background:#f0f5fb;border-radius:15px 3px 15px 15px;text-decoration:none}
a#send-it:hover{opacity:.8}
.chatStart input[type="text"]{padding:10px;margin:0;width:80%;border:none;color:#555}
.chatStart input[type="text"]:focus{outline:none}
.chatMenu{display:none}
.chatButton{position:fixed;background-color:#f89000;bottom:20px;right:20px;border-radius:50px;z-index:20;overflow:hidden;display:flex;align-items:center;justify-content:center;width:50px;height:50px;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}
.chatButton svg{margin:auto;fill:#fff}
.chatButton svg.svg-2{display:none}
  
.chatBox{position:fixed;bottom:70px;right:20px;width:320px;-webkit-transition:all .2s ease-out;transition:all .2s ease-out;
z-index:21;opacity:0;visibility:hidden;line-height:normal}
.chatContent{border-radius:15px;background-color:#fff;box-shadow:0 5px 15px 0 rgba(0,0,0,.05);overflow:hidden}
.chatHeader{position:relative;display:flex;align-items:center;padding:15px 20px;background-color:#f89000;overflow:hidden}
.chatHeader img{border-radius:100%;width:50px;float:left;margin: -2px 10px 0 0;}
.chatHeader .chatTitle{padding-left:16px;font-size:14px;font-weight:700;color:#fff}
.chatHeader .chatTitle span{font-size:11.5px;display:block;line-height:1.58em}
.chatHeader:before{content:"";bottom:14;right:0;width:12px;height:12px;box-sizing:border-box;background-color:#4dc247;display:block;position:absolute;z-index:10;border-radius:100%;border:2px solid #f89000;left:55px}
  
.chatText{display:flex;flex-wrap:wrap;margin:25px 20px;font-size:12px;color:#505050}
.chatText span{display:inline-block;margin-right:auto;padding:10px 10px 10px 20px;background-color:#f0f5fb;border-radius:3px 15px 15px}
.chatText span:after{content:'Baru Saja';margin-left:15px;font-size:9px;color:#989b9f}
.chatText span.typing{margin:15px 0 0 auto;padding:10px 20px 10px 10px;border-radius:15px 3px 15px 15px}
.chatText span.typing:after{display:none}
  
.chatBox .chatStart{display:flex;align-items:center;margin-top:15px;padding:18px 20px;border-radius:10px;background-color:#fff;overflow:hidden;font-size:12px;color:#505050}
.chatMenu:checked + .chatButton{-webkit-transform: rotate(360deg);transform: rotate(360deg)}
.chatMenu:checked + .chatButton svg.svg-1{display:none}
.chatMenu:checked + .chatButton svg.svg-2{display:block}
.chatMenu:checked ~ .chatBox{bottom:90px;opacity:1;visibility:visible}

Lanjut Salin kode dibawah ini dan letakan tepat diatas kode </body> atau </body>

<input class='chatMenu hidden' id='offchatMenu' type='checkbox'/>
<label class='chatButton' for='offchatMenu'>
  <svg class='svg-1' viewBox='0 0 32 32'><g><path d='M16,2A13,13,0,0,0,8,25.23V29a1,1,0,0,0,.51.87A1,1,0,0,0,9,30a1,1,0,0,0,.51-.14l3.65-2.19A12.64,12.64,0,0,0,16,28,13,13,0,0,0,16,2Zm0,24a11.13,11.13,0,0,1-2.76-.36,1,1,0,0,0-.76.11L10,27.23v-2.5a1,1,0,0,0-.42-.81A11,11,0,1,1,16,26Z'></path><path d='M19.86,15.18a1.9,1.9,0,0,0-2.64,0l-.09.09-1.4-1.4.09-.09a1.86,1.86,0,0,0,0-2.64L14.23,9.55a1.9,1.9,0,0,0-2.64,0l-.8.79a3.56,3.56,0,0,0-.5,3.76,10.64,10.64,0,0,0,2.62,4A8.7,8.7,0,0,0,18.56,21a2.92,2.92,0,0,0,2.1-.79l.79-.8a1.86,1.86,0,0,0,0-2.64Zm-.62,3.61c-.57.58-2.78,0-4.92-2.11a8.88,8.88,0,0,1-2.13-3.21c-.26-.79-.25-1.44,0-1.71l.7-.7,1.4,1.4-.7.7a1,1,0,0,0,0,1.41l2.82,2.82a1,1,0,0,0,1.41,0l.7-.7,1.4,1.4Z'></path></g></svg>
  <svg class='svg-2' viewBox='0 0 512 512'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'></path></svg>
</label>

<div class='chatBox'>
  <div class='chatContent'>
    <div class='chatHeader'>
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCoSdjx4pbup6vtbcV-Y_03ErsaEIXZsyXyFitGGLopZVTiIBLjEpZ95byaILFSWYIEOclVsjKQo5Li_TcNldxZrEXD9nLawZot5enP9Ujh4TR4_JSz4-wRn4Pw7gCXeZMdAjNWT5xD3Qr/s320/wendy+code.jpg' alt="Tedbree Logo"/>
      <div class='chatTitle'>Telatngoding.com <span>Biasanya membalas dalam satu jam</span></div>
    </div>
    <div class='chatText'>
      <span>Halo, Ada yang bisa kami bantu?</span>
      <span class='typing'>...</span>
    </div>
  </div>
  <div class='chatStart'><input type='text' id='chatInput' placeholder='ketikan pesan di sini'/>
   <a href='javascript:void;' id='send-it'>Kirim</a>
  </div>
  </div>
  
  <script>
//<![CDATA[
//jQuery Widget Chat Box Whatsapp By Wendy Code
$('#send-it').click(whatsappchat);

function whatsappchat() {
    /* Pengaturan Whatsapp */
    var walink = 'https://web.whatsapp.com/send',
        phone = '6281311xxxxxx'; // No Whatsapp Kalian
    /* Dukungan Smartphone */
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        var walink = 'whatsapp://send';
    }
    var inputChat = $('#chatInput').val(), //Mengambil Input Pesan User
        input_viaUrl = location.href; //Mengambil Url saat ini
    var wendy_whatsapp = walink + '?phone=' + phone + '&text=' + inputChat + '%0A%0A' + 'Di kirim via : ' + input_viaUrl;
    /* Buka Jendela Whatsapp  */
    window.open(wendy_whatsapp, '_blank');
    window.location.href = input_viaUrl; //Segarkan Halaman Setelah Terkirim
}
///]]>
</script>

Simpan tema kalian dan selesai.

Keterangan
Rubah yang saya tandai dengan warna kuning dengan no Whatsapp kalian.

Seperti itulah tutorial singkat tentang Cara Membuat Widget Chatbox Whatsapp di Blog, jika ada yang di pertanyakan silahkan bertanya melalui kolom komentar di bawah postingan ini. Semoga bermanfaat dan terimakasih sudah berkunjung.

Baca juga :

About the Author

someone who really likes writing articles and various info to you and hopefully useful

Salin

Posting Komentar

Posting Komentar