Você pode personalizar facilmente a aparência da Central de Ajuda usando JavaScript e jQuery. Este manual foi projetado para ajudá-lo a deixar a Central de Ajuda com a aparência que você quiser. O acesso ao código da página está disponível no Guide Professional.
Também é possível personalizar a Central de Ajuda usando a sua linguagem de modelos ou CSS:
Lista de receitas
Ao longo do tempo adicionaremos mais receitas, mas sem que isso se torne exaustivo. 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
- 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 texto no seletor de idiomas com ícones de sinalização
- Ocultação da Comunidade de acordo com o idioma selecionado
Alteração do texto do link Minhas atividades
Adicione a instrução jQuery a seguir à função $(document).ready(function()
no modelo de JavaScript:
$('#user-menu .my-activities').html(' See my requests');
Renomeação dos rótulos “Assunto” e “Descrição” no formulário de solicitação
Adicione as instruções jQuery a seguir à função $(document).ready(function()
no modelo de 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: os formulários de ticket personalizados estão disponíveis apenas no plano Enterprise ou como um complemento no plano Professional.
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 de 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 instruções jQuery a seguir à função $(document).ready(function()
no modelo de 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 instrução jQuery a seguir à função $(document).ready(function()
no modelo de JavaScript:
$("ul.dropdown-panel li a:contains('Français')").hide();
Substituição de cadeias de texto no seletor de idiomas com ícones de sinalização
Por exemplo, se a sua Central de Ajuda oferece conteúdo em inglês dos EUA e alemão, você poderia exibir as bandeiras nacionais, ao invés de “Inglês dos EUA” e “Alemão” no seletor de idiomas. Adicione a instrução jQuery a seguir à função $(document).ready(function()
no modelo de 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 instrução jQuery a seguir à função $(document).ready(function()
no modelo de JavaScript:
if (document.location.pathname.match( (/hc\/de/) || (/hc\/es/) )) {
$('.community').hide();
}
2 Comentários
Caso eu queira colocar um texto de ajuda no campo Assunto a exemplo do campo e-mail texto "Adicionar emails", como faço?
Seria uma instrução similar a essa? qual é a função que utilizo no lugar de ".val"
Olá,
Fizemos alguma pesquisa relativamente à sua questão e fizemos alguns testes e a função attr parece funcionar para alcançar o que pretende.
poderá utilizar algo como o seguinte:
Eu encontrei a documentação no seguinte artigo:
https://api.jquery.com/attr/
Espero que isto ajude!
Por favor, entre para comentar.