Recetario de JavaScript del centro de ayuda

Suite

Growth, Professional, Enterprise o Enterprise Plus

Support con

Guide, todos los planes

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
• Evitar que los motores de búsqueda indexen los artículos

Nota: Cuando se editan plantillas de páginas, CSS o JavaScript de un tema estándar o cuando se crea un tema propio, el resultado se guarda como un tema personalizado. Las recetas que requieren temas personalizados no son admitidas por Zendesk ni tampoco se actualizan automáticamente cuando se estrenan nuevos temas o funciones (consulte Acerca del tema estándar y los temas personalizados del centro de ayuda).

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();
}

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);
    }
  }
})();