Manual de JavaScript da central de ajuda

Suite

Growth, Professional, Enterprise ou Enterprise Plus

Support com

Todos os planos do Guide

Você pode personalizar facilmente a aparência da central de ajuda usando JavaScript e jQuery. Este manual foi projetado para ajudar você a deixar sua central de ajuda com a aparência que você quiser.

O jQuery não é fornecido por padrão. Certifique-se de importar uma biblioteca de jQuery se deseja usar as instruções de jQuery em um tema em vez de usar o Vanilla JavaScript. Consulte Importação ou atualização de jQuery para mais informações.

Observação: os usuários da avaliação recebem o plano Professional, que inclui opções de edição de código, mas não poderão acessar esse recurso se adquirirem um plano Team.

Para acessar e editar o JavaScript na sua central de ajuda, consulte Personalização do CSS ou do JavaScript.

Também é possível personalizar a central de ajuda usando a sua linguagem de modelos ou CSS:

• Referência de modelos da central de ajuda
• Manual de modelos da central de ajuda
• Manual de CSS da central de ajuda

Lista de receitas

Ao longo do tempo adicionaremos mais receitas. Sua imaginação é o limite para o que você pode fazer com JavaScript. Publique suas ideias na seção de comentários para que possamos adicioná-las a esse manual.

• Alteração do texto do link Minhas atividades
• Ocultação de campos personalizados na barra lateral do ticket em Minhas atividades
• Renomeação dos rótulos “Assunto” e “Descrição” no formulário de solicitação
• Pré-preenchimento dos campos de formulários de ticket personalizados
• Alteração da ordem dos campos personalizados no formulário de solicitação
• Adição de cabeçalhos no formulário de solicitação
• Ocultação de um idioma no menu suspenso de idiomas
• Substituição de cadeias de caracteres de texto no seletor de idiomas com ícones de sinalização
• Ocultação da Comunidade de acordo com o idioma selecionado
• Impedimento da indexação de artigos por mecanismos de pesquisa

Observação: quando você edita os modelos de página, CSS ou JavaScript de um tema padrão, ou quando desenvolve seu próprio tema, ele é salvo como um tema personalizado. Receitas que exigem temas personalizados não têm suporte do Zendesk e não são atualizadas automaticamente quando novos recursos ou temas são lançados (consulte Temas padrão e personalizados na central de ajuda).

Alteração do texto do link Minhas atividades

Adicione a classe Minhas atividades ao modelo header.hbs:

{{link "my_activities" role="menuitem" class='my-activities'}}

