› › › › › › › ›

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

Tuesday, December 25, 2018 Add Comment Edit
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 semoga 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 instruksi </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; dan kalau ternyata di template blog Anda sudah ada kedua js ini, silahkan langkahi step ini. Atau kalau 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 instruksi 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 instruksi 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/AVvXsEi6p-H3KzNrJES_vLxxXr4mYnPn0biijjRKPi6YFEA-HeoVL_ZJT3nllKnipCCWEbAalkYS7jwhmbKH60fdCPiC4OUTkZXy_f_CQpFYjCL27EFVRE3sY8bRfbyfVlhRXpxkO3EGARMPjs8/s1600/placeholder.png' width='auto'/></amp-iframe>
   </div>
   </div>
 </amp-lightbox>

Silahkan ganti instruksi yourchannel dengan channel Anda.


2. Untuk blog Non AMP

Silahkan simpan instruksi 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 instruksi berikut di atas instruksi </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 instruksi 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 semoga widget chat ini dapat terus dikembangkan. Atau Anda dapat berdonasi kalau 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.

0 Response to "Membuat Show Hide Simple Web Chat Dari Tlk.Io Untuk Amp Dan Non Amp"

Post a Comment

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel