Skip to main content
KOMPI AJAIB

follow us

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.

You Might Also Like:


Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar