Qual é o meu plano?

Disponível nos planos Suite Growth e superioresDisponível em todos os planos do Guide

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="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:
    • 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.

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

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

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.
Powered by Zendesk