Memasang Chat Admin Dari Chatra Pada Blog Amp Html

Setelah sebelumnya kita memasang chat admin dari Chatra dengan load onClick event untuk blog non AMP, kini 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 semoga widgetnya sanggup tampil.

Untuk itu seharian aku mencoba mencari cara semoga widget chat ini sanggup dipakai di blog AMP dengan mudah.

Dan balasannya sanggup juga dipakai pada blog AMP dengan memakai amp-iframe dan show hide widget semoga iframe-nya tidak mengganggu.

Silahkan coba demonya di JSFiddle di bawah ini yang aku buat memakai AMP HTML.


Jika Anda ingin mencobanya, silahkan ikuti langkah-langkahnya berikut ini.

1. Daftar Widget Chatra

Silahkan daftar/signup widget Chatra di https://chatra.io/ dengan memasukan email Anda lalu klik tombol Sign Up. Kemudian silahkan cek email Anda, akan masuk email dari Chatra yang menyertakan instruksi widgetnya, silahkan catat kodenya. Biasanya instruksi widgetnya menyerupai 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 ialah ChatraID-nya (yang aku tandai), silahkan catat instruksi tersebut.

2. 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 instruksi berikut di atas instruksi </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 instruksi yang aku tandai dengan ChatraID yang didapat pada langkah pertama di atas.

Dan pastikan blog Anda sudah mempunyai js amp-iframe menyerupai berikut:

 <script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'></script>

Selamat mencoba.


Sumber https://www.kompiajaib.com/

Share this post