¿Qué plan tengo?

Disponible en los planes Suite Growth y superioresDisponible en todos los planes de Guide

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.

Nota: Los usuarios de la versión de prueba tienen un plan Professional, que incluye opciones para la edición del código, pero ya no tendrán acceso a esa función si compran un plan Team.
Para obtener acceso al JavaScript del centro de ayuda y poder editarlo, consulte Personalizar CSS o JavaScript.

El centro de ayuda también se puede personalizar mediante el lenguaje de plantillas para el centro de ayuda o con CSS:

  • Referencia de las plantillas del centro de ayuda
  • Recetario de plantillas del centro de ayuda
  • Recetario de CSS del centro de ayuda

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

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

Nota: Solo algunos planes admiten varios formularios de ticket. Si desea ver una lista e información general sobre cómo funcionan los formularios de ticket, consulte Creación de formularios de ticket para atender una variedad de solicitudes.

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();
}
Tecnología de Zendesk