Depois de o administrador concluir a configuração inicial dos componentes do Web Widget (clássico) na Central de administração e colaborar com o desenvolvedor para adicionar o Web Widget (clássico) ao website, ele pode personalizar ainda mais o Web Widget (clássico) se desejar.
Este artigo é uma visão geral das personalizações avançadas disponíveis no Web Widget (clássico) para os administradores. O objetivo do artigo é responder à pergunta "O que mais posso fazer com meu Web Widget (clássico)?" Ele explica o processo de personalização para administradores e também lista a documentação que os desenvolvedores web precisam consultar.
Se você for um desenvolvedor web (ou um administrador com conhecimentos de desenvolvimento) e estiver procurando a documentação completa sobre as configurações da API e os comandos descritos no artigo, além de outras amostras de código, consulte a documentação do desenvolvedor para a API do Web Widget (clássico).
Este artigo aborda os seguintes tópicos e personalizações do widget:
- Planejamento da personalização do Web Widget (clássico)
- Navegação pela documentação da API do Web Widget (clássico)
- Exibição do seu widget em um idioma diferente
- Preenchimento de formulários com informações de contato do usuário
- Desativação de anexos de ticket
- Reposicionamento do inicializador
- Deslocamento da posição do widget
- Personalização da cor dos elementos do widget
- Alteração do ordenamento visível no widget
- Supressão de recursos em páginas específicas
- Personalização de texto no widget
- Inclusão da linha de assunto no formulário de contato
- Ocultamento do botão "Visualizar o artigo original"
- Limitação de resultados de pesquisa
- Personalização do texto do placeholder na caixa de pesquisa da central de ajuda
- Configuração avançada do Talk no Web Widget (clássico)
- Configuração avançada do Chat no Web Widget (clássico)
- Oferta de várias opções de contato para usuários finais
- Formatação de código de vários elementos do Web Widget (clássico)
Para obter informações sobre como adicionar o Web Widget (clássico) ao seu site, consulte Uso do Web Widget (clássico) para incorporar o atendimento ao cliente no seu website.
Para obter uma lista completa da documentação do Web Widget (clássico), consulte Recursos do Web Widget (clássico).
Planejamento da personalização do Web Widget (clássico)
Muitos administradores do Support não são desenvolvedores web e trabalham com outra pessoa para implementar as personalizações do Web Widget (clássico). Eles não personalizam o Web Widget (clássico) e os websites sozinhos. Eles trabalham com o desenvolvedor web da empresa ou terceirizado, contratado para implementar as alterações.
O desenvolvedor web é quem faz o trabalho de personalização, adicionando o código (API do Web Widget (clássico)) ao HTML do website. No entanto, o administrador ainda é necessário para o trabalho. Ele precisa saber quais personalizações são possíveis para o Web Widget (clássico) e dizer ao desenvolvedor web o que quer.
Alguns administradores têm experiência com HTML e escolhem realizar as personalizações sozinhos, agindo como desenvolvedores. No entanto, personalizar o Web Widget (clássico) é um processo para o administrador, que requer planejamento e envolve as seguintes etapas:
- Estudar as informações nesse artigo para se informar das personalizações avançadas disponíveis.
- Reunir-se com os principais interessados da empresa para criar uma lista de requisitos para o Web Widget (clássico). Quais cores devem ser usadas? Como deve ser o comportamento do Web Widget (clássico)?
- Preparar uma lista das personalizações desejadas, sendo o mais específico possível e incluindo links para a documentação da API que o desenvolvedor web pode consultar.
- Passar a lista para o desenvolvedor que personalizará o Web Widget (clássico) modificando o HTML do website.
Navegação pela documentação da API do Web Widget (clássico)
Temos algumas informações importantes para ajudar os desenvolvedores a navegar pela documentação da API do Web Widget (clássico) no site do desenvolvedor da Zendesk.
Documentação do desenvolvedor e sintaxe da API atualizadas e organizadas — a sintaxe da API do Web Widget (clássico) mudou e reorganizamos a documentação do desenvolvedor da API do Web Widget (clássico) para facilitar a busca pelo comando ou configuração desejado. Agora, a documentação está organizada por canal de produto (Central de Ajuda, Tickets, Chat e Talk) ou por comandos e configurações principais. Para obter mais informações, consulte a documentação do desenvolvedor sobre a API do Web Widget (clássico).
Novas APIs do Chat — para obter informações sobre o mapeamento das APIs do antigo Chat (Zopim) para as APIs do Web Widget (clássico), consulte Migração da sintaxe do widget do Chat para a sintaxe unificada do Web Widget (clássico).
Exibição do seu widget em um idioma diferente
Por padrão, o Web Widget (clássico) incorporado no website exibe o texto no idioma do usuário final, com base no idioma do navegador dele. Por exemplo, se o idioma do navegador do usuário final estiver configurado como de para alemão, o widget será exibido em alemão para o usuário. Se o widget está incorporado na central de ajuda, ele exibe o texto com base na configuração do idioma da central de ajuda.
O Web Widget (clássico) oferece suporte a um subconjunto de idiomas com suporte pelo Zendesk. Se o idioma do navegador do usuário final não tiver suporte do Web Widget (clássico), o widget ficará em inglês por padrão. Se o widget não puder obter o idioma do navegador do usuário final, o widget retorna para o idioma especificado no Zendesk Support por padrão.
Você pode personalizar o widget para que ele seja sempre exibido em um idioma específico usando o comando setLocale. Esse comando define o idioma apenas para o widget e não anula o idioma da sua página principal.
Para obter mais informações, consulte a documentação do desenvolvedor sobre o comando setLocale.
Preenchimento de formulários com informações de contato do usuário
Economize o tempo dos visitantes do seu site e evite seu aborrecimento e frustração com o preenchimento prévio do nome, e-mail e telefone dos clientes nos formulários de contato. Isso inclui os formulários de ticket, formulários pré-chat e formulários offline do Chat. Use as configurações identify e prefill.
Você também pode definir as informações do usuário como somente leitura com a configuração prefill. Isso é ótimo, pois evita a criação de contas de usuário duplicadas no Support.
Para obter mais informações, consulte a documentação do desenvolvedor sobre as configurações identify e prefill.
Desativação de anexos de ticket
Se você permite anexos nos tickets, os usuários podem anexar arquivos aos tickets enviados do Web Widget (clássico), por padrão. No entanto, se precisar, você pode desativar essa opção.
Para obter mais informações, consulte a documentação do desenvolvedor sobre a configuração attachments do objeto contactForm.
Reposicionamento do inicializador
A posição padrão do Web Widget (clássico) está no canto inferior direito do navegador. Quando um usuário clica no inicializador do Web Widget (clássico), ele abre se expandido para cima.
Você pode selecionar um local para o Web Widget (clássico) que varie de acordo com a página (na esquerda ou direita da página, ou no topo, expandindo para baixo quando aberto). Use a configuração position para colocar o Web Widget (clássico) no canto superior esquerdo, superior direito, inferior esquerdo ou inferior direito da página.
Para obter mais informações, consulte a documentação do desenvolvedor sobre a configuração position.
Deslocamento da posição do widget
É possível usar a configuração offset para reposicionar o Web Widget (clássico) em seu computador ou dispositivos móveis. Use a configuração position inicial como ponto de referência e use a configuração offset para mover o Web Widget (clássico) horizontalmente, verticalmente ou ambos (em pixels).
Para obter mais informações, consulte a documentação do desenvolvedor sobre a configuração offset.
Personalização da cor dos elementos do widget
Você pode especificar um esquema de cores geral para o Web Widget (clássico) (cor do tema) e uma cor personalizada para o texto no inicializador, no botão de contato e no cabeçalho (cor do texto do tema) na página de administração do Web Widget (clássico). Consulte Configuração dos componentes no Web Widget (clássico).
No entanto, se desejar personalizar elementos específicos, precisa usar a configuração color. Você pode escolher uma cor exclusiva para cada um destes componentes do Web Widget (clássico):
- Inicializador
- Botão
- Texto do botão
- Lista de resultados
- Cabeçalho
- Links para artigos
Para melhor acessibilidade, o Web Widget (clássico) ajusta automaticamente as cores usando um algoritmo que garante uma taxa de contraste mínimo, conforme especificado nas diretrizes de WCAG.
Para obter mais informações sobre a personalização de cores de elementos do Web Widget (clássico), consulte a documentação do desenvolvedor sobre a configuração color.
Alteração do ordenamento visível no widget
Você pode usar a configuração zIndex, uma das principais do Web Widget (clássico), para definir um novo valor e alterar a exibição do Web Widget (clássico) em comparação a outros elementos no mesmo local do site.
Para obter mais informações, consulte a documentação do desenvolvedor sobre a configuração zIndex.
Supressão de recursos do widget em páginas específicas
É possível ativar o Formulário de contato, o Chat, o Talk e a central de ajuda na página de administração do Web Widget (clássico) e usar a configuração suppress para alterar os recursos oferecidos em determinadas páginas do seu site para melhor atender às suas necessidades.
- Aumentar a deflexão de tickets com a central de ajuda em algumas páginas
- Oferecer o Chat ou Formulário de contato sem deflexão em outras páginas
- Oferecer diferentes níveis de atendimento para usuários conectados ou identificados
Para obter mais informações, consulte a documentação do desenvolvedor sobre a configuração suppress.
Personalização de texto no widget
Você também pode alterar o texto dos componentes do Web Widget (clássico) na tabela abaixo e personalizar o texto do placeholder na pesquisa da central de ajuda.
| Componente | Detalhes |
|---|---|
|
Objeto: launcher Configuração: chatLabel Descrição: texto no botão do inicializador quando o Chat estiver ativado e a Central de Ajuda não estiver ativadaTexto padrão: Chat |
|
Objeto: launcher Configuração: label Descrição: texto no botão do inicializador Texto padrão: Ajuda, Suporte ou Feedback, conforme definido na página de administração do Web Widget (clássico) |
|
Objeto: helpCenter Configuração: title Descrição: título da página da Central de Ajuda Texto padrão: Ajuda |
|
Objeto: contactForm Configuração: title Descrição: título do formulário de contatoTexto padrão: Deixe uma mensagem ou Entre em contato conosco, conforme definido na página de administração do Web Widget (clássico) |
|
Objeto: helpCenter Configuração: messageButton Descrição: texto no botão do formulário da central de ajuda que carrega o formulário de contato (limite aproximado de 20 caracteres) Texto padrão: Deixe uma mensagem ou Entre em contato conosco, conforme definido na página de administração do Web Widget (clássico) |
|
Objeto: helpCenter Configuração: chatButton Descrição: texto no botão exibido no formulário da central de ajuda que carrega o Chat (limite aproximado de 20 caracteres)Texto padrão: Ajuda, Suporte ou Feedback, conforme definido na página de administração do Web Widget (clássico) |
Use o objeto translations para alterar partes do texto padrão exibido no Web Widget (clássico). As traduções são agrupadas por recurso como, por exemplo, Inicializador, central de ajuda ou Formulário de contato.
Consulte a lista de códigos de idioma mais usados em Códigos de idioma para os idiomas suportados pelo Zendesk.
As traduções de idiomas locais são ativadas pelo idioma do navegador do usuário final. Você também pode forçar o widget a ser exibido sempre em um idioma específico, anulando a configuração de idioma do navegador do usuário final. Para obter mais informações, consulte Exibição do seu widget em um idioma diferente.
Inclusão da linha de assunto no formulário de contato
Com a configuração subject no objeto contactForm, você pode configurar o Web Widget (clássico) para incluir um campo de assunto no formulário de contato padrão.
O formulário de contato padrão é projetado para gerar engajamento e oferecer uma experiência de usuário elegante ao preencher o formulário. Embora o formulário de contato padrão não tenha linha de assunto, você poderá adicioná-la para melhorar a experiência de suporte para alguns clientes.
Para obter mais informações, consulte a documentação do desenvolvedor sobre a configuração subject no objeto contactForm.
Ocultamento do botão "Visualizar o artigo original"
O botão Visualizar o artigo original cria uma ponte entre o artigo no Web Widget (clássico) e na central de ajuda. Você pode ocultar esse botão usando o objeto helpCenter e configurar a propriedade originalArticleButton como false.
Para obter mais informações, consulte a documentação do desenvolvedor sobre a configuração originalArticleButton do objeto helpCenter.
Limitação de resultados de pesquisa
Com a configuração filter no objeto helpCenter, você pode limitar os resultados das pesquisas realizadas no Web Widget (clássico) a artigos com base em categorias, seções e rótulos. Para obter mais informações, consulte a documentação do desenvolvedor sobre a configuração filter.
Role para ver exemplos que não estão inclusos na documentação do desenvolvedor e que ilustram algumas maneiras como você pode limitar os resultados de pesquisa.
Como limitar a pesquisa a uma seção específica:
<script type="text/JavaScript">
window.zESettings = {
webWidget: {
helpCenter: {
filter: {
section: '200154474-Announcements'
}
}
}
};
</script>Como limitar a pesquisa a uma categoria específica:
<script type="text/JavaScript">
window.zESettings = {
webWidget: {
helpCenter: {
filter: {
category: '200053794-General'
}
}
}
};
</script>Como limitar a pesquisa ao conteúdo em várias categorias:
<script type="text/JavaScript">
window.zESettings = {
webWidget: {
helpCenter: {
filter: {
category: '115000669485,201742209'
}
}
}
};
</script>Como limitar a pesquisa ao conteúdo com um rótulo específico:
<script type="text/JavaScript">
window.zESettings = {
webWidget: {
helpCenter: {
filter: {
label_names: 'orders'
}
}
}
};
</script>Como limitar a pesquisa ao conteúdo em uma categoria específica com rótulos específicos:
<script type="text/JavaScript">
window.zESettings = {
webWidget: {
helpCenter: {
filter: {
category: '200053794-General',
label_names: 'Label One,Label Two,Label Three'
}
}
}
};
</script>Personalização do texto do placeholder na caixa de pesquisa da central de ajuda
Por padrão, o texto do placeholder exibido na caixa de pesquisa da central de ajuda diz Como podemos ajudar? Você pode personalizar esse texto para que corresponda ao idioma do usuário ou para que um texto específico seja exibido em alguns idiomas. Para obter mais informações, consulte a documentação do desenvolvedor sobre a configuração searchPlaceholder.
Se a Ajuda contextual estiver ativada, você pode configurar o Web Widget (clássico) para abrir artigos recomendados, facilitando o autoatendimento para os clientes. Para obter mais informações, consulte a documentação do desenvolvedor sobre o comando setSuggestions do objeto helpCenter.
Configuração avançada do Talk no Web Widget (clássico)
É possível criar várias configurações que definam como o Talk se comporta no Web Widget (clássico). Com cada configuração, você pode personalizar o encaminhamento de chamada e as opções de exibição para o Talk no Web Widget (clássico), com base em suas necessidades e preferências.
-
Grupo de agentes ao qual você deseja que as solicitações de retorno de chamada do Web Widget (clássico) sejam encaminhadas
-
Prioridade das solicitações de retorno de chamada do Web Widget (clássico)
-
Exibição de Solicitar um retorno de chamada, de Ligue para a gente ou das duas opções no Web Widget (clássico)
-
Exibição do tempo de espera estimado no Web Widget (clássico)
Se você tiver criado uma única configuração do Talk no Web Widget (clássico), essa será a configuração padrão exibida no Web Widget (clássico) sempre que o Talk estiver disponível.
Se você tiver criado várias configurações do Talk no Web Widget (clássico), poderá usar a definição de apelido do Talk para alcançar a configuração desejada.
Para obter mais informações, consulte a documentação do desenvolvedor sobre o objeto talk, a configuração nickname e o artigo Definição das configurações do Zendesk Talk para o Web Widget (clássico).
Configuração avançada do Chat no Web Widget (clássico)
Se você está usando o chat em tempo real no Web Widget (clássico), pode disponibilizar as funções do Zendesk Chat no Web Widget (clássico) para que os visitantes do seu website possam conversar por chat com agentes, ou enviar e receber arquivos que podem ajudar na resolução do problema. Os agentes também podem enviar mensagens proativas para os visitantes para perguntar se eles querem ou precisam de ajuda.
Para obter mais informações, consulte a documentação do desenvolvedor sobre o objeto chat.
Para obter informações sobre o mapeamento das APIs do antigo Chat (Zopim) para as APIs do Web Widget (clássico), consulte Migração da sintaxe do widget do Chat para a sintaxe unificada do Web Widget.
Oferta de várias opções de contato para usuários finais
Você pode permitir que os usuários finais escolham uma opção de contato. Também é possível personalizar seu website para que algumas páginas permitam que usuários finais façam uma escolha e noutras não. O comportamento exato depende de o Chat ou o Talk estar configurado para o Web Widget (clássico) e de o agente do chat estar online. Se necessário, você pode personalizar o texto padrão das opções de contato.
Listamos o texto padrão:
| Opção de contato | Texto padrão |
|---|---|
| Botão de contato | Entre em contato conosco |
| Rótulo do chat (com agente online) | Chat em tempo real |
| Rótulo do chat (com agente offline) | Chat não disponível |
| Rótulo do formulário de contato | Deixe uma mensagem |
Para obter mais informações, consulte a documentação do desenvolvedor sobre a configuração contactOptions.
Oferecimento de opções de contato com o Chat
Se o Chat estiver configurado para o Web Widget (clássico), os usuários finais serão encaminhados automaticamente para um chat, se um agente do Chat estiver disponível. No entanto, você pode permitir que os usuários finais escolham entre conversar por chat com um agente ou preencher um formulário de contato, mesmo se um agente do Chat estiver disponível. Se um agente do Chat estiver disponível quando o usuário clicar no inicializador, mas esse agente sair do chat antes de seu início, o usuário final poderá ver uma mensagem informando que o agente não está disponível.
É um problema conhecido: quando os usuários finais escolhem conversar por chat, eles não podem usar o botão de retorno para escolher outras opções de contato. Para tal, eles precisam encerrar o chat completamente ou atualizar a página.
Oferecimento de opções de contato com o Talk
Se o Talk e outras opções de contato estiverem ativadas no Web Widget (clássico) e agentes estiverem online, as opções de contato serão ativadas automaticamente.
Formatação de código de vários componentes do widget
Os itens específicos do Formulário de contato, da Central de Ajuda e do Zendesk Chat ficam aninhados nesses cabeçalhos (contactForm, helpCenter e chat) no HTML do seu site, enquanto os itens globais são inclusos separadamente.
- A posição do Web Widget (clássico) na tela foi alterada usando a configuração “offset”. Offset é um item global, com entrada própria.
- Pesquisa da central de ajuda — não inclui o botão Visualizar o artigo original. O título “Search for help” para usuários cujo idioma é inglês e “Have your say” para os outros idiomas.
- O Chat está desativado.
- O título do formulário de contato é “Message us” para inglês e “Contact us” para outros idiomas.
- O texto do botão do inicializador é “Make a request” em inglês e “Get help” em outros idiomas.
<script type="text/JavaScript">
window.zESettings = {
webWidget: {
offset: { horizontal: '400px', vertical: '400px' },
helpCenter: {
originalArticleButton: false,
title: {
'en-US': 'Search for help',
'*': 'Have your say'
}
},
chat: {
suppress: true
},
contactForm: {
title: {
'en-US': 'SMessage us',
'*': 'Contact us'
}
},
launcher: {
label: {
'en-US': 'Make a request',
'*': 'Get help'
}
}
}
};
</script>