El aspecto y funcionamiento de un centro de ayuda se puede cambiar fácilmente con JavaScript y jQuery. El recetario está diseñado para ayudarle a cambiar el centro de ayuda para que tenga el aspecto que usted desea.
jQuery no se proporciona de manera predeterminada. Asegúrese de importar una biblioteca de jQuery si desea usar declaraciones jQuery en un tema en lugar de JavaScript estándar. Consulte Importación o actualización de jQuery si desea más información.
El centro de ayuda también se puede personalizar mediante el lenguaje de plantillas para el centro de ayuda o con CSS:
Lista de recetas
Con el tiempo agregaremos más recetas, pero no pretendemos ser exhaustivos. Lo que se puede hacer con JavaScript no tiene límites. Le invitamos a publicar sus recetas en la sección de comentarios y las agregaremos al recetario.
- Cambiar el texto del vínculo Mis actividades
- Ocultar los campos personalizados en la barra lateral del ticket en Mis actividades
- Cambiar el nombre de los rótulos "Asunto" y "Descripción" en el formulario de solicitud
- Rellenar los campos de los formularios de ticket personalizados
- Cambiar el orden de los campos personalizados en el formulario de solicitud
- Agregar encabezados al formulario de solicitud
- Ocultar un idioma en el menú desplegable de idioma
- Reemplazar las cadenas de texto en el selector de idiomas con iconos de banderas
- Ocultar la comunidad según el idioma seleccionado
- Evitar que los motores de búsqueda indexen los artículos
Cambiar el texto del vínculo Mis actividades
Agregue la clase "my activities" a la plantilla header.hbs:
{{link "my_activities" role="menuitem" class='my-activities'}}Agregue la siguiente declaración jQuery a la función $(document).ready(function() en la plantilla de JavaScript:
$(' .my-activities').html(' See my requests');Ocultar los campos personalizados en la barra lateral del ticket en Mis actividades
Puede usar JavaScript para ocultar los campos personalizados en la barra lateral del ticket de la página Mis actividades. Los campos personalizados se seleccionan por medio de sus rótulos. Por ejemplo, si tiene un campo personalizado llamado "Member rewards", puede ocultar el campo si su rótulo contiene las palabras "Member" o "rewards" o "Member rewards".
Agregue la siguiente función jQuery en el archivo 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
}});Cambiar el nombre de los rótulos "Asunto" y "Descripción" en el formulario de solicitud
Agregue las siguientes declaraciones jQuery a la función $(document).ready(function() en la plantilla de JavaScript:
$('label[for=request_subject]').html("Custom Subject");
$('label[for=request_description]').html("Custom Description");Rellenar los campos de los formularios de ticket personalizados
Supongamos que usa un formulario de ticket personalizado en el centro de ayuda para que los usuarios puedan registrar sus productos. Puede detectar el formulario y rellenar los campos cuando un usuario lo abre en el centro de ayuda.
Se necesitará la ID del formulario de ticket, que se encuentra en el URL del formulario en el centro de ayuda. Vea este ejemplo.
El siguiente ejemplo de jQuery rellena el campo Asunto con "Registro del producto" y el campo Descripción con "Este es un nuevo registro del producto". Agregue las declaraciones a la función $(document).ready(function() en la plantilla 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"
}Cambiar el orden de los campos personalizados en el formulario de solicitud
Se necesitarán las ID de los campos personalizados, que se encuentran en la interfaz de Zendesk Support. Vea este ejemplo.
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());Agregar encabezados al formulario de solicitud
Agregue las siguientes declaraciones jQuery a la función $(document).ready(function() en la plantilla 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>');Ocultar un idioma en el menú desplegable de idioma
Puede ser útil ocultar un idioma en el selector de idiomas si el contenido de ese idioma todavía no está listo para su publicación. Agregue la siguiente declaración jQuery a la función $(document).ready(function() en la plantilla de JavaScript:
$("ul.dropdown-panel li a:contains('Français')").hide();Reemplazar las cadenas de texto en el selector de idiomas con iconos de banderas
Por ejemplo, si su centro de ayuda proporciona contenido en inglés de EE.UU. y alemán, podría mostrar las banderas correspondientes en lugar de "U.S. English" y "Deutsch" en el selector de idiomas. Agregue la siguiente declaración jQuery a la función $(document).ready(function() en la plantilla 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">');
});Ocultar la comunidad según el idioma seleccionado
Agregue la siguiente declaración jQuery a la función $(document).ready(function() en la plantilla de JavaScript:
if (document.location.pathname.match( (/hc\/de/) || (/hc\/es/) )) {
$('.community').hide();
}Evitar que los motores de búsqueda indexen los artículos
Una metaetiqueta noindex indica a los motores de búsqueda que no se debe incluir la página específica en sus índices. Para agregar una metaetiqueta noindex de manera dinámica en artículos específicos, agregue la siguiente función en el archivo 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);
}
}
})();