O tema padrão Copenhagen permite que usuários finais votem nos artigos da central de ajuda. Nesta receita, editaremos o código do tema para que exiba uma mensagem de acompanhamento quando o usuário atribuir um voto negativo para o artigo.
A mensagem de voto negativo inclui um link para a Página de nova solicitação que contém um formulário de ticket. Um usuário pode preencher o formulário de ticket para fornecer o feedback sobre o artigo. O formulário usa um campo de ticket personalizado para capturar a URL do artigo. Quando enviado, o formulário cria um ticket no Zendesk Support.
Sobre esta receita
A receita pressupõe que você esteja editando o tema Copenhagen padrão. Se você quiser editar outro tema ou fazer alterações semelhantes em um tema personalizado do Copenhagen, talvez seja necessário alterar os exemplos de código.
A receita também usa um formulário de ticket pré-preenchido. Os formulários de ticket pré-preenchidos requerem o uso da versão 2 da Templating API. Para saber qual é a sua versão do tema, consulte Sobre as versões de modelos do Guide.
Tarefa 1: ativação da votação anônima
Se sua central de ajuda estiver visível para visitantes anônimos, você poderá ativar a votação anônima como uma etapa opcional. A votação anônima permite que os usuários finais votem em artigos da central de ajuda sem precisar entrar no sistema.
Para ativar a votação anônima, siga as instruções do artigo Habilitação de usuários para votar em artigos sem precisar entrar no sistema. Feita a leitura, volte para este artigo.
Tarefa 2: criação de um campo de ticket personalizado para a URL do artigo
Primeiramente, crie um campo personalizado de ticket para capturar as URLs do artigo da central de ajuda.
- Na Central de administração, clique em
Objetos e regras na barra lateral e selecione Tickets > Campos.
- Clique em Adicionar campo.
- Selecione o tipo de campo Texto.
- Insira a URL do artigo de ajuda como o Nome de exibição.
- Em Permissões, selecione Os clientes podem editar.
- Em Clientes, insira a URL do artigo de ajuda como o Título exibido para os clientes.
- Clique em Salvar.
Se sua conta usa um único formulário de ticket, o novo campo é exibido automaticamente. Se você usa vários formulários de ticket, precisa adicionar manualmente o campo aos formulários em que quiser incluí-lo.
- Na página Campos, copie a ID do campo para o campo da URL do artigo de ajuda. Mais tarde, você usará a ID nesta receita.
Tarefa 3: inclusão de CSS personalizado
Em seguida, adicione o CSS personalizado da mensagem de voto negativo ao seu tema.
- No Guide, abra o editor do código para o tema. Para obter instruções, consulte Edição do tema da Central de Ajuda.
- Clique no style.css.
- Cole as seguintes informações na parte inferior do arquivo:
/* ---- Downvote message ----------- */ .downvote-message { display: none; border: 1px solid #ddd; border-radius: 4px; text-align: center; }
O código adiciona as regras de CSS para a classe
.downvote-message
. Você usará a classe para ocultar a mensagem de voto negativo até que um usuário atribua um voto negativo a um artigo. A classe também adiciona estilo à mensagem quando ela é exibida. - Se você está atualizando o tema em uso da central de ajuda, clique em Publicar. Caso contrário, clique em Salvar.
Tarefa 4: atualização do modelo da Página do artigo
Em seguida, adicione HTML da mensagem de voto negativo ao modelo da Página do artigo do tema.
- No Guide, abra o editor do código para o tema.
- Clique em article_page.hbs.
- Adicione o trecho HTML a seguir antes da tag de fechamento de
<div class="article-votes">
:<div class="downvote-message"> <p>We're sorry to hear that.</p> <p><a href="{{page_path 'new_request'}}?tf_CUSTOM_FIELD_ID=HTTPS://SUBDOMAIN.ZENDESK.COM{{url}}">Please tell us why.</a></p> </div>
No trecho, substitua:O HTML adiciona uma mensagem de voto negativo a seguir para os botões de votação de cada artigo. A mensagem principal-
CUSTOM_FIELD_ID
pela ID do campo do campo da URL do artigo de ajuda que você criou em criação de um campo de ticket personalizado para a URL do artigo -
HTTPS://SUBDOMAIN.ZENDESK.COM
pela URL base da sua central de ajuda
div
usa a classedownvote-message
que você adicionou em criação de um campo de ticket personalizado para a URL do artigo. O CSS dessa classe oculta a mensagem de todos os usuários. Mais adiante na receita, você adicionará JavaScript personalizado para exibir a mensagem quando um usuário deixar um voto negativo.A mensagem contém um link para a Página de nova solicitação onde há um formulário de ticket. Esse link usa o parâmetro da URL para preencher previamente o campo da URL do artigo de ajuda do formulário com a URL do artigo atual. Para saber mais sobre o preenchimento prévio de formulários de ticket, consulte Criação de formulários de ticket pré-preenchidos.
-
- Se sua conta usa um único formulário de ticket, ignore esta etapa e vá para a próxima. Se sua conta tem vários formulários de ticket, adicione o parâmetro da URL
&ticket_form_id=FORM_ID
no final do valorhref
do trecho HTML. No parâmetro, substituaFORM_ID
pela ID do formulário de ticket. Exemplo:<div class="downvote-message"> <p>We're sorry to hear that.</p> <p><a href="{{page_path 'new_request'}}?tf_12345=https://example.zendesk.com{{url}}&ticket_form_id=67890">Please tell us why.</a></p> </div>
O formulário de ticket deve ser visível para usuários finais. Para verificar ou alterar a visibilidade do formulário de ticket, consulte Criação de vários formulários de ticket para oferecer suporte a diversos tipos de solicitação.
- Analise o elemento
<div class="article-votes">
do modelo. Ele terá esta aparência:<div class="article-votes"> <span class="article-votes-question" id="article-votes-label">{{t 'was_this_article_helpful'}}</span> <div class="article-votes-controls" role="group" aria-labelledby="article-votes-label"> {{vote 'up' role='radio' class='button article-vote article-vote-up' selected_class="button-primary"}} {{vote 'down' role='radio' class='button article-vote article-vote-down' selected_class="button-primary"}} </div> <small class="article-votes-count"> {{vote 'label' class='article-vote-label'}} </small> <div class="downvote-message"> <p>We're sorry to hear that.</p> <p><a href="{{page_path 'new_request'}}?tf_67890=https://example.zendesk.com{{url}}">Please tell us why.</a></p> </div> </div>
- Se você está atualizando o tema em uso da central de ajuda, clique em Publicar. Caso contrário, clique em Salvar.
Tarefa 5: inclusão do JavaScript personalizado
Adicione Javascript para exibir a mensagem de voto negativo quando um usuário atribuir um voto negativo a um artigo.
- No Guide, abra o editor do código para o tema.
- Clique no script.js.
- Cole as seguintes informações na parte inferior do arquivo:
// Display message for article downvotes document.addEventListener("DOMContentLoaded", () => { if (document.querySelector(".article-votes-controls")) { const voteButtons = document.querySelectorAll(".article-vote"); const voteMessage = document.querySelector(".downvote-message"); voteButtons.forEach((button) => { button.addEventListener("click", () => { let isDownButton = button.matches(".article-vote-down"); let isPressed = button.matches(".button-primary"); if (isDownButton && !isPressed) { voteMessage.style.display = "block"; } else { voteMessage.style.display = "none"; } }); }); } });
Quando um usuário clica no botão de voto Não, o JavaScript exibe a mensagem de voto negativo que você adicionou em atualização do modelo da Página do artigo. Se o usuário redefinir ou alterar o voto para Sim, o JavaScript ocultará a mensagem novamente.
- Se você está atualizando o tema em uso da central de ajuda, clique em Publicar. Caso contrário, clique em Salvar.
Tarefa 6: teste das alterações feitas
Faça o teste da nova funcionalidade de votação para garantir que ela esteja funcionando conforme o esperado.
- No Guide, abra o editor do código para o tema.
- Clique em Visualizar.
- Na janela Visualizar, selecione uma Função da visualização ou Usuário final.
- Navegue até o artigo em sua central de ajuda. Na parte inferior do artigo, clique no botão de votação Não sob a pergunta Esse artigo foi útil?.
Uma mensagem curta contendo os dizeres Informe os motivos. deve ser exibida.
- Clique no link Informe os motivos.
O link deve abrir a Página de nova solicitação contendo o formulário de ticket. O campo da URL do artigo de ajuda do formulário de ticket deve conter a URL do artigo da central de ajuda relacionado.
Se desejar, você pode enviar o formulário para criar um ticket de teste.
- Navegue até outro artigo em sua central de ajuda e clique no botão de votar Não.
- Após a mensagem de voto negativo aparecer, clique no botão de votar Sim. A mensagem de voto negativo deve desaparecer.
- Se você não fez as alterações no tema em uso da sua central de ajuda e está pronto para iniciá-las, você pode definir o tema personalizado como seu tema em uso. Consulte Alteração do tema em uso da central de ajuda.