Ditulis oleh: Ditulis pada: 10/25/2017
Setelah sebelumnya kita memasang chat admin dari Chatra dengan load onClick event untuk blog non AMP, sekarang kita akan memasangkan chat admin dari Chatra ini pada blog AMP HTML.
Untuk memasangkan chat admin dari Chatra di blog AMP HTML ini memerlukan trik agar widgetnya bisa tampil.
Untuk itu seharian saya mencoba mencari cara agar widget chat ini bisa digunakan di blog AMP dengan mudah.
Dan akhirnya bisa juga digunakan pada blog AMP dengan menggunakan amp-iframe dan show hide widget agar iframe-nya tidak mengganggu.
Silahkan coba demonya di JSFiddle di bawah ini yang saya buat menggunakan AMP HTML.
Jika Anda ingin mencobanya, silahkan ikuti langkah-langkahnya berikut ini.
Daftar Widget Chatra
Silahkan daftar/signup widget Chatra di https://chatra.io/ dengan memasukan email Anda kemudian klik tombol Sign Up. Kemudian silahkan cek email Anda, akan masuk email dari Chatra yang menyertakan kode widgetnya, silahkan catat kodenya. Biasanya kode widgetnya seperti berikut:
<!-- Chatra {literal} -->
<script>
(function(d, w, c) {
w.ChatraID = '123456789abcdefgh';
var s = d.createElement('script');
w[c] = w[c] || function() {
(w[c].q = w[c].q || []).push(arguments);
};
s.async = true;
s.src = (d.location.protocol === 'https:' ? 'https:': 'http:')
+ '//call.chatra.io/chatra.js';
if (d.head) d.head.appendChild(s);
})(document, window, 'Chatra');
</script>
<!-- /Chatra {/literal} -->
Nah yang kita perlukan adalah ChatraID-nya (yang saya tandai), silahkan catat kode tersebut.
Memasang Widget Di Blog AMP
Kemudian silahkan simpan css style berikut di style amp-custom blog Anda.
.chatra_plugin{position:fixed;bottom:0;right:10px;width:calc(100% - 10px);max-width:380px;height:auto;z-index:9999;-webkit-animation-name:chatraInUp;animation-name:chatraInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
@-webkit-keyframes chatraInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes chatraInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
.open_chatra{position:fixed;bottom:0;right:0;cursor:pointer;width:44px;height:44px}
.close_chatra{position:fixed;bottom:0;right:0;cursor:pointer;width:34px;height:34px}
.open_chatra:hover .popover{display:block;}
.open_chatra .popover{position:absolute;top:-60px;right:5px;z-index:1060;display:none;width:276px;padding:5px 10px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:1.42857143;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);line-break:auto;}
.open_chatra .popover p{margin:0;padding:0}
.open_chatra .popover:before{bottom:-19px;right:10px;content:" ";border-top-color:#fff;border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-bottom-width:0;border-width:10px;position:absolute;width:0;height:0;border-style:solid;z-index:2}
.open_chatra .popover:after{bottom:-20px;right:10px;content:" ";border-top-color:#999;border-left-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-bottom-width:0;border-width:10px;position:absolute;width:0;height:0;border-style:solid;z-index:1}
.open_chatra svg,.close_chatra svg{width:34px;height:34px}
.close_chatra{z-index:10000}
.open_chatra svg path,.close_chatra svg path{fill:#888}
Kemudian silahkan simpan kode berikut di atas kode </body>
<div class='open_chatra' id='open_chatra' on="tap:chatra_plugin.show,open_chatra.hide,close_chatra.show" role="button" tabindex="0">
<svg viewBox="0 0 24 24">
<path fill="#000000" d="M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M16,14V13C16,11.67 13.33,11 12,11C10.67,11 8,11.67 8,13V14H16M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6Z" />
</svg>
<span class="popover">
<p>Hello, how may we help you? Just send us a message now to get assistance.</p>
</span>
</div>
<div class='close_chatra' id='close_chatra' on="tap:chatra_plugin.hide,open_chatra.show,close_chatra.hide" role="button" tabindex="0" hidden=''>
<svg viewBox="0 0 24 24">
<path fill="#000000" d="M19,3H16.3H7.7H5A2,2 0 0,0 3,5V7.7V16.4V19A2,2 0 0,0 5,21H7.7H16.4H19A2,2 0 0,0 21,19V16.3V7.7V5A2,2 0 0,0 19,3M15.6,17L12,13.4L8.4,17L7,15.6L10.6,12L7,8.4L8.4,7L12,10.6L15.6,7L17,8.4L13.4,12L17,15.6L15.6,17Z" />
</svg>
</div>
<div class='chatra_plugin' id='chatra_plugin' hidden=''>
<amp-iframe src="https://cdn.rawgit.com/KompiAjaib/kompi-html/master/chatra_plugin.html?id=123456789abcdefgh" frameborder="0" scrolling="no" width="380" height="480" resizable="resizable" layout="responsive" sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups">
<div aria-label="Chatra" overflow="" role="button" tabindex="0"></div>
</amp-iframe>
</div>
Silahkan ganti kode yang saya tandai dengan ChatraID yang didapat pada langkah pertama di atas.
Dan pastikan blog Anda sudah memiliki js amp-iframe seperti berikut:
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'></script>
Selamat mencoba.