Membuat Show Hide Simple Web Chat Dari Tlk.io Untuk AMP Dan Non AMP

Ditulis oleh: Adhy Suryadi

Ditulis pada: 5/29/2018

Membuat Show Hide Simple Web Chat Dari Tlk.io Untuk AMP Dan Non AMP - Secara sederhana chat atau chatting adalah sebuah komunikasi antara 2 atau lebih orang di internet yang menggunakan media online. Dan widget chat di web atau blog berfungsi sebagai tempat untuk mengobrol semua pengunjung blog.

Dengan widget chat, setiap pengunjung web atau blog bisa saling menyapa, bertanya, menjawab, atau percakapan lainnya sehingga ini menjadikan sebuah alat komunikasi yang membuat suasana web atau blog lebih hidup.

Dan kebetulan saya menemukan sebuah tool chat yang cukup simple dan sangat mudah dalam menggunakannya. Pengguna bisa masuk sebagai anonim dengan sebuah nama atau masuk menggunakan akun Twitter atau Facebook.

Tool chat ini saya temukan dari tlk.io, penggunaannya cukup simple dan tidak perlu mendaftar. Anda hanya perlu membuat channel maka ruang chatting pun telah siap digunakan. Anda tinggal membagikan URL ruang chat Anda ke teman Anda untuk bergabung di dalam ruang chat.

Dan widget chat dari talk.io ini pun bisa di-embed di dalam web atau blog. Untuk itu kini saya buatkan widget chat dari tlk.io ini dengan show hide untuk AMP dan Non AMP dengan mudah.

Yang pertama Anda lakukan adalah memastikan channel Anda bisa dibuat. Silahkan masuk ke tkl.io dan silahkan buat channel Anda lalu klik Join, setelah itu silahkan masuk dengan akun Twitter atau Facebook Anda agar bisa menjadi moderator channel chat Anda.


Setelah channel chat berhasil dibuat dan Anda menjadi moderator, silahkan ikuti langkah di bawah ini untuk memasang widget chat ini di blog Anda.

1. Untuk Blog AMP

Silahkan simpan 2 buah js berikut ini di atas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; dan jika ternyata di template blog Anda sudah ada kedua js ini, silahkan langkahi step ini. Atau jika sudah ada js dari salah satunya, maka silahkan lengkapi dengan js satunya lagi.

<script async="" custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>

<script async="" custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Kemudian silahkan simpan kode HTML berikut untuk ikon chat untuk menampilkan widget chat ini. Silahkan simpan di mana Anda ingin menampilkannya.

<span aria-label='Open Chat' class='open-chat' on='tap:chat-kompi.show,chat-iframe.show,chat-box' role='button' tabindex='0'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M12,23A1,1 0 0,1 11,22V19H7A2,2 0 0,1 5,17V7A2,2 0 0,1 7,5H21A2,2 0 0,1 23,7V17A2,2 0 0,1 21,19H16.9L13.2,22.71C13,22.89 12.76,23 12.5,23H12M13,17V20.08L16.08,17H21V7H7V17H13M3,15H1V3A2,2 0 0,1 3,1H19V3H3V15M9,9H19V11H9V9M9,13H17V15H9V13Z' fill='#333'/></svg></span>

Silahkan simpan CSS berikut di style amp-custom blog AMP Anda.

.chat-box-fixed{background:#fff;position:fixed;top:0;right:0;bottom:0;height:100%;height:100vh;width:300px;padding:0;z-index:999;-webkit-animation-name:slideInRight;animation-name:slideInRight;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;overflow:visible}

.close-chat:active,.close-chat:focus,.open-chat:active,.open-chat:focus{outline:0}

.close-chat{position:absolute;top:0;left:-25px;width:25px;height:25px;line-height:20px;text-align:center;font-size:40px;font-weight:300;color:#fff;cursor:pointer;z-index:2}

.chat-box-fixed amp-iframe{height:100%;height:100vh;width:300px;position:absolute;top:0;left:0;bottom:0}

.lightbox-chat{background:rgba(0,0,0,.3);width:100%;height:100%;position:absolute}

@-webkit-keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}

.open-chat{position:fixed;top:20px;right:20px}

.open-chat svg{vertical-align:middle;cursor:pointer}

.open-chat:hover svg path{fill:#2B0C93;transition:all .4s ease-in-out}

@media screen and (max-width:320px){.chat-box-fixed,.chat-box-fixed amp-iframe{width:280px;}}

Untuk mengatur letak ikon chat silahkan atur pada CSS .open-chat{position:fixed;top:20px;right:20px} yang saya tandai di atas.

Kemudian silahkan simpan kode berikut di atas </body>

<amp-lightbox id='chat-box' layout='nodisplay'>

<div aria-label='Close Chat Box' class='lightbox-chat' on='tap:chat-kompi.hide,chat-iframe.hide,chat-box.close' role='button' tabindex='0'>

<div class='chat-box-fixed' hidden='' id='chat-kompi'>

<div aria-label='Close Chat Box' class='close-chat' on='tap:chat-kompi.hide,chat-iframe.hide,chat-box.close' role='button' tabindex='0'>&amp;times;</div>

<amp-iframe frameborder='0' height='300' hidden='' id='chat-iframe' layout='responsive' noloading='' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' src='https://cdn.rawgit.com/KompiAjaib/chat/master/kompi_tlkchat.html?channel=yourchannel' width='600'>

<amp-img height='100vh' layout='fixed-height' noloading='' placeholder='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6z4YyO1yU6cG07brIFK0pU0Vv8cHUxIdfbF8zq92WEakUCXKJJFbFax6rJRoKJlapKqLOjdcYzdUuvldsDIELcf2Fia0BgPcoZTRila-GojNLfemVfFehAYN4qvkPK_6UgcmSn1P_aFM/s1600/placeholder.png' width='auto'/></amp-iframe>

  </div>

  </div>

</amp-lightbox>

Silahkan ganti kode yourchannel dengan channel Anda.

2. Untuk blog Non AMP

Silahkan simpan kode HTML berikut untuk ikon chat untuk menampilkan widget chat ini. Silahkan simpan di mana Anda ingin menampilkannya.

<span class='open-chat' onclick='loadChatbox()'><svg height='24' viewBox='0 0 24 24' width='24'><path d='M12,23A1,1 0 0,1 11,22V19H7A2,2 0 0,1 5,17V7A2,2 0 0,1 7,5H21A2,2 0 0,1 23,7V17A2,2 0 0,1 21,19H16.9L13.2,22.71C13,22.89 12.76,23 12.5,23H12M13,17V20.08L16.08,17H21V7H7V17H13M3,15H1V3A2,2 0 0,1 3,1H19V3H3V15M9,9H19V11H9V9M9,13H17V15H9V13Z' fill='#333'/></svg></span>

Kemudian silahkan simpan kode berikut di atas kode </body>

<style>

#chat-box,#chat-kompi{display:none}

#chat-box{position:fixed!important;z-index:1000;top:0!important;left:0!important;bottom:0!important;right:0!important}

.chat-box-fixed{background:#fff;position:fixed;top:0;right:0;bottom:0;height:100%;height:100vh;width:300px;padding:0;z-index:999;-webkit-animation-name:slideInRight;animation-name:slideInRight;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;overflow:visible}

.close-chat:active,.close-chat:focus,.open-chat:active,.open-chat:focus{outline:0}

.close-chat{position:absolute;top:0;left:-25px;width:25px;height:25px;line-height:20px;text-align:center;font-size:40px;font-weight:300;color:#fff;cursor:pointer;z-index:2}

.chat-box-fixed iframe{height:100%;height:100vh;width:300px;position:absolute;top:0;left:0;bottom:0}

.lightbox-chat{background:rgba(0,0,0,.3);width:100%;height:100%;position:absolute}

@-webkit-keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}

.open-chat{position:fixed;top:20px;right:20px}

.open-chat svg{vertical-align:middle;cursor:pointer}

.open-chat:hover svg path{fill:#2B0C93;transition:all .4s ease-in-out}

body.flow{overflow:hidden;position:relative;}

@media screen and (max-width:320px){.chat-box-fixed,.chat-box-fixed amp-iframe{width:280px;}}

</style>

<div id='chat-box'>

<div class='lightbox-chat' onclick='document.getElementById(&quot;chat-box&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;chat-kompi&quot;).style.display=&quot;none&quot;;document.body.classList.remove(&quot;flow&quot;)'>

<div class="chat-box-fixed" id="chat-kompi">

<script>

//<![CDATA[

document.write('<div id="chat-kompi-in">')

document.write('<!--<iframe frameborder="0" height="300" id="chat-iframe" src="https://cdn.rawgit.com/KompiAjaib/chat/master/kompi_tlkchat.html?channel=yourchannel" width="600">');

document.write('</iframe>--></div>');

function loadChatbox(){var e=document.getElementById("chat-kompi-in");e.innerHTML=e.innerHTML.replace('<!--','').replace('-->','');var e=document.getElementById("chat-box");e.style.display="block";var e=document.getElementById("chat-kompi");e.style.display="block";var body = document.body;body.classList.add("flow");}

//]]>

</script>

<div class='close-chat' onclick='document.getElementById(&quot;chat-box&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;chat-kompi&quot;).style.display=&quot;none&quot;;document.body.classList.remove(&quot;flow&quot;)'>&amp;times;</div>

  </div>

  </div>

  </div>

Untuk mengatur letak ikon chat silahkan atur pada CSS .open-chat{position:fixed;top:20px;right:20px} yang saya tandai di atas.

Silahkan ganti kode yourchannel dengan channel Anda.

Untuk iframe chat ini sudah menggunakan script untuk menunda pemuatan iframe, jadi jangan khawatir iframe ini tidak akan mengganggu loading blog Anda.


Oh iya, widget chat tlk.io ini tenta saja disediakan gratis, dan Anda bisa menjadi sponsor widget chat yang keren ini agar widget chat ini bisa terus dikembangkan. Atau Anda bisa berdonasi jika menyukai widget chat ini.

Silahkan masuk ke sini untuk menjadi sponsor widget chat tlk.io ini.

UPDATE

Dalam chat, Anda bisa menggunakan smiley. Berikut list smiley yang bisa digunakan di dalam chat ini:

1. :) = happy
2. :D = laugh
3. :( = unhappy
4. :@ = angry
5. :'( = cry
6. :o = surprised
7. ;) = wink
8. :p = tongue
9. :/ = displeased
10. :| = sleep
11. }:) = devil
12. (y) = thumbsup
13. 0:) atau o:) = saint

Dan berikut format tulisan:

1. __bold__
2. _italic_
3. `code`
4. ~~strike~~
5. * list
6. > blockquote
7. --- hr
8. [alt](link)
9. ![alt](image.jpg)

Bagaimana, mudah bukan? Keren juga kan pakai template AMP? Tidak kaku meskipun tidak bisa pakai jquery.

Selamat mencoba dan semoga bermanfaat.