Memasang Chat Admin Dari Chatra Dengan Load Onclick Event

Salah satu widget gratis chat admin yang dapat di pasang di blog yakni widget chat dari Chatra.io dengan pemasangan aba-aba yang gampang dengan asynchronous.

Namun bagi Anda yang benar-benar peduli dengan loading blog, tetap saja asynchronous masih mengganjal.

Untuk itu aku menciptakan tutorial untuk memasang chat admin dari Chatra dengan load onClick event sehingga js dari chat ini gres akan terload sesudah tombol chat admin diklik sehingga benar-benar tidak mengganggu loading blog.

Untuk demonya silahkan coba chat admin pada JsFiddle berikut:


Jika Anda tertarik untuk mencobanya silahkan ikuti langkah-langkahnya di bawah ini.

1. Daftar Widget Chatra

Silahkan daftar/signup widget Chatra di https://chatra.io/ dengan memasukan email Anda lalu klik tombol Sign Up. Kemudian silahkan cek email Anda, akan masuk email dari Chatra yang menyertakan aba-aba widgetnya, silahkan catat kodenya. Biasanya aba-aba widgetnya menyerupai berikut:

 <!-- Chatra {literal} -->
 <script>
     (function(d, w, c) {
         w.ChatraID = '123456789abcdefgh';
         var s = d.createElement('script');
         w[c] = w[c] || function() {
             (w[c].q = w[c].q || []).push(arguments);
         };
         s.async = true;
         s.src = (d.location.protocol === 'https:' ? 'https:': 'http:')
         + '//call.chatra.io/chatra.js';
         if (d.head) d.head.appendChild(s);
     })(document, window, 'Chatra');
 </script>
 <!-- /Chatra {/literal} -->

2. Memodifikasi Widget Dengan OnClick Event

Setelah mendapat aba-aba widget kini saatnya memodifikasi widget dengan onclick event.

Silahkan pasangkan aba-aba berikut di atas aba-aba </body>

 <a class="chat-admin" id="chatadmin" href="javascript:void" onclick="loadHangout()">
   <svg viewBox="0 0 24 24">
     <path fill="#3d3c3f" d="M17,11H15V9H17M13,11H11V9H13M9,11H7V9H9M20,2H4A2,2 0 0,0 2,4V22L6,18H20A2,2 0 0,0 22,16V4C22,2.89 21.1,2 20,2Z" />
   </svg> Chat with Admin</a>
 <!-- Chatra {literal} -->
 <script>
 //<![CDATA[
   function loadHangout() {
     var e = document.getElementById("chatadmin");
     e.style.display = "none";
     (function(d, w, c) {
       w.ChatraID = '78JGd5pfweyaftdtz';
       var s = d.createElement('script');
       w[c] = w[c] || function() {
         (w[c].q = w[c].q || []).push(arguments);
       };
       s.async = true;
       s.src = (d.location.protocol === 'https:' ? 'https:' : 'http:') + '//call.chatra.io/chatra.js';
       if (d.head) d.head.appendChild(s);
     })(document, window, 'Chatra');
   }
   //]]>
 </script>
 <!-- /Chatra {/literal} -->

Ganti aba-aba yang aku tandai dengan aba-aba widget Anda yang diperoleh dari langkah pertama.

Kemudian silahkan simpan aba-aba css berikut di atas aba-aba </head>

 <style>
 .chat-admin {
   position: fixed;
   bottom: 0;
   right: 25px;
   height: 35px;
   line-height: 35px;
   padding: 0 20px;
   border-radius: 6px 6px 0 0;
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
   background-color: #fdfcff;
   overflow: hidden;
   font-size: 16px;
   color: #3d3c3f;
   text-decoration: none;
   z-index: 9999;
 }
 .chat-admin svg {
   width: 18px;
   height: 18px;
   vertical-align: middle;
 }
 </style>

Selesai, kini tinggal cek tampilan tombol chat-nya di kanan bawah blog Anda.

Untuk mengelola chat, silahkan login di dashboard Chatra.


Sumber https://www.kompiajaib.com/

Share this post