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"
"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="SUA_LOGO.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 campo SUA_LOGO.PNG pelo link da sua imagem.
Adicione também ao código do seu Huggy Chat a função afterLoad ( afterLoad:afterLoad,) da seguinte forma:
afterLoad:afterLoad
Abaixo você pode conferir um vídeo com o procedimento descrito acima:
