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/AVvXsEiUN0eeBedPbYyBA9bamW1e1s-vWS_i32JbFCpI4Hc7qWTvJoDyBaU_iuXfu1xZwS1E6Df30OtvWyMeQwuOSL84DK6NWDVIxfb5MwA_HOJ3bIB79TTsyC5M9BfDamWQ7b5m7QQ7LD-1WFo/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.