Receita do Guide: solicitação de feedback para votos negativos

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

É preciso ser administrador do Zendesk Support para concluir esta receita. A receita envolve as tarefas a seguir:

• Tarefa 1: ativação da votação anônima
• Tarefa 2: criação de um campo de ticket personalizado para a URL do artigo
• Tarefa 3: inclusão de CSS personalizado
• Tarefa 4: atualização do modelo da Página do artigo
• Tarefa 5: inclusão do JavaScript personalizado
• Tarefa 6: teste das alterações feitas

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.

Observação: essa receita requer a edição de CSS, modelos de página e JavaScript. Quando você edita um tema padrão, ele é salvo como um tema personalizado. A Zendesk não dá suporte a temas personalizados e eles não são atualizados automaticamente quando novos recursos são lançados. Consulte Temas padrão e personalizados na central de ajuda.

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.

Como criar um campo de ticket personalizado para a URL do artigo

1. Na Central de administração, clique em Objetos e regras na barra lateral e selecione Tickets > Campos.
2. Clique em Adicionar campo.
3. Selecione o tipo de campo Texto.

   

4. Insira a URL do artigo de ajuda como o Nome de exibição.
5. Em Permissões, selecione Os clientes podem editar.
6. Em Clientes, insira a URL do artigo de ajuda como o Título exibido para os clientes.

   

7. 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.

8. 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.

Como adicionar o CSS personalizado ao tema

1. No Guide, abra o editor do código para o tema. Para obter instruções, consulte Edição do tema da Central de Ajuda.
2. Clique no style.css.
3. 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.

4. 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.

Como atualizar o modelo da Página do artigo

1. No Guide, abra o editor do código para o tema.
2. Clique em article_page.hbs.
3. Adicione o trecho HTML a seguir antes da tag de fechamento de
   :

   <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:

   • 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

   O HTML adiciona uma mensagem de voto negativo a seguir para os botões de votação de cada artigo. A mensagem principal div usa a classe downvote-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.

4. 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 valor href do trecho HTML. No parâmetro, substitua FORM_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.

5. Analise o elemento
   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>

6. 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.

Como adicionar JavaScript personalizado ao tema

1. No Guide, abra o editor do código para o tema.
2. Clique no script.js.
3. 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.

4. 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.

Como testar as alterações feitas

1. No Guide, abra o editor do código para o tema.
2. Clique em Visualizar.
3. Na janela Visualizar, selecione uma Função da visualização ou Usuário final.
4. 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.

   

5. 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.

6. Navegue até outro artigo em sua central de ajuda e clique no botão de votar Não.
7. Após a mensagem de voto negativo aparecer, clique no botão de votar Sim. A mensagem de voto negativo deve desaparecer.
8. 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.