Memasang Chat Admin Dari Chatra Dengan Load OnClick Event

Salah satu widget gratis chat admin yang bisa di pasang di blog adalah widget chat dari Chatra.io dengan pemasangan kode yang mudah dengan asynchronous.

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

Untuk itu saya membuat tutorial untuk memasang chat admin dari Chatra dengan load onClick event sehingga js dari chat ini baru akan terload setelah 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 kemudian klik tombol Sign Up. Kemudian silahkan cek email Anda, akan masuk email dari Chatra yang menyertakan kode widgetnya, silahkan catat kodenya. Biasanya kode widgetnya seperti 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 mendapatkan kode widget kini saatnya memodifikasi widget dengan onclick event.

Silahkan pasangkan kode berikut di atas kode </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 kode yang saya tandai dengan kode widget Anda yang diperoleh dari langkah pertama.

Kemudian silahkan simpan kode css berikut di atas kode </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, sekarang tinggal cek tampilan tombol chat-nya di kanan bawah blog Anda.

Untuk mengelola chat, silahkan login di dashboard Chatra.

Reactions:
Share this with short URL:

You Might Also Like:

Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser