Como alterar o layout do botão do Huggy Chat em seu site

 

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.

Ao realizar esse procedimento, é perdida a funcionalidade que exibe os botões dos demais canais (Messenger, WhatsApp, Email, Telegram...) acima do Huggy Chat, ao passar o cursor do mouse sobre o mesmo.
Para a alteração do layout funcionar perfeitamente, desative as opções Exibir botão do widget e Exibir quando agentes estiverem offline nas configurações do widget (Huggy Chat).

"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>
Basta substituir o texto em vermelho pelo link da sua imagem.

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:


O que você achou deste artigo?


some text
Powered by HelpDocs