Como alterar o layout do botão do Huggy Chat em seu site
CRIADO
por
Helison Zurc
Por meio do código disponibilizado logo abaixo, é possível alterar o Layout do Huggy Chat sem perder suas funcionalidades. Basta inseri-lo no código fonte do seu site. Com isso, você poderá substituir o botão do Huggy Chat por alguma imagem ou gif que mais se adeque ao modelo da sua página.
"Configurações > Canais > Widget > clique sobre o Widget desejado > Mais opções"
Segue abaixo o código para inserir no código fonte do seu site, junto ao código do seu Huggy Chat:
<img
style="position:fixed;
width:60px;
height:60px;
bottom:20px;
right:20px;
cursor: pointer;"
id="chat"
onclick="Huggy.openBox(); hideLogo()"
src="SuaLogo.png"/>
<script>
function hideLogo(){
document.getElementById("chat").style.display="none";
};
function afterLoad(){
Huggy.subscribe("box-closed", function (){Huggy.hideButton();showLogo()})
};
function showLogo(){
document.getElementById("chat").style.display="block";
};
</script>
Adicione também ao código do seu Huggy Chat a função afterLoad ( afterLoad:afterLoad,) da seguinte forma:
<!-- Init code pzw.io //--><script>var $_PowerZAP = { afterLoad:afterLoad, defaultCountry: '+55', widget_id: '123', company: "123" }; (function(i,s,o,g,r,a,m){ i[r]={context:{id:'1e3a45821fa8a22e8406209806789209'}};a=o;o=s.createElement(o); o.async=1;o.src=g;m=s.getElementsByTagName(a)[0];m.parentNode.insertBefore(o,m); })(window,document,'script','https://js.huggy.chat/widget.min.js?v=8.0.0','pwz');</script><!-- End code pzw.io //-->Abaixo você pode conferir um vídeo com o procedimento descrito acima:
