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).
Comentários
0 comentário
Por favor, entre para comentar.