Ditulis oleh: Ditulis pada: 12/14/2018
Cara Embed Chatango Pada Blog AMP HTML - Ternyata sampai saat ini Chatango masih menjadi chat box yang populer di kalangan blogger. Terlihat dari masih banyaknya blog yang menggunakan Chatango sebagai ruang chating bagi para pengunjung blog.Lantas bagaimana dengan blog AMP? Apakah blog AMP memungkinkan untuk embed Chatango?
Seperti kita ketahui bahwa pada AMP HTML tidak boleh menyimpan script seperti kode embed Chatango.
Untungnya Chatango tidak memerlukan verifikasi domain, jadi kita bisa menyimpan atau meng-hosting kode embed Chatango di tempat lain dan meng-embed Chatango di AMP dengan amp-iframe.
Jika Anda ingin mencoba embed Chatango pada blog AMP Anda, silahkan ikuti langkah-langkahnya berikut ini.
Yang pertama dilakukan adalah silahkan buat chat group Chatango pada akun Chatango Anda. Untuk Embed as silahkan pilih Box dan hilangkan centang pada Full width ticker on mobile. Untuk Size silahkan pilih Responsive.
Untuk warna dan lainnya silahkan sesuaikan dengan selera Anda. Kemudian silahkan copy kode embed-nya dan simpan di notepad.
Selanjutnya silahkan buat file *.html (misalnya chatbox.html) dan gunakan kode berikut ini.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chat Box</title>
<style>
body{
margin:0;
padding:0;
}
.box{
width:100%;
height:100vh;
overflow:hidden;
}
</style>
</head>
<body>
<div class="box">
<!-- KODE EMBED CHATANGO SIMPAN DI BAWAH INI -->
</div>
</body>
</html>
Kemudian silahkan hosting file html yang Anda buat, bisa menggunakan Github untuk hosting file html.
Kemudian silahkan embed file html untuk chatbox yang dibuat tadi di blog AMP Anda dengan menggunakan kode berikut, Anda bisa menyimpannya di sidebar.
<amp-iframe frameborder='0' height='450' layout='fixed-height' noloading='' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' src='URL HOSTING FILE HTML DI SINI'>
<amp-img height='450' layout='fixed-height' noloading='' placeholder='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKYm78sfM6DtxFmvJ7e2sMtEt4jY5TruItGRqluFFCHROU5I0Q8qgjZgpvs8qN7mMkTWuZfxOITAGwl-4_VZ5nKUce3LDWKgCL-oUPW7rxF9YjQ1z5Hi4sCBiv8gCD3AHGsRBqZkIpato/s1600/back-iframe.png"' width='auto'/></amp-img></amp-iframe>
Silahkan ganti
URL HOSTING FILE HTML DI SINI dengan URL file html chatbox yang Anda hosting di Github tadi. Untuk height='450' silahkan sesuaikan dengan selera Anda.dan pastikan di blog Anda sudah menggunakan amp-iframe js seperti berikut.
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'></script>
Berikut demo untuk embed Chatango di blog AMP.
Semoga bermanfaat.