Adicione a seguinte instrução de jQuery à função $(document).ready(function() no modelo JavaScript:

$(' .my-activities').html(' See my requests');

Ocultação de campos personalizados na barra lateral do ticket em Minhas atividades

É possível usar JavaScript para ocultar campos personalizados na barra lateral do ticket na página Minhas atividades. Use os rótulos dos campos personalizados como base para selecioná-los. Por exemplo, se o rótulo de um campo personalizado for "Member rewards", você poderá ocultá-lo se o texto dele contiver as palavras "Member", "rewards" ou "Member rewards".

Adicione a seguinte função jQuery no arquivo script.js:

$(document).ready(function() {
  if (window.location.href.indexOf('/requests') > -1) {
    setTimeout(function() {
      $('dt:contains("Member rewards")').hide().next('dd').hide(); 
      // add more selectors as necessary
    }, 1000); // adjust the timeout duration as needed
}});

Renomeação dos rótulos “Assunto” e “Descrição” no formulário de solicitação

Adicione as seguintes instruções de jQuery à função $(document).ready(function() no modelo JavaScript:

$('label[for=request_subject]').html("Custom Subject");
$('label[for=request_description]').html("Custom Description");

Pré-preenchimento dos campos de formulários de ticket personalizados

Observação: somente alguns planos oferecem suporte para vários formulários de ticket. Para obter uma lista e informações gerais sobre o funcionamento dos formulários de ticket, consulte Criação de formulários de ticket para oferecer suporte a diversos tipos de solicitação.

Suponha que você use um formulário de ticket personalizado na sua central de ajuda para que os usuários registrem produtos. Você pode detectar o formulário e pré-preencher os campos quando um usuário abrir esse formulário na central de ajuda.

Você precisará da ID do formulário de ticket, que pode ser encontrada na URL do formulário na central de ajuda. Consulte este exemplo.

O exemplo de jQuery a seguir pré-preenche o campo Assunto com “Registro de produto” e o campo Descrição com “Este é o registro de um novo produto”. Adicione as instruções à função $(document).ready(function() no modelo JavaScript:

var ticketForm = location.search.split('ticket_form_id=')[1];
if(ticketForm == 18570) {
  $('section.main-column h1').html('Product Registration');
  $('#request_subject').val('Product Registration');
  $('#request_description').val('There is a new product registration.');
  $('#request_subject').parent('.request_subject').hide(); // Hide subject
  $('#request_description').parent('.request_description').hide(); 
  $("<p>Please upload your product receipt here.<p>").insertAfter('label:contains("Attachments")'); // Adds text below "Attachments"
}

Alteração da ordem dos campos personalizados no formulário de solicitação

Você precisará das IDs dos campos personalizados, que podem ser encontradas na interface do Zendesk Support. Consulte este exemplo.

var firstName = $('input#request_custom_fields_22231170').parent();
var lastName = $('input#request_custom_fields_22231180').parent();
firstName.insertBefore($('input#request_subject').parent());
lastName.insertBefore($('input#request_subject').parent());

Adição de cabeçalhos no formulário de solicitação

Adicione as seguintes instruções de jQuery à função $(document).ready(function() no modelo JavaScript:

 $('.form-field.request_anonymous_requester_email').prepend('<h2>Your personal information</h2>')
 $('.form-field.request_subject').prepend('<h2>Your issue</h2>');
 $('.form-field.request_custom_fields_21875914').prepend('<h2>Your device information</h2>');
 $('.form-field.request_custom_fields_22033620').prepend('<h2>Your purchase information</h2>');
 $('.form-field > label:contains("Attachments")').prepend('<h2>Support attachments</h2>');

Ocultação de um idioma no menu suspenso de idiomas

Ocultar um idioma no seletor de idiomas pode ser útil se o conteúdo naquele idioma não estiver pronto para o lançamento. Adicione a seguinte instrução de jQuery à função $(document).ready(function() no modelo JavaScript:

$("ul.dropdown-panel li a:contains('Français')").hide();

Substituição de cadeias de caracteres de texto no seletor de idiomas com ícones de sinalização

Por exemplo, se a central de ajuda fornece conteúdo em inglês (EUA) e alemão, você pode exibir as bandeiras nacionais em vez de “inglês (EUA)” e “alemão” no seletor de idioma. Adicione a seguinte instrução de jQuery à função $(document).ready(function() no modelo JavaScript:

$(function(){
$('a.dropdown-toggle:contains("English (US)")').html('<img src="http://icons.iconarchive.com/icons/gosquared/flag/48/United-States-flat-icon.png" width="48" height="48">');
$('a.dropdown-toggle:contains("Deutsch")').html('<img src="http://icons.iconarchive.com/icons/gosquared/flag/48/Germany-flat-icon.png" width="48" height="48">');
$('a:contains("English (US)")').html('<img src="http://icons.iconarchive.com/icons/gosquared/flag/48/United-States-flat-icon.png" width="48" height="48">');
$('a:contains("Deutsch")').html('<img src="http://icons.iconarchive.com/icons/gosquared/flag/48/Germany-flat-icon.png" width="48" height="48">');
});

Ocultação da Comunidade de acordo com o idioma selecionado

Adicione a seguinte instrução de jQuery à função $(document).ready(function() no modelo JavaScript:

if (document.location.pathname.match( (/hc\/de/) || (/hc\/es/) )) {
  $('.community').hide();
}

Impedimento da indexação de artigos por mecanismos de pesquisa

Uma metatag noindex informa aos mecanismos de pesquisa para não incluir a página específica em seus índices. Para adicionar dinamicamente uma metatag noindex a artigos específicos, adicione a seguinte função no arquivo script.js:

(function () {
  // Get the current page URL  
  const url = window.location.href;

  // Check if the URL is an article page
  if (url.indexOf("/articles/") == -1) {
    return;
  }

  //List the ids of articles to be excluded from indexing
  const articles = [5555300573850, 5500012959342]; //Example article ids
  for (let i = 0; i < articles.length; i++) {
    if (url.indexOf(articles[i]) !== -1) {
      //Create a new meta tag element
      var meta_tag = document.createElement("meta");
      meta_tag.setAttribute("name", "robots");
      meta_tag.setAttribute("content", "noindex");

      //Append the meta tag to the head of the document
      document.head.appendChild(meta_tag);
    }
  }
})();