Cara Membuat Widget Chatbox Whatsapp Di Blogger

Widget chatbox whatsapp ini sangat cocok sekali untuk kalian yang memiliki situs toko online atau landing page.

Hallo sobat iwan semua, pada kesempatan kali ini iwan akan membagikan Cara membuat widget chatbox Whatsapp di Blogger.

Widget chatbox whatsapp ini sangat cocok sekali untuk kalian yang memiliki situs toko online atau landing page.

Selain dapat mempercantik tampilan situs, kalian juga akan terkesan lebih professional , dan calon pembeli juga akan mudah saat ingin menghubungi kalian seara langsung.

Widget ini haasil modifikasi saya dari widget yang pernah dibagikan oleh www.wendycode.com. Beberapa modifikasi yang saya buat diantaranya :

Menambah foto profil
menambahkan area input chat dan tombol kirim
Menambahkan jQuery / Javascript untuk fungsi redirect pesan ke Whatsapp

Oke jika kalian ingin membuatnya mari simak caranya berikut ini.

Cara Membuat Widget Chatbox Whatsapp Di Blogger

PENTING : Pastikan template kalian sudah terpasang jQuery, jika belum ada silahkan salin kode di bawah ini dan letakkan dia atas kode </head> atau </head>.

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

Lanjut salin css berikut ini dan letakkan di atas kode </b:skin> atau di atas kode </style>.

/* CSS Chatbox Whatsapp By Jago Desain And Redesign By Iwan Code */
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}

Terakhir salin html dan jQuery di bawah ini dan letakkan di atas 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/AVvXsEhWlJ66LI_Hd8GQNq9_GmF2UL5G3hEvCR6cNJw7-giZTZIYGJqShhdzV2AvmsKFyOHWQzcg2xRB4xPdbCZ0cF-8jMoGXcdEOPelEX_fevd-iv8E7Y0CaaFjdt-H6b-Dfcf1kjRjeNNqdvZRUh6PcstcJO-D8p5txhAYt4R-uxjCRh_WkVE1CZb_u8Q-HDx8/s320/iwan.png' alt="Tedbree Logo"/>
      <div class='chatTitle'>Iwan Code <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 Iwan 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>

Jika sudah silahkan klik simpan dan jangan lupa untuk mengubah nomor Whatsapp kalian, ok jadi sekian Cara Membuat Widget Chatbox Whatsapp Di Blogger semoga bermanfaat, dan seperti biasa Terimakasih.

Referensi
https://www.wendycode.com/2021/05/membuat-widget-chatbox-whatsapp.html

Cara Membuat Widget Chatbox Whatsapp Di Blogger