Pergunta
Como posso personalizar o widget do Zendesk Chat usando a API do JavaScript?
Resposta
Use a API do JavaScript para fazer alterações e personalizações no Web Widget (clássico) localizado em um site ou página.
Se você for um iniciante, a primeira coisa a fazer é descobrir se você usa o Web Widget (clássico) ou o trecho de código do Web Widget em sua página. Ambos oferecem funcionalidade de Chat e podem ter a mesma aparência para o visitante do site.
Conhecendo os diferentes trechos de código
- O trecho de código do Chat tem essa aparência:
<!--Start of Zendesk Chat Script-->
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
$.src="https://v2.zopim.com/?ACCOUNT_KEY";z.t=+new Date;$.
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
</script>
<!--End of Zendesk Chat Script-->
O ACCOUNT_KEY
é o único identificador exclusivo de sua conta. Se você começou com uma conta apenas do Chat, esse é o trecho de código que você tem.
- O trecho de código do Web Widget tem essa aparência:
<script id="ze-snippet"
src="https://static.zdassets.com/ekr/snippet.js?key=ACCOUNT_KEY"> </script>
A ACCOUNT_KEY
é um identificador exclusivo, mas esse formato é diferente da chave da conta do Chat. Se você iniciou sua conta do Chat de dentro de sua conta do Support, isso se aplica a você.
A única maneira de ter certeza é abrir sua conta e verificar a página do Widget para ver o trecho exato do widget de sua conta.
Adição de JavaScript personalizado
O problema mais comum com o uso de nossa API do JavaScript é que os eventos não estão configurados para execução na ordem correta. O JavaScript normalmente é executado de forma assíncrona em uma página, portanto, sem os devidos cuidados, é possível que o comando, por exemplo, alterar a cor do widget, seja executado antes do widget existir. Por isso, é necessário adicionar as funções "prontas" corretas para uma personalização confiável.
-
Código do Web Widget (Clássico)
Neste caso, seu código personalizado deve ter essa aparência:
$zopim(function(){ // Custom code here });
Esse trecho aguarda a conclusão do carregamento da página e, em seguida, o carregamento do Web Widget (clássico) antes de adicionar qualquer personalização.
-
Código do Web Widget
Use o script abaixo:
zE(function(){ $zopim(function(){ // Custom code here }); });
Nesse exemplo, o código está esperando que a página carregue, depois que o Web Widget carregue e, finalmente, que o Web Widget carregue a funcionalidade do Chat. Após o Chat ser carregado, é seguro adicionar as personalizações desejadas ao Web Widget (clássico).
Para obter mais informações, consulte esses artigos: