[Guia para desenvolvedores] Como alterar o layout do botão do Widget
CRIADO
por
Calebe Ribeiro
Neste passo a passo, você vai aprender a personalizar o botão do Widget com uma imagem de sua preferência.
O procedimento é detalhado no vídeo a seguir:
Adaptando o código
Adicione este código ao HTML do seu site para criar um botão personalizado para o seu Widget.
Ele não só exibirá a imagem que você escolher (substitua https://sua-imagem pelo endereço da sua imagem personalizada), mas também definirá as ações que acontecerão quando o usuário clicar nele.
<img style="position:fixed; width:60px; height:60px; bottom:20px; right:20px; cursor: pointer;" id="chat" onclick="Huggy.openBox(); hideLogo()"
src="https://sua-imagem" />
<script>
hideLogo = () => document.getElementById("chat").style.display = "none";
afterLoad = () => Huggy.subscribe("box-closed", () => { Huggy.hideButton(); showLogo() });
showLogo = () => document.getElementById("chat").style.display = "block";
</script>
Inclua também afterLoad:afterLoad no código do Widget instalado no seu site.
Deste modo, garantimos que o código monitore os eventos, após o carregamento do chat.
<script>
var $_Huggy = {
defaultCountry: '+55',
uuid: '123123123',
company: '123329695',
afterLoad:afterLoad //inclua essa linha no código do widget
};
//... (restante do código)
</script>
