Membuat Web Chat Dengan Show Hide Dari Tlk.io Pada Blog AMP HTML

Membuat Web Chat Dengan Show Hide Dari Tlk.io Pada Blog AMP HTML - Selamat malam sobat blogger, pada malam ini saya akan mencoba posting seperti pada judul di atas, yaitu Membuat Web Chat Dengan Show Hide Dari Tlk.io Pada Blog AMP HTML.

Widget chat pada web atau blog berfungsi sebagai tempat untuk mengobrol semua pengunjung blog, dan widget chat ini sangat simple dan mudah untuk menggunakannya. Pengguna bisa masuk sebagai anonim dengan sebuah nama atau masuk menggunakan akun Twitter atau Facebook.

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

Untuk menggunakan chat dari Tlk.io ini Anda tidak perlu mendaftar. Anda hanya perlu membuat channel maka ruang chatting pun sudah bisa digunakan. Anda tinggal membagikan URL ruang chat Anda ke teman Anda agar bergabung di dalam ruang chat.

Agar bisa menggunakan chat ini, Anda harus membuat channel Anda terlebih dahulu. Silahkan Anda 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.

Kemudian, setelah berhasil membuat channel chat dan Anda sudah menjadi moderator, mari ikuti langkah berikut ini untuk memasang widget chat ini pada blog Anda.

Langkah Pertama.

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 agar sesuai dengan keinginan Anda, silahkan atur pada CSS .open-chat{position:fixed;top:20px;right:20px} yang saya marking di atas.

Langkah Kedua.

Silahkan simpan 2 buah kode js berikut ini di atas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; Jika pada template blog Anda sudah ada kedua js ini, silahkan lewati langkah ini. Atau jika sudah ada js dari salah satunya, maka silahkan lengkapi dengan js satunya lagi agar chat ini dapat berjalan.

<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>

Langkah Ketiga.

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/AVvXsEiip9W9njfX7yUF-aUcyVV1s9CmGP-OcSmh22Dncd0kCMbH9SQ3Kr5A9dtcFTEfyRHSmrHKhKgBNm35KqRmIr0hYmFGbyF5RU04qCvuvbDcgr4QXuOG-xdibJi4GObYaezgdfd1E76QrPI/s1600/placeholder.png' width='auto'/></amp-iframe>

  </div>
  </div>
</amp-lightbox>

Jangan lupa ganti kode yourchannel dengan channel chat Anda.

Langkah Keempat.

Kemudian silahkan simpan kode HTML berikut untuk untuk menampilkan ikon dan 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>

Sumber: https://www.kompiajaib.com/2018/05/membuat-show-hide-simple-web-chat-dari.html