Como instalar chat em templates Amp Blogger

sistema chat para templates amp blogger como instalar

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


Pimeiro é necessario 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.

Click to comment