Membuat Chat Button Dengan Google+ Hangouts Onclick Event

Ditulis oleh: Adhy Suryadi

Ditulis pada: 10/25/2015

Iseng-iseng mengutak-ngatik Google+ Hangouts button dengan menambahkan ikon chat dengan show hide serta onclick event untuk mengurangi loading dari js Google+, akhirnya jadi juga.

Chatting button ini dibuat melayang di pojong kiri bawah blog yang ketika diklik akan memunculkan Hangouts button dengan me-load js Google+ dengan onclick event serta menambahkan tombol close jika pengunjung urung menggunakan Hangout button.

Dan Hangouts button ini akan otomatis menampilkan email (gmail) admin blog untuk di-invite. Untuk dapat menggunakan ini tentunya pengunjung juga harus memiliki gmail serta akan lebih baik jika komputer dan atau laptopnya dilengkapi dengan kamera, microphone, dan speaker.

Jika Anda ingin mencobanya silahkan gunakan kode-kode di bawah ini.

1. Silahkan simpan kode CSS ini di bawah kode </head>

<style type='text/css'>

/*<![CDATA[*/

#invite:after,.invite-me{color:#555;font-size:12px}

#close_chat,.invite-me{position:absolute;font-weight:700}

#close_chat,#invite:after,.invite-me{font-family:Arial,sans-serif}

.invite_me{position:fixed;bottom:10px;left:10px;height:32px}

#invite{outline:0;display:inline-block;cursor:pointer;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhhypRBZBcOaQo6Mkky2h7vqp9ZRT-zM_kOOX6YteOa2LalRzW2H7TJ86q9qg1ppq1j-mhofrfk-3SS9ULmwgb3gRPHPajqyvhnMYERcXMriausrn4cgU3tIhuuif22P0FA7X7BPHBQbI/s32-no/Hangouts-icon.png)top left no-repeat;width:32px;height:100%;transition:all 400ms ease-in-out;overflow:hidden}

#invite_box,.invite-me{display:none}

#invite:after{content:"Chat Me";margin-left:32px;line-height:32px;font-weight:700}

#invite:hover{width:auto}

.invite-me{background:#dedede;width:260px;height:30px;line-height:30px;padding:0 12px;top:-40px;left:5px;border-radius:2px}

#invite_box:hover .invite-me{display:block}

.invite-me:after{content:"";border-style:solid;border-width:9px 9px 0;border-color:#dedede transparent transparent;position:absolute;left:8px;bottom:-8px}

#close_chat{top:3px;left:145px;display:none;cursor:pointer;font-size:20px}

#___hangout_0{margin-left:5px!important}

/*]]>*/

</style>

2. Simpan kode HTML dan JavaScript ini di atas kode </body>

<div class="invite_me">

    <div id="invite" onclick="loadHangout()">

</div>

    <div id="invite_box">

        <span class="invite-me">Join, invite me and choose "Chat" on left side</span>

<div id="chat-button" class="g-hangout" data-render="createhangout" data-invites="[{ id : 'youremail@gmail.com', invite_type : 'EMAIL' }]"></div>

        </div>

    <div id="close_chat" onclick="closeChatbutton()">&times<div>

</div>

<script>

//<![CDATA[

function loadHangout(){var e=document.getElementById("invite");e.style.display="none";var e=document.getElementById("close_chat");e.style.display="block";var e=document.getElementById("invite_box");e.style.display="block",function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://apis.google.com/js/platform.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()}function closeChatbutton(){var e=document.getElementById("invite");e.style.display="block";var e=document.getElementById("invite_box");e.style.display="none";var e=document.getElementById("close_chat");e.style.display="none"}

//]]>

</script>

Ganti kode youremail@gmail.com dengan alamat gmail Anda.

Perlu diperhatikan:
JS Google+ pada tombol ini di-load dengan onclick event, artinya ketika halaman diakses maka JS Google+ tidak akan ikut di-load. JS akan di-load ketika ikon chat diklik.

Agar penghematan loading js Google+ ini bekerja, tentunya jangan ada widget Google+ lainnya yang digunakan di blog dan pastikan hanya ada js Google+ seperti di dalam script di atas saja. Jika sebelumnya sudah ada di template blog Anda, silahkan hapus js Google+ nya.

JS Google+ itu biasanya seperti di bawah ini.

<script src="https://apis.google.com/js/platform.js" async defer></script>

atau seperti ini

<script type="text/javascript">

  (function() {

    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

    po.src = 'https://apis.google.com/js/platform.js';

    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

  })();

</script>

Dan untuk menghilangkan js Google+ bawaan blogger, silahkan ganti kode </body> dengan &lt;!--</body>--&gt;&lt;/body&gt; namun harap diperhatikan juga, dengan ini akan ada beberapa widget Blogger yang tidak akan bekerja seperti widget stats, arsip, dan beberapa lainnya. Namun jika Anda tidak menggunakan widget-widget tersebut maka Anda bisa menggunakan kode tadi.

Dan di bawah ini bagaimana load js Google+ dengan onclick event. (js baru dimuat ketika ikon diklik)


Untuk demo Chat Button dengan Hangouts ini silahkan coba pada iframe di bawah ini.


Untuk pemilik blog yang memasang chat dengan hangouts button ini, untuk memantau undangan (invite) atau pesan yang masuk silahkan stay tune on Hangouts di halaman ini: https://hangouts.google.com/