Membuat Show Hide Simple Web Chat Dari Tlk.Io Untuk Amp Dan Non Amp

Tool chat ini saya temukan dari tlk.io, penggunaannya cukup simple dan tidak perlu mendaftar. Anda hanya perlu menciptakan 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 dapat di-embed di dalam web atau blog. Untuk itu sekarang saya buatkan widget chat dari tlk.io ini dengan show hide untuk AMP dan Non AMP dengan mudah.

Yang pertama Anda lakukan ialah memastikan channel Anda dapat dibuat. Silahkan masuk ke tkl.io dan silahkan buat channel Anda kemudian klik Join, sehabis itu silahkan masuk dengan akun Twitter atau Facebook Anda biar dapat menjadi moderator channel chat Anda.

Setelah channel chat berhasil dibentuk 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 arahan </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; dan jikalau ternyata di template blog Anda sudah ada kedua js ini, silahkan langkahi step ini. Atau jikalau 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 arahan 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 arahan 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/AVvXsEi5dYUW2tyX2HSay3s7g7YpHWFRc-TEVpeEaIjgMJZ7doQO8UHLJ28iW-rza9ZDxKUzg9UQ1hexTKlVzzJPUYStvg2F7MxU4FX4bnrh9wF22VrNxfW4PG1cJGE2AI7upppNj92RjGcyWt4/s1600/placeholder.png' width='auto'/></amp-iframe>
   </div>
   </div>
 </amp-lightbox>

Silahkan ganti arahan yourchannel dengan channel Anda.

2. Untuk blog Non AMP

Silahkan simpan arahan 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 arahan berikut di atas arahan </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 arahan yourchannel dengan channel Anda.

Untuk iframe chat ini sudah memakai 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 dapat menjadi sponsor widget chat yang keren ini biar widget chat ini dapat terus dikembangkan. Atau Anda dapat berdonasi jikalau menyukai widget chat ini.

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

UPDATE

Dalam chat, Anda dapat memakai smiley. Berikut list smiley yang dapat dipakai 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, gampang bukan? Keren juga kan pakai template AMP? Tidak kaku meskipun tidak dapat pakai jquery.

Selamat mencoba dan semoga bermanfaat.


Sumber https://www.kompiajaib.com/

Share this post