Personalizando o Web Widget via código JavaScript

Este artigo tem como finalidade ensinar você a personalizar seu Web Widget (Chat) a partir de comandos JavaScript. O código abaixo faz várias alterações e deve ser inserido diretamente no arquivo SCRIPT.JS da personalização da sua base de conhecimento (caso tenha o chat nela) ou dentro da página do seu web site.

window.zESettings = {
 webWidget: {
 color: {
 theme: '#fff', // Muda a cor do tema quando existe usuário online
 launcher: '#CC3A83', // Muda a cor do Web Widget quando ele está fechado
 launcherText: '#E589B7', // Muda a cor do Web Widget quando ele está fechado
 button: '#8A0648', // Muda a cor do botão de enviar mensagem quando não existe agente online
 resultLists: '#691840', 
 header: '#000', // Muda a cor do tema quando não existe agente online
 articleLinks: '#FF4500' // Cor dos links de artigos
 },
 launcher: {
 label: {
 '*': 'Estamos OFF' // Altera o texto do Web Widget quando não existe agente logado
 },
 chatLabel: {
 '*': 'Converse conosco' // Altera o texto do botão de chat (quando ele está fechado)
 }

},
 contactForm: {
 title: {
 '*': 'Feedback' // Altera o título do formulário quando não existe agente online
 },
 attachments: false // Habilita ou desabilita anexos no formulário quando não existe agente online
 },
 offset: { 
 horizontal: '100px', vertical: '150px' // Altera a posição do Widget na tela
 }, 
 helpCenter: {
 chatButton: { // Altera o texto do botão de chat no formulário da Central de Ajuda (do chat)
 'fr': 'Discute avec nous',
 '*': 'Chat with us'
 },
 contactOptions: {
 enabled: true // Multiplas formas de contato (ao clicar no botão de chat)
 chatLabelOnline: { '*': 'Live Chat' }, // Altera o texto do botão de "Solicitar chat" quando existe agente online
 chatLabelOffline: { '*': 'Chat is unavailable' }, // Altera o texto do obtão de "Solicitar chat" quando não existe agente online
 contactFormLabel: { '*': 'Leave us a message' } // Altera o texto do botão de "Deixe uma mensagem" 
 contactButton: { '*': 'Get in touch' } // Altera o texto do botão de contato quando o visitante está na tela de chat e pesquisando na Central de Ajuda
 }
 }
};

Todas as opções de cor devem ser alteradas utilizando códigos hexadecimais.

Textos podem ser alterados levando em consideração a localidade do visitante, então sempre que ver um '*' significa que aquele texto estará visível para todas as localidades. Caso queira especificar cada uma, basta colocar entre aspas simples ('fr' : 'Este texto está em francês').

Para maiores informações clique aqui e veja a documentação Zendesk (em inglês).