Hoje vamos apresentar como instalar um sistema de chat online no seu template amp do Blogger para ajudar você a interagir com seu publico alvo para isso é fácil basta seguir os passos abaixo

Primeiro é necessário que faça seu cadastro em https://chatra.io/br/ então confirme o e-mail vai receber um código como esse abaixo:
<!-- Chatra {literal} -->
<script>
    (function(d, w, c) {
        w.ChatraID = '1264492889abcdefgh';
        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} -->


Em seguida va no menu tema então editar HTML com as teclas combinadas CTRL+F busque por ]]></b:skin> ou </style> e cole o seguinte código antes disso:

.chatra_plugin{position:fixed;bottom:0;right:10px;width:100%;max-width:340px;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}

Então procure por </body> e antes disso copie e cole o código:

 <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=1264492889abcdefgh" frameborder="0" scrolling="no" width="340" 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>

Então substitua o código marcado pelo seu código. 

tenha certeza que seu blog ja tem o seguinte código JSAMP FRAME:]]

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

Salve e pronto.