¿Qué plan tengo?
Suite, todas las versiones Growth, Professional, Enterprise o Enterprise Plus
Support con Guide Professional o Enterprise

Resumen de IA verificado ◀▼

El recetario de plantillas del centro de ayuda pone a su disposición fragmentos de código para personalizar su centro de ayuda con Curlybars. Puede usarlos con distintos fines: modificar las plantillas para categorías, secciones y artículos; ajustar la configuración de idiomas; permitir que se ordenen los comentarios o se emitan votos sobre ellos; y agregar funciones como los resultados de búsquedas generativas y las aprobaciones. 

Cada tema del centro de ayuda consta de una colección de plantillas de páginas editables y páginas personalizadas. El lenguaje de plantillas del centro de ayuda, Curlybars, se puede usar para obtener acceso a los datos del centro de ayuda y manipular el contenido de las páginas.

En este artículo se proporciona una lista de recetas con fragmentos de código que se pueden usar. Tenga en cuenta que algunas de las funciones que se mencionan en estas recetas ya podrían existir en el centro de ayuda, dependiendo de si se está usando un tema estándar o uno personalizado, y la fecha de activación del centro de ayuda.

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 Suite Team.

Nota: Este artículo se ofrece con fines de instrucción únicamente. Atención al cliente de Zendesk no ofrece soporte para el código personalizado ni lo garantiza.
En este artículo se tratan los siguientes temas:
  • Acerca del lenguaje de plantillas Curlybars
  • Personalizar las plantillas de páginas para categorías, secciones o artículos específicos
  • Personalizar los nombres de los idiomas en el selector de idiomas
  • Ocultar uno o varios idiomas en el selector de idiomas
  • Permitir que los usuarios ordenen los comentarios de los artículos por fecha o por votos
  • Agregar una barra de herramientas de formato al editor de comentarios del artículo
  • Permitir que los usuarios emitan votos sobre los comentarios de los artículos
  • Agregar resultados de búsquedas inmediatas (autocompletar) al centro de ayuda
  • Agregar la búsqueda federada para incluir contenido externo en la búsqueda del centro de ayuda
  • Agregar resultados de búsquedas generativas a un tema personalizado
  • Agregar clasificación de tipos de suscripción en la página Siguiendo de Mis actividades
  • Agregar las opciones de clasificación “created at” y “updated at” para las solicitudes en Mis actividades
  • Agregar botones Seguir/Dejar de seguir en una organización compartida
  • Permitir que los usuarios envíen copias (CC) de solicitudes de soporte a otros usuarios
  • Agregar un vínculo a la solicitud principal en las solicitudes de seguimiento
  • Activar CSAT para tickets resueltos en el Portal del cliente
  • Agregar botones para votar en los artículos
  • Agregar etiquetas de contenido a artículos y publicaciones
  • Agregar insignias al tema personalizado del centro de ayuda
  • Permitir que los usuarios vean los perfiles de usuario en el centro de ayuda
  • Activar subsecciones en el tema del centro de ayuda
  • Agregar filtros y resultados a la barra lateral de varios centros de ayuda en la página de resultados de la búsqueda
  • Agregar el filtro de spam al centro de ayuda
  • Agregar aprobaciones al centro de ayuda
  • Agregar el catálogo de servicios al centro de ayuda

Acerca del lenguaje de plantillas Curlybars

El centro de ayuda está basado en un framework de temas que tiene su propio lenguaje de plantillas para las personalizaciones avanzadas. Cada tema del centro de ayuda consta de una colección de plantillas editables y páginas personalizadas opcionales.

Las plantillas de páginas editables definen el diseño de cada página. Por ejemplo, hay una plantilla para los artículos de la base de conocimientos, una para la lista de solicitudes, etc. Una plantilla es simplemente un archivo de texto que se presenta en una página HTML cuando un usuario la quiere ver. Cada plantilla consta de una mezcla de marcado HTML y expresiones fáciles de identificar por sus llaves dobles, como {{post.title}}.

Las páginas personalizadas están integradas en el código base del tema del centro de ayuda, y tienen un URL específico al cual se puede acceder desde cualquier punto del centro de ayuda por medio de un vínculo. Las páginas personalizadas se pueden usar para crear y codificar páginas a partir de cero conforme a las necesidades particulares. Por ejemplo, las páginas personalizadas se pueden usar para crear páginas de aterrizaje especiales para el centro de ayuda, o incluso para crear páginas nuevas para incrustar contenido de fuentes exteriores a Zendesk.

El lenguaje de plantillas se llama Curlybars y es el que se encarga de implementar un extenso subconjunto del lenguaje Handlebars. Pero a diferencia de Handlebars que se renderiza en el lado del cliente, Curlybars se renderiza en el lado del servidor.

El lenguaje de plantillas del centro de ayuda se puede usar para obtener acceso a los datos del centro de ayuda y manipular el contenido de las páginas. En el siguiente ejemplo, el centro de ayuda devuelve una lista de los nombres y avatares de todas las personas que dejaron comentarios en la página:

{{#each comments}}
  <li>
    <div class="comment-avatar">
      <img src="{{author.avatar_url}}" alt="Avatar" />
    </div>
    <div class="comment-author">
      {{author.name}}
    </div>
  </li>
{{/each}} 

Anteriormente, se podían usar componentes para personalizar el centro de ayuda, pero no se podían personalizar los componentes en sí, a menos que se manipularan con JavaScript. Con Curlybars ahora se puede obtener acceso al HTML que antes estaba oculto dentro del componente y editarlo.

Si desea más información, consulte:
  • Referencia del lenguaje de plantillas del centro de ayuda
  • Uso del lenguaje de plantillas del centro de ayuda
  • Personalizar el contenido con Curlybars

Personalizar las plantillas de páginas para categorías, secciones o artículos específicos

Se pueden personalizar las plantillas de categoría, sección y artículo para categorías, secciones y artículos específicos respectivamente.

Plantillas aplicables
  • Categoría
  • Sección
  • Artículo
Receta
  • Especifique la ID de la categoría, la sección o el artículo en un bloque is:
    {{#is id 200646205}}
      ...
    {{/is}}

Ejemplo

Si se inserta el siguiente bloque en la plantilla de sección, se personalizará la plantilla para las secciones 200646205 y 203133596:

{{#is section.id 200646205}}
  <p><strong>This is important security information! Pay attention!</strong></p>
{{/is}}
{{#is section.id 203133596}}
  <p>Videos available at <a href="https://www.somelink.com">Learning to fly</a></p>
{{/is}}

Referencia

  • is helper

Personalizar los nombres de los idiomas en el selector de idiomas

Se pueden personalizar los nombres de los idiomas en el selector de idiomas de todas las páginas del centro de ayuda. Esto es útil si se desea usar una variante del idioma, por ejemplo, "English (US)" para todas las variantes del idioma "English".

Plantilla aplicable
  • Encabezado
Expresión aplicable
  • {{#if alternative_locales}}...{{/if}}
Receta
  • Reemplace la expresión {{current_locale.name}} con la siguiente expresión condicional:
    {{#is current_locale.name 'English (US)'}}
      English
    {{else}}
      {{current_locale.name}}
    {{/is}}

    También reemplace la expresión de región alternativa {{name}} con la siguiente expresión condicional:

    {{#is name 'English (US)'}}
      English
    {{else}}
      {{name}}
    {{/is}}

Ejemplo

{{#if alternative_locales}}
  <div class="dropdown language-selector" aria-haspopup="true">
  <a class="dropdown-toggle">
  {{#is current_locale.name 'English (US)'}}
    English
  {{else}}
    {{current_locale.name}}
  {{/is}}
  </a>
  <span class="dropdown-menu dropdown-menu-end" role="menu">
  {{#each alternative_locales}}
    <a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
    {{#is name 'English (US)'}}
      English
    {{else}}
      {{name}}
    {{/is}}
    </a>
  {{/each}}
  </span>
  </div>
{{/if}}

Referencia

  • is helper

Ocultar uno o varios idiomas en el selector de idiomas

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.

Plantilla aplicable
  • Encabezado
Expresión aplicable
  • {{#each alternative_locales}}...{{/each}}
Receta
  • Reemplace la expresión <a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem"> {{name}} </a> con la siguiente expresión condicional:
    {{#is name 'Français'}}
      {{! do nothing }}
    {{else}}
      <a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
      {{name}}
      </a>
    {{/is}}

Ejemplo

{{#each alternative_locales}}
  {{#is name 'Français'}}
    {{! do nothing }}
  {{else}}
    <a href="{{url}}" dir="{{direction}}" rel="nofollow" role="menuitem">
      {{name}}
    </a>
  {{/is}}
{{/each}}

Referencia

  • is helper

Permitir que los usuarios ordenen los comentarios de los artículos por fecha o por votos

De manera predeterminada, los comentarios de los artículos se ordenan por fecha, del más reciente al más antiguo. Se pueden agregar vínculos Fecha y Votos que los usuarios pueden usar para ordenar los comentarios por fecha o por número de votos.

Nota: Los vínculos para ordenar por Fecha y Votos están disponibles de manera predeterminada en los temas estándar y en los temas que se personalizaron después del lanzamiento de la nueva comunidad el 30 de noviembre de 2015.
Plantilla aplicable
  • Artículo
Elemento HTML aplicable
  • <section class="article-comments">...</section>
Receta
  • Inserte la siguiente etiqueta div después de la etiqueta de encabezado de la sección de comentarios, <h2>{{t 'comments'}}</h2>, de preferencia después de la expresión {{#if comments}}, si existe, para cerciorarse de que los clasificadores no aparezcan si nadie ha dejado un comentario todavía:
    <div class="comment-sorter">
      Sort by: 
      {{#each comment_sorters}}
        <a aria-selected="{{selected}}" href="{{url}}">{{name}}</a>
      {{/each}}
    </div> 

Ejemplo

<section class="article-comments">
  <h2>{{t 'comments'}}</h2>
    {{#if comments}}

    <div class="comment-sorter">
      Sort by: 
      {{#each comment_sorters}}
        <a aria-selected="{{selected}}" href="{{url}}">{{name}}</a>
     {{/each}}
    </div> 
     
    <ul class="comment-list">
      {{#each comments}}
      ...

Referencia

  • comment_sorters property

Agregar una barra de herramientas de formato al editor de comentarios del artículo

Se puede agregar una barra de herramientas de formato al editor para los comentarios de los artículos. Los usuarios pueden agregar negrita y cursiva, listas ordenadas y sin ordenar, imágenes y vínculos.

Nota: La barra de herramientas de formato está disponible de manera predeterminada en los temas estándar y en los temas que se personalizaron después del lanzamiento de la nueva comunidad el 30 de noviembre de 2015.
Plantilla aplicable
  • Artículo
Objeto aplicable
  • {{#form 'comment'}}...{{/form}}
Receta
  • Busque y reemplace la expresión {{textarea 'body'}} en el objeto form con {{wysiwyg 'body'}}

Ejemplo

{{#form 'comment' class='comment-form'}}
  <div class="comment-avatar">
    {{user_avatar class='user-avatar'}}
  </div>

  <div class="comment-container">
     {{wysiwyg 'body'}}
     <div class="comment-form-controls">
       {{input type='submit'}}
     </div>
  </div>
{{/form}}

Referencia

  • wysiwyg helper

Permitir que los usuarios emitan votos sobre los comentarios de los artículos

De manera predeterminada, los usuarios pueden emitir votos sobre los artículos. También se puede permitir que emitan votos sobre los comentarios de los artículos.

Nota: Los vínculos para emitir votos están disponibles de manera predeterminada en los temas estándar y en los temas que se personalizaron después del lanzamiento de la nueva comunidad el 30 de noviembre de 2015.
Plantilla aplicable
  • Artículo
Expresión aplicable
  • {{#each comments}}...{{/each}}
Receta
  • Inserte la siguiente etiqueta div después de la etiqueta <li id="{{anchor}}">:
    <div class="comment-vote vote">
      {{vote 'up' class="article-vote-up" selected_class="vote-voted"}}
      {{vote 'sum' class="article-vote-sum"}}
      {{vote 'down' class="article-vote-down" selected_class="vote-voted"}}
    </div>

    Los asistentes de voto de arriba toman prestadas las clases CSS de los votos de artículos para estilizar los vínculos de los votos de comentarios. Puede definir sus propias clases para estilizar los votos de comentarios.

Ejemplo

{{#each comments}}
  <li id="{{anchor}}" class="comment">

  <div class="comment-vote vote">
    {{vote 'up' class="article-vote-up" selected_class="vote-voted"}}
    {{vote 'sum' class="article-vote-sum"}}
    {{vote 'down' class="article-vote-down" selected_class="vote-voted"}}
  </div>
  
  <div class="comment-avatar {{#if author.agent}} comment-avatar-agent {{/if}}">
    <img src="{{author.avatar_url}}" alt="Avatar">
  </div>
  ...

Referencia

  • vote helper

Agregar resultados de búsquedas generativas a un tema personalizado

La búsqueda generativa se vale de la IA para responder a las búsquedas de los usuarios del centro de ayuda. La búsqueda generativa proporciona a los usuarios que están haciendo búsquedas en el centro de ayuda las respuestas a sus preguntas, sin que tengan que hacer clic en varios resultados de búsquedas.

Nota: La búsqueda generativa está disponible de manera predeterminada en los temas estándar introducidos después del 26 de marzo de 2025. Si su centro de ayuda fue creado antes del 26 de marzo de 2025 y usa un tema personalizado, tendrá que actualizarlo si desea agregar la búsqueda generativa. Esta búsqueda está disponible para todas las versiones de la API de creación de plantillas. La búsqueda generativa se puede desactivar, de ser necesario, en la configuración de la búsqueda.

Una vez activada, la búsqueda generativa se encarga de evaluar las preguntas que los usuarios ingresan en la búsqueda del centro de ayuda. Luego, la IA generativa evalúa los artículos y las publicaciones principales que coinciden con la pregunta y genera una respuesta. En los planes Enterprise que tienen configurada la búsqueda federada, la IA generativa también evalúa el contenido externo y lo puede incluir en la respuesta. La respuesta generada se publica de manera predeterminada en la parte superior de los resultados de la búsqueda. Consulte Uso de la búsqueda generativa para proporcionar respuestas basadas en IA para las consultas de búsqueda.

Plantilla aplicable
  • Página de resultados de la búsqueda (search_results.hbs)
Receta
  • Agregue el helper {{generative_answers}} a la plantilla search_results.hbs del tema donde desea que aparezcan las respuestas generativas.

Ejemplo

<section id="main-content" class="search-results-column">
{{generative_answers}}
<h1 class="search-results-subheading">

Referencia

  • search_results.hbs
  • generative_answers helper

Agregar resultados de búsquedas inmediatas (autocompletar búsqueda) al tema personalizado del centro de ayuda

Se puede agregar la función de búsqueda inmediata al tema personalizado para mostrar los vínculos a los artículos recomendados mientras el usuario ingresa su búsqueda.

Nota: La búsqueda inmediata está disponible de manera predeterminada en los temas estándar y en los temas que se personalizaron después del lanzamiento de la función de búsqueda inmediata el 5 de julio de 2016. De ser necesario, puede desactivar la búsqueda inmediata eliminándola de su tema.

Cuando la búsqueda inmediata está activada, a medida que el usuario escribe un término de búsqueda aparece una lista de los artículos recomendados (un máximo de seis). Al hacer la búsqueda inmediata solo se toman en cuenta los títulos de los artículos. El usuario puede seleccionar artículos coincidentes directamente en el cuadro de búsqueda sin necesidad de ir a la página de resultados de la búsqueda.

Plantillas aplicables
  • La plantilla que contenga su expresión de búsqueda (por lo general la plantilla del encabezado o de la página principal)

Expresión aplicable

  • {{search}}
Receta
  • Agregue instant=true a la expresión de búsqueda.
    {{search instant=true}}

Ejemplo

<div class="search-box">
  <h1 class="help-center-name">{{help_center.name}}</h1>
  {{search instant=true}}
</div>

Agregar la búsqueda federada para incluir contenido externo en la búsqueda del centro de ayuda

La activación de la búsqueda federada en la plantilla Resultados de la búsqueda del centro de ayuda consta de dos partes:

  • Agregar filtros a la barra lateral
  • Iteración de los resultados

Agregar filtros a la barra lateral

Para actualizar la plantilla de los resultados de la búsqueda se deben actualizar las propiedades utilizadas en los filtros de la barra lateral.

Actualice el código siguiente en <div class="search-results">.
<section class="search-results-sidebar">
{{#if source_filters}}
  <section class="filters-in-section collapsible-sidebar" aria-expanded="false">
    <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
    </button>
    <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_source'}}</h3>
    <ul class="multibrand-filter-list multibrand-filter-list--collapsed">
      {{#each source_filters}}
        <li>
        {{#if selected}}
          <a href="{{url}}" class="sidenav-item current" aria-current="page">
        {{else}}
          <a href="{{url}}" class="sidenav-item">
        {{/if}}
            <span class="sidenav-subitem filter-name">{{name}}</span>
            <span class="sidenav-subitem doc-count">({{count}})</span>
          </a>
        </li>
      {{/each}}
      <buttonclass="see-all-filters"aria-hidden="true"aria-label="{{t'show_more_sources'}}">{{t'show_more_sources'}}</button>    </ul>
  </section>
{{/if}}
{{#if type_filters}}
  <section class="filters-in-section collapsible-sidebar" aria-expanded="false">
    <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
    </button>
    <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_type'}}</h3>
    <ul class="multibrand-filter-list multibrand-filter-list--collapsed">
      {{#each type_filters}}
        <li>
        {{#if selected}}
          <a href="{{url}}" class="sidenav-item current" aria-current="page">
        {{else}}
          <a href="{{url}}" class="sidenav-item">
        {{/if}}
            <span class="sidenav-subitem filter-name">{{name}}</span>
            <span class="sidenav-subitem doc-count">({{count}})</span>
          </a>
        </li>
      {{/each}}
    </ul>
  </section>
{{/if}}
{{#if subfilters}}
  <section class="filters-in-section collapsible-sidebar" aria-expanded="false">
    <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
    </button>
    {{#is current_filter.identifier 'knowledge_base'}}
      <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_category'}}</h3>
    {{/is}}
    {{#is current_filter.identifier 'community'}}
      <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_topic'}}</h3>
    {{/is}}
    <ul class="multibrand-filter-list multibrand-filter-list--collapsed">
      {{#each subfilters}}
        <li>
          {{#if selected}}
            <a href="{{url}}" class="sidenav-item current" aria-current="page">
          {{else}}
            <a href="{{url}}" class="sidenav-item">
          {{/if}}
            <span class="sidenav-subitem filter-name">{{name}}</span>
            <span class="sidenav-subitem doc-count">({{count}})</span>
          </a>
        </li>
      {{/each}}
      {{#is current_filter.identifier 'knowledge_base'}}
        <button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_categories'}}">{{t 'show_more_categories'}}</button>
      {{/is}}
      {{#is current_filter.identifier 'community'}}
        <button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_topics'}}">{{t 'show_more_topics'}}</button>
      {{/is}}
    </ul>
  </section>
{{/if}}
</section>

Iteración de los resultados

Este fragmento es un ejemplo de cómo se puede usar el asistente {{results}} para iterar a través de los resultados de la búsqueda federada:

{{#if results}}
<ul class="search-results-list">
  {{#each results}}
	<li class="search-result-list-item result-{{type}}">
	  <h2 class="search-result-title">
		<a href="{{url}}" class="results-list-item-link"{{#if is_external}}
               target=”_blank” {{/if}}>
                     {{title}}
                     {{#if is_external}}
                       <svg viewBox="0 0 24 24" width="12px" height="12px" id="zd-svg-icon-12-new-window-fill"><path d="M 19.980469 2.9902344 A 1.0001 1.0001 0 0 0 19.869141 3 L 15 3 A 1.0001 1.0001 0 1 0 15 5 L 17.585938 5 L 8.2929688 14.292969 A 1.0001 1.0001 0 1 0 9.7070312 15.707031 L 19 6.4140625 L 19 9 A 1.0001 1.0001 0 1 0 21 9 L 21 4.1269531 A 1.0001 1.0001 0 0 0 19.980469 2.9902344 z M 5 3 C 3.9069372 3 3 3.9069372 3 5 L 3 19 C 3 20.093063 3.9069372 21 5 21 L 19 21 C 20.093063 21 21 20.093063 21 19 L 21 13 A 1.0001 1.0001 0 1 0 19 13 L 19 19 L 5 19 L 5 5 L 11 5 A 1.0001 1.0001 0 1 0 11 3 L 5 3 z"/></svg>
                     {{/if}}

</a>
	  </h2>
	  <article>
		<div class="search-result-icons">
		  {{#if vote_sum}}
			<span class="search-result-votes">{{vote_sum}}</span>
		  {{/if}}
		  {{#if comment_count}}
			<span class="search-result-meta-count">
			  {{comment_count}}
			</span>
		  {{/if}}
		</div>
		<ul class="meta-group">
		  <li>
			<ol class="breadcrumbs search-result-breadcrumbs">
			  {{#each path_steps}}
				<li title="{{name}}"><a href="{{url}}" target="{{target}}">{{name}}</a></li>
			  {{/each}}
			</ol>
		  </li>
		  <li class="meta-data">{{author.name}}</li>
		  <li class="meta-data">{{date created_at}}</li>
		</ul>
		<div class="search-results-description">{{text}}</div>
	  </article>
	</li>
  {{/each}}
</ul>
{{else}}
<p>
  {{t 'no_results_unified'}}
  {{#link 'help_center'}}
	{{t 'browse_help_center'}}
  {{/link}}
</p>
{{/if}}

Agregar clasificación de tipos de suscripción en la página Siguiendo de Mis actividades

Para que sea más fácil que los usuarios vean sus suscripciones, puede permitir que ordenen las suscripciones por tipo en la página Mis actividades > Siguiendo.

Plantillas aplicables
  • Página de seguimiento
Receta
  • Debajo de la etiqueta <nav>, inserte el código siguiente:
    <div class="my-activities-following-header">
      <span class="dropdown">
        <span class="dropdown-toggle">
          {{current_filter.label}}
        </span>
        <span class="dropdown-menu" role="menu">
          {{#each filters}}
            <a href="{{url}}" aria-selected="{{selected}}" role="menuitem">
              {{name}}
            </a>
          {{/each}}
        </span>
      </span>
    </div>
    
    

Agregar las opciones de clasificación “created at” y “updated at” para las solicitudes en Mis actividades

Se pueden agregar las opciones de clasificación “created at” (“creado el”) y “updated at” (“actualizado el”) para los usuarios finales en la página de solicitudes en Mis actividades.

Nota: Las opciones de clasificación “created at” y “updated at” vienen incluidas de manera predeterminada en los temas estándar y los temas que fueron personalizados después de agosto de 2016.
Plantilla aplicable
  • Página de lista de solicitudes

Receta

  • Reemplace {{t 'created'}} con:
    {{#link 'requests' sort_by='created_at'}}{{t 'created'}}{{/link}}
  • Reemplace {{t 'last_activity'}} con:
    {{#link 'requests' sort_by='updated_at'}}{{t 'last_activity'}}{{/link}}
Referencia
  • requests link helper

Agregar botones Seguir/Dejar de seguir en una organización compartida

Se puede permitir que los usuarios reciban notificaciones por correo electrónico de las solicitudes enviadas a su organización compartida. El asistente {{subscribe}} inserta un botón "seguir" que los usuarios pueden usar si desean recibir notificaciones por correo electrónico cuando se crea o se actualiza una solicitud en su organización compartida. Los usuarios también tienen la opción de dejar de seguir si ya no desean recibir las actualizaciones.

Nota: El botón Seguir para las organizaciones compartidas está disponible de manera predeterminada en los temas estándar y en los temas que se personalizaron después del 23 de enero de 2016.
Plantilla aplicable
  • Página de lista de solicitudes
Objeto aplicable
  • {{#form 'requests_filter'}}...{{/form}}
Receta
  • Agregue el asistente {{subscribe}} al objeto form.

Ejemplo

{{#form 'requests_filter' class='request-table-toolbar'}}
  {{input 'query' id='quick-search' type='search' class='requests-search'}}
  <div class="request-table-filters">
    {{label 'organization' for='request-organization-select' class='request-filter'}}
    {{select 'organization' id='request-organization-select' class='request-filter'}}
    {{subscribe}}
    {{label 'status' for='request-status-select' class='request-filter'}}
    {{select 'status' id='request-status-select' class='request-filter'}}
  </div>
{{/form}}

Referencia

  • subscribe helper

Permitir que los usuarios que han iniciado sesión envíen copias (CC) de solicitudes de soporte a otros usuarios

Se puede permitir que los usuarios que han iniciado sesión agreguen copias CC a las solicitudes de soporte nuevas y existentes en el centro de ayuda. Cuando se agrega una copia CC a una solicitud de soporte, el usuario que recibe la copia recibirá notificaciones por correo electrónico sobre las actualizaciones a los tickets.

Nota: La opción CC está disponible para las solicitudes de soporte de manera predeterminada en los temas estándar y en los temas que se personalizaron después del 14 de diciembre de 2015.

Después de agregar el código al tema personalizado, se debe activar la función (consulte Configurar permisos para enviar copias (CC)).

Plantilla aplicable
  • Página de solicitud
Objeto aplicable
  • {{#form 'comment' class='comment-form'}}...{{/form}}
Receta
  • Inserte el siguiente fragmento dentro del formulario de comentarios.
    {{#if help_center.request_ccs_enabled}}  
      <div class="comment-ccs">
         {{token_field 'ccs'
            class="ccs-input"}}
      </div>
     {{/if}}

Agregar un vínculo a la solicitud principal en las solicitudes de seguimiento

Se puede agregar un vínculo a la solicitud principal (si existe) en una solicitud de seguimiento.

Nota: El vínculo a la solicitud principal en la solicitud de seguimiento está disponible de manera predeterminada en los temas estándar y los temas que fueron personalizados después de agosto de 2016.

Plantilla aplicable
  • Página de solicitud

Receta

  • Agregue el siguiente fragmento a la plantilla de la página Solicitud donde desea mostrar el vínculo al ticket principal, si fuera el caso:
    {{#if request.followup_source_id}}
      <dl class="request-details">
        <dt>{{t 'followup'}}</dt>
        <dd>{{link 'request' id=request.followup_source_id}}
    </dd>
      </dl>
    {{/if}}
Referencia
  • new request page

Activar CSAT para tickets resueltos en el Portal del cliente

La encuesta de CSAT se puede usar para recopilar comentarios de los usuarios finales a través del Portal del cliente.
Nota: Cuando CSAT está activado, la opción CSAT del Portal del cliente está disponible de forma predeterminada en los temas estándar y los temas personalizados que se basan en la API de creación de plantillas v3.2.0 (publicada el 8 de febrero de 2024) o posterior.
Plantilla aplicable
  • Página de solicitud
Receta
  • Agregue un bloque {{#with satisfaction_response}}...{{/with}} a la plantilla request_page.hbs.
Ejemplo
  • Consulte el archivo request_page.hbs del tema Copenhagen en GitHub.

  • Agregue el siguiente código de plantilla:
    {{#with satisfaction_response}}
      {{#with rating}}
    	<dl class="request-details">
    	  <dt>{{t 'rating'}}</dt>
    	  <dd>
    		<div>
    		  {{#is scale_type 'numeric'}}
    			{{t 'numerical_rating' value=value max_value=max_value}}
    		  {{else}}
    			{{scale_value}}
    		  {{/is}}
    		</div>
    
    		{{#link 'survey_response' id=../id}}
    		  {{#if ../editable}}
    			{{t 'edit_feedback'}}
    		  {{else}}
    			{{t 'view_feedback'}}
    		  {{/if}}
    		{{/link}}
    	  </dd>
    	</dl>
      {{else}}
    	{{#if editable}}
    	  <dl class="request-details">
    		<dt>{{t 'rating'}}</dt>
    		<dd>
    		  {{#link 'survey_response' id=id}}
    			{{t 'add_feedback'}}
    		  {{/link}}
    		</dd>
    	  </dl>
    	{{/if}}
      {{/with}}
    {{/with}}
Referencia
  • satisfaction_response

Agregar botones para votar en los artículos

Los botones para votar en los artículos forman parte del tema Copenhagen estándar. Pero si la opción para votar no está disponible en los artículos, es posible que se hayan eliminado los botones del tema.

El código para agregar botones para votar puede variar según el tema, pero este es el código para el tema Copenhagen estándar, por si se necesita.

Plantilla aplicable
  • Artículo
Receta
  • Agregue el código siguiente a la plantilla Página de artículo:
    {{#with article}}
      <div class="article-votes">
        <span class="article-votes-question">{{t 'was_this_article_helpful'}}</span>
        <div class="article-votes-controls" role='radiogroup'>
          {{vote 'up' role='radio' class='button article-vote article-vote-up'}}
          {{vote 'down' role='radio' class='button article-vote article-vote-down'}}
        </div>
        <small class="article-votes-count">
          {{vote 'label' class='article-vote-label'}}
        </small>
      </div>
    {{/with}}

Agregar etiquetas de contenido a artículos y publicaciones

El tema Copenhagen estándar muestra etiquetas de contenido en los artículos, las publicaciones de la comunidad y las páginas de búsqueda de manera predeterminada. Si está usando un tema personalizado o del Marketplace, es posible que tenga que actualizar el tema para mostrar las etiquetas de contenido en esas páginas. Para comenzar, puede usar los siguientes archivos de plantilla del tema Copenhagen como guía:

  • article_page.hbs
  • community_post_page.hbs
  • new_community_post_page.hbs
  • search_results.hbs

Una vez que se sienta a gusto, puede comenzar a agregar etiquetas de contenido en otras páginas. Por ejemplo, el siguiente fragmento agrega una lista de etiquetas de contenido a la plantilla de la página de temas de la comunidad.

{{#each posts}}
  ...

  {{#if (compare content_tags.length ">" 0)}}
    <ul class="content-tag-list">
      {{#each content_tags}}
        <li class="content-tag-item">
          {{#link "search_result" content_tag_id=id}}
            {{name}}
          {{/link}}
        </li>
      {{/each}}
    </ul>
  {{/if}}

  ...

{{/each}}

Agregar insignias al tema personalizado del centro de ayuda

Nota: Las insignias están disponibles de manera predeterminada a partir del 1 de septiembre de 2020.
Si no desea usar el tema Copenhagen estándar, puede crear un tema personalizado. Sin embargo, con las insignias es necesario utilizar la API de creación de plantillas v2 para temas. Si aún está usando la v1, consulte las instrucciones de actualización para hacer esto. También puede consultar el tema de ejemplo de Zendesk en GitHub para que le sirva de inspiración.

Este tema trata sobre lo siguiente:

  • Agregar el nuevo asistente actions de perfil de usuario
  • Mostrar las insignias de cargo en la página de lista de publicaciones
  • Mostrar las insignias de cargo en una página de publicaciones y de comentarios
  • Mostrar las insignias de cargo y logros en una página de perfil de usuario

Agregar el nuevo asistente actions de perfil de usuario

Deberá agregar la opción Otorgar insignia si desea otorgar insignias a los agentes. Sin embargo, antes de poder hacerlo, deberá agregar el nuevo asistente actions.

Para agregar la declaración del asistente actions

  1. Abra el editor de código de temas en línea y vaya a la página del perfil de usuario de un agente.
    Page filename: user_profile_page.hbs
  2. Ubique la declaración del asistente edit.
    {{edit}}
  3. Sustituya la declaración del asistente edit por la nueva declaración del asistente actions.
    {{actions}}

Ahora los agentes podrán otorgar insignias. El nuevo botón será rediseñado con CSS de acuerdo a sus preferencias. Si desea más inspiración consulte el tema de ejemplo de Zendesk.

Mostrar las insignias de cargo en la página de lista de publicaciones

Puede agregar insignias de cargos a modo de rótulos que se encuentran contiguos al nombre del autor en la página de la lista de publicaciones. El aspecto es parecido a los rótulos del estado de publicación, ya que, para hacerlo más sencillo, se vuelve a utilizar la clase de estilo.

Para mostrar las insignias de cargo en la página de lista de publicaciones

  1. Abra el editor del código de temas en línea y vaya a:
    Page filename: community_topic_page.hbs
  2. Busque la declaración author name. En el tema Copenhagen, la línea se vería así:
    <li class="meta-data">{{author.name}}</li>
  3. Agregue este fragmento a la línea después de la declaración:
    {{#each author.badges}}
    <li class="meta-data">
       {{#is category_slug "titles"}}
           <span class="status-label">{{name}}</span>
       {{/is}}
    </li>
    {{/each}}

Para usuarios avanzados: no (re)utilice la clase CSS status-label en esta situación. En lugar de ello, cree una nueva clase CSS especializada que se pueda modificar de forma independiente del estilo del rótulo del estado.

Este es un ejemplo de una insignia de cargo para un miembro de la comunidad

Ejemplo de insignia de cargo de Gather.

Mostrar las insignias de cargo en una página de publicaciones y de comentarios

Para mostrar las insignias de cargo en la página de lista de publicaciones

  1. Abra el editor del código de temas en línea y vaya a:
    Page filename: community_post_page.hbs
  2. Busque la declaración author name. En el tema Copenhagen, la línea se vería así:
    <li class="meta-data">{{author.name}}</li>
  3. Agregue este fragmento a la línea después de la declaración:
    {{#each author.badges}}
    <li class="meta-data">
       {{#is category_slug "titles"}}
           <span class="status-label">{{name}}</span>
       {{/is}}
    </li>
    {{/each}}

Mostrar las insignias de cargo y logros en una página de perfil de usuario

En una página de perfil de usuario, lo más seguro es que quiera agregar más que solo las insignias de cargos; por ejemplo, también puede agregar los logros del usuario. El siguiente ejemplo supone que existe un icono gráfico para cada insignia de logro. Basándonos en el tema Copenhagen, las insignias de logros podrían verse así:

Insignias de Gather para cargos y éxitos.

Para mostrar las insignias de cargo y logros en una página de perfil de usuario

  1. Abra el editor del código de temas en línea y vaya a:
    Page filename: user_profile_page.hbs
  2. Ubique las líneas en el archivo donde se renderiza el nombre del usuario. Por ejemplo:
    <h1 class="name">
      {{#if user.url}}
        <a href="{{user.url}}" target="_zendesk_lotus" title="{{t 'open_user_in_support'}}">{{user.name}}</a>
      {{else}}
        {{user.name}}
      {{/if}}
    </h1>
  3. Reemplace ese fragmento con lo siguiente:
    <h1 class="name">
      {{#if user.url}}
        <a href="{{user.url}}" target="_zendesk_lotus" title="{{t 'open_user_in_support'}}">{{user.name}}</a>
      {{else}}
        {{user.name}}
      {{/if}}
      {{#each user.badges}}    {{#is category_slug "titles"}}
          <span class="status-label">{{name}}</span>
        {{/is}}  {{/each}}
    </h1>
    <div style="margin-top: 1em;">
      {{#each user.badges}}    {{#is category_slug "achievements"}}
          <div style="float: left; text-align: center; padding: 0.5em; margin: 0.5em; background: white; border-radius: 0.2em;">
            <img src="{{icon_url}}" height="40"><br>
            <span style="font-size: 0.8em;">{{name}}</span>
          </div>
        {{/is}}  {{/each}}
    </div>

En este ejemplo, todos los estilos CSS están integrados para que el ejemplo sea sencillo. Lo más conveniente es usar estos ejemplos de inspiración pero dedicar el tiempo que sea necesario para asegurarse de que el estilo refleje su propio tema.

Permitir que los usuarios vean los perfiles de usuario en el centro de ayuda

En esta sección se describe cómo actualizar las plantillas necesarias para que los usuarios del centro de ayuda puedan hacer clic en el nombre o el avatar del autor y ver el perfil del usuario.

Nota: Los perfiles de usuario están disponibles de manera predeterminada en los temas estándar y en los temas que se personalizaron después del 20 de junio de 2016.
Las soluciones que se describen en esta sección implican usar el asistente link en el lenguaje de plantillas del centro de ayuda. Consulte link helper en la documentación de las plantillas para actualizar las siguientes plantillas:
  • Artículos
  • Publicaciones en la comunidad
  • Página de resultados de la búsqueda

Artículos

Haga las siguientes actualizaciones en la plantilla de la página de artículo.

Actualizar el nombre del autor del artículo

Reemplace el siguiente bloque if:

{{#if article.author.url}}
  <a href="{{article.author.url}}" target="_zendesk_lotus">
    {{article.author.name}}
  </a>
{{else}}
  {{article.author.name}}
{{/if}}

con el siguiente asistente link:

{{#link "user_profile" id=article.author.id class="user-profile"}}
  {{article.author.name}}
{{/link}}
Actualizar los nombres de los autores de los comentarios

Reemplace el siguiente bloque if:

{{#if author.url}}
  <a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
  {{author.name}}
{{/if}}

con el siguiente asistente link:

{{#link "user_profile" id=author.id class="user-profile"}}
  {{author.name}}
{{/link}}
Actualizar el avatar de los autores de los artículos y los comentarios

Reemplace la siguiente etiqueta de imagen:

<img src="{{article.author.avatar_url}}" alt="Avatar"/>

con el siguiente asistente link:

{{#link "user_profile" id=article.author.id class="user-profile"}}
  <img src="{{article.author.avatar_url}}" alt="Avatar" />
{{/link}}

Publicaciones en la comunidad

Haga las siguientes actualizaciones en la plantilla de la página de publicación de la comunidad.

Actualizar los nombres de los autores de las publicaciones

Reemplace el siguiente bloque if:

{{#if post.author.url}}
  <a href="{{post.author.url}}" target="_zendesk_lotus">
    {{post.author.name}}
  </a>
  {{else}}
    {{post.author.name}}
{{/if}}

con el siguiente asistente link:

{{#link "user_profile" id=post.author.id class="user-profile"}}
  {{post.author.name}}
{{/link}}
Actualizar los nombres de los autores de los comentarios

Reemplace el siguiente bloque if:

{{#if author.url}}
  <a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
  {{author.name}}
{{/if}}

con el siguiente asistente link:

{{#link "user_profile" id=author.id class="user-profile"}}
  {{author.name}}
{{/link}}
Actualizar los avatares de los autores de las publicaciones

Reemplace la siguiente etiqueta de imagen:

<img src="{{post.author.avatar_url}}" alt="Avatar"/>

con el siguiente asistente link:

{{#link "user_profile" id=post.author.id class="user-profile"}}
  <img src="{{post.author.avatar_url}}" alt="Avatar" />
{{/link}}
Actualizar los avatares de los autores de los comentarios

Reemplace la siguiente etiqueta de imagen:

<img src="{{author.avatar_url}}" alt="Avatar"/>

con el siguiente asistente link:

{{#link "user_profile" id=author.id class="user-profile"}}
  <img src="{{author.avatar_url}}" alt="Avatar" />
{{/link}}

Resultados de la búsqueda

Haga las siguientes actualizaciones en la plantilla de resultados de la búsqueda.

Actualizar los nombres de los autores de los artículos en los resultados

Reemplace el siguiente bloque if en el bloque {{#each article_results}}:

{{#if author.url}}
  <a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
  {{author.name}}
{{/if}}

con el siguiente asistente link:

{{#link "user_profile" id=author.id class="user-profile"}}
  {{author.name}}
{{/link}}
Actualizar los nombres de los autores de las publicaciones en los resultados

Reemplace el siguiente bloque if en el bloque {{#each post_results}}:

{{#if author.url}}
  <a href="{{author.url}}" target="_zendesk_lotus">{{author.name}}</a>
{{else}}
  {{author.name}}
{{/if}}

con el siguiente asistente link:

{{#link "user_profile" id=author.id class="user-profile"}}
  {{author.name}}
{{/link}}
Actualizar los resultados de la búsqueda en los temas más antiguos

Si tiene un tema más antiguo, es probable que los resultados de la búsqueda utilicen el asistente {{meta}} en su lugar. En ese caso, puede usar el código que se describe en esta sección para vincular los nombres de los autores a las páginas de perfil del centro de ayuda.

Puede que tenga que actualizar el estilo del CSS para que la página de resultados se vea uniforme.

Actualizar los nombres de los autores de los artículos en los resultados

Reemplace las siguientes etiquetas div:

<div class="search-result-meta">{{meta}}</div>
<div class="search-result-description">{{text}}</div>

Con lo siguiente:

<ol
 class="breadcrumbs">
  {{#each path_steps}}
    <li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
  {{/each}}
</ol>
<div class="search-result-description">
  {{text}}
</div>
<div class="search-result-meta">
  <span dir="auto" class="search-result-meta-name">
    {{#link "user_profile" id=author.id class="user-profile"}}
      {{author.name}}
    {{/link}}
  </span>
  <span class="search-result-meta-time">{{date created_at}}</span>
</div>

Para el resultado final:

{{#each article_results}}
  <li class="search-result">
    <a href="{{url}}" class="search-result-link">{{title}}</a>
    {{#if vote_sum}}
      <span class="search-result-votes">{{vote_sum}}</span>
    {{/if}}
    <ol class="breadcrumbs">
      {{#each path_steps}}
        <li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
      {{/each}}
    </ol>
    <div class="search-result-description">
      {{text}}
    </div>
    <div class="search-result-meta">
      <span dir="auto" class="search-result-meta-name">
        {{#link "user_profile" id=author.id class="user-profile"}}
          {{author.name}}
        {{/link}}
      </span>
      <span class="search-result-meta-time">{{date created_at}}</span>
    </div>
  </li>
{{/each}}
Actualizar los nombres de los autores de las publicaciones en los resultados

Agregue:

<ol class="breadcrumbs">
  {{#each path_steps}}
    <li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
  {{/each}}
</ol>

Para el resultado final:

{{#each post_results}}
  <li class="search-result">
    <a href="{{url}}" class="search-result-link">{{title}}</a>
    <ol class="breadcrumbs">
      {{#each path_steps}}
        <li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
      {{/each}}
    </ol>
    <div class="search-result-description">
      {{text}}
    </div>
    <div class="search-result-meta">
      <span dir="auto" class="search-result-meta-name">
        {{#link "user_profile" id=author.id class="user-profile"}}
          {{author.name}}
        {{/link}}
      </span>
      <span class="search-result-meta-time">{{date created_at}}</span>
      <span class="search-result-meta-count">
        {{t 'comments_count' count=comment_count}}
      </span>
    </div>
  </li>
{{/each}}

Activar subsecciones en el tema del centro de ayuda

Puede agregar subsecciones a la base de conocimientos de su centro de ayuda para crear más niveles en la jerarquía de contenido. Si está usando un tema personalizado antes del 29 de marzo de 2019, debe agregar código al tema personalizado del centro de ayuda para activar las subsecciones. El código que sigue viene con versiones posteriores del tema Copenhagen.

Nota: Las subsecciones están disponibles para Guide Enterprise de manera predeterminada en los temas estándar y en los temas que se personalizaron después del 29 de marzo de 2019.
Plantilla aplicable
  • Sección
Objeto aplicable
  • section.sections
Receta
  • Inserte el siguiente fragmento en la plantilla de la página de sección de Zendesk, section_page.hbs, después de la etiqueta del encabezado (<header class="page-header">...</header>) y antes de la etiqueta de paginación ({{pagination}}) :
    {{#if section.sections}}
      <ul class="section-list section-list--collapsed">
        {{#each section.sections}}
        <li class="section-list-item">
          <a href="{{url}}">
            <span>{{name}}</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true">
              <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M5 14.5l6.1-6.1c.2-.2.2-.5 0-.7L5 1.5"/>
            </svg>
          </a>
        </li>
        {{/each}}
        <a tabindex="0" class="see-all-sections-trigger" aria-hidden="true" id="see-all-sections-trigger" title="{{t 'see_all_sections'}}">{{t 'see_all_sections'}}</a>
      </ul>
    {{/if}}
    
    {{#if section.articles}}
      <ul class="article-list">
        {{#each section.articles}}
        <li class="article-list-item {{#if promoted}} article-promoted{{/if}}">
    	{{#if promoted}}<span data-title="{{t 'promoted'}}" class="icon-star"></span>{{/if}}
    	<a href="{{url}}" class="article-list-link">{{title}}</a>
        </li>
        {{/each}}
      </ul>
    {{else}}
      <i class="section-empty">
        <a href="{{section.url}}">{{t 'empty'}}</a>
      </i>
    {{/if}}

Agregar filtros y resultados a la barra lateral de varios centros de ayuda en la página de resultados de la búsqueda

La búsqueda del centro de ayuda les permite a los usuarios hacer búsquedas en todos los centros de ayuda (si son varios), y presentar los resultados de una búsqueda realizada en los centros de ayuda, la base de conocimientos y la comunidad en una secuencia unificada y con filtros en la página de resultados de la búsqueda.

Si está usando un tema que fue personalizado antes del 29 de marzo de 2019, deberá agregar código al tema personalizado del centro de ayuda para admitir los resultados unificados de la búsqueda y la función de búsqueda en varios centros de ayuda. Si cuenta con varios centros de ayuda, tendrá que actualizar el tema para cada uno de ellos.

Nota: Los resultados unificados de una búsqueda y la función de búsqueda en varios centros de ayuda son admitidos de manera predeterminada en los temas estándar y los temas que fueron personalizados después del 25 de septiembre de 2019.

La forma más rápida de realizar los cambios necesarios en su tema es importar la última versión del tema Copenhagen que sí admite los resultados unificados de búsqueda. Para ello, consulte Adición de un tema del centro de ayuda a Guide.

Si prefiere actualizar su tema personalizado existente, esta sección ofrece una descripción de todos los cambios que debe hacer. Las soluciones que se describen en esta sección implican el uso de los asistentes help_center_filters, filters y subfilters en el lenguaje de plantillas Curlybars para actualizar los siguientes archivos:
  • Resultados de la búsqueda
  • CSS
  • JavaScript

Actualizar la plantilla de resultados de la búsqueda para agregar filtros a la barra lateral

Es necesario actualizar la plantilla de resultados de la búsqueda para poder agregar filtros a la barra lateral e iterar a través de la lista de resultados.

Agregar filtros a la barra lateral

Este fragmento es un ejemplo de cómo se pueden implementar facetas de búsqueda en la barra lateral de la página de resultados de la búsqueda usando los nuevos asistentes de filtro.

Inserte el siguiente código <div class="search-results"> en la plantilla de resultados de la búsqueda:


<section class="search-results-sidebar">
     {{#if help_center.community_enabled}}
        <section class="filters-in-section collapsible-sidebar">
          <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_type'}}</h3>
          <ul>
            {{#each filters}}
              <li>
                <a href="{{url}}" class="sidenav-item" aria-selected="{{selected}}">{{name}} ({{count}})</a>
              </li>
            {{/each}}
          </ul>
        </section>
      {{/if}}
      {{#if subfilters}}
        <section class="filters-in-section collapsible-sidebar">
          {{#is current_filter.identifier 'knowledge_base'}}
            <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_category'}}</h3>
          {{/is}}
          {{#is current_filter.identifier 'community'}}
            <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_topic'}}</h3>
          {{/is}}
          <ul>
            {{#each subfilters}}
              <li>
                <a href="{{url}}" class="sidenav-item" aria-selected="{{selected}}">{{name}} ({{count}})</a>
              </li>
            {{/each}}
          </ul>
        </section>
      {{/if}}
    </section>
Iteración de los resultados

Este fragmento es un buen ejemplo de cómo usar el asistente {{results}} para iterar a través de la lista de resultados unificados de la búsqueda.

Reemplace los asistentes {{article_results}} y {{post_results}}, además de sus subencabezados asociados de búsqueda-resultados H3

en la plantilla de resultados de la búsqueda con lo siguiente:

{{#if results}}
        <ul class="search-results-list">
          {{#each results}}
            <li class="search-result-list-item result-{{type}}">
              <h2 class="search-result-title">
                <a href="{{url}}" class="results-list-item-link">{{title}}</a>
              </h2>
              <article>
                <div class="search-result-icons">
                  {{#if vote_sum}}
                    <span class="search-result-votes">{{vote_sum}}</span>
                  {{/if}}
                  {{#if comment_count}}
                    <span class="search-result-meta-count">
                      {{comment_count}}
                    </span>
                  {{/if}}
                </div>
                <ul class="meta-group">
                  <li>
                    <ol class="breadcrumbs search-result-breadcrumbs">
                      {{#each path_steps}}
                        <li title="{{name}}"><a href="{{url}}">{{name}}</a></li>
                      {{/each}}
                    </ol>
                  </li>
                  <li class="meta-data">{{author.name}}</li>
                  <li class="meta-data">{{date created_at}}</li>
                </ul>
                <div class="search-results-description">{{text}}</div>
              </article>
            </li>
          {{/each}}
        </ul>
      {{else}}
        <p>
          {{t 'no_results_unified'}}
          {{#link 'help_center'}}
            {{t 'browse_help_center'}}
          {{/link}}
        </p>
      {{/if}}

Actualizar el estilo CSS para los filtros de la barra lateral en la página de resultados de la búsqueda

Es posible agregar estilos CSS para los filtros de la barra lateral. El siguiente ejemplo se basa en el tema Copenhagen.

Asegúrese de que las siguientes reglas CSS estén incluidas en el archivo style.css:

/***** Search results *****/
.search-results {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 1024px) {
  .search-results {
    flex-direction: row;
  }
}

.search-results-column {
  flex: 1;
}

@media (min-width: 1024px) {
  .search-results-column {
    flex: 0 0 75%;
  }
}

.search-results-sidebar {
  border-top: 1px solid #ddd;
  flex: 1 0 auto;
  margin-bottom: 20px;
  padding: 0;
}

@media (min-width: 1024px) {
  .search-results-sidebar {
    border: 0;
    flex: 0 0 20%;
    height: auto;
  }
}

.search-results-sidebar .sidenav-item[aria-selected="true"] {
  background-color: $brand_color;
  color: $brand_text_color;
  text-decoration: none;
}

.search-results-subheading {
  font-size: 18px;
  font-weight: 600;
}

.search-results-list {
  margin-bottom: 25px;
}

.search-results-list > li {
  padding: 20px 0;
}

.search-results-list > li:first-child {
  border-top: 1px solid #ddd;
}

.search-results-list > li h2 {
  margin-bottom: 0;
}

.search-result-title {
  font-size: 16px;
}

.search-result-description {
  margin-top: 15px;
  word-break: break-word;
}

.search-result-votes, .search-result-meta-count {
  color: lighten($text_color, 20%);
  display: inline-block;
  font-size: 13px;
  font-weight: 300;
  padding: 4px 5px;
  position: relative;
}

.search-result-votes::before, .search-result-meta-count::before {
  color: $brand_color;
}

[dir="ltr"] .search-result-votes, [dir="ltr"] .search-result-meta-count {
  margin-left: 5px;
}

[dir="ltr"] .search-result-votes::before, [dir="ltr"] .search-result-meta-count::before {
  margin-right: 3px;
}

[dir="rtl"] .search-result-votes, [dir="rtl"] .search-result-meta-count {
  margin-right: 5px;
}

[dir="rtl"] .search-result-votes::before, [dir="rtl"] .search-result-meta-count::before {
  margin-left: 3px;
}

.search-result-votes::before {
  content: "\1F44D";
}

.search-result-meta-count::before {
  content: "\1F4AC";
}

.search-result .meta-group {
  align-items: center;
}

.search-result-breadcrumbs {
  margin: 0;
}

.search-result-breadcrumbs li:last-child::after {
  content: "·";
  display: inline-block;
  margin: 0 5px;
}

/* Non-latin search results highlight */
/* Add a yellow background for Chinese */
html[lang|="zh"] .search-result-description em {
  font-style: normal;
  background: yellow;
}

/* Use bold to highlight for the rest of supported non-latin languages */
html[lang|="ar"] .search-result-description em,
html[lang|="bg"] .search-result-description em,
html[lang|="el"] .search-result-description em,
html[lang|="he"] .search-result-description em,
html[lang|="hi"] .search-result-description em,
html[lang|="ko"] .search-result-description em,
html[lang|="ja"] .search-result-description em,
html[lang|="ru"] .search-result-description em,
html[lang|="th"] .search-result-description em {
  font-style: bold;
}

Actualizar JavaScript para la barra lateral plegable en la página de resultados de la búsqueda

Es posible añadir JavaScript para la barra lateral plegable en la página de resultados de la búsqueda. El siguiente ejemplo se basa en el tema Copenhagen.

Reemplace el siguiente bloque en el archivo script.js en el tema personalizado:

// Toggles expanded aria to collapsible elements
Array.prototype.forEach.call(document.querySelectorAll('.collapsible-nav, .collapsible-sidebar'), function(el) {
el.addEventListener('click', function(e) {
e.stopPropagation();
var isExpanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', !isExpanded);
});
});

con el siguiente fragmento de código:

// Toggles expanded aria to collapsible elements
  var collapsible = document.querySelectorAll('.collapsible-nav, .collapsible-sidebar');

  Array.prototype.forEach.call(collapsible, function(el) {
    var toggle = el.querySelector('.collapsible-nav-toggle, .collapsible-sidebar-toggle');

    el.addEventListener('click', function(e) {
      toggleNavigation(toggle, this);
    });

    el.addEventListener('keyup', function(e) {
      if (e.keyCode === 27) { // Escape key
        closeNavigation(toggle, this);
      }
    });
  });

Agregar el filtro de spam al centro de ayuda

Si está usando un tema personalizado del centro de ayuda creado antes del 1 de abril de 2014, debe agregar estilos adicionales a la hoja de estilos para admitir el filtro de spam.

Se han agregado los siguientes elementos de HTML:
  • Página de artículo
    • section element with class "pending-comments-list"
    • span element with class "pending-moderation-comment-badge"
  • Página de pregunta
    • section element with class "pending-answers-list"
    • span element with class "pending-moderation-answer-badge"
Agregue lo siguiente a la hoja de estilos de su tema personalizado:
.pending-moderation-comment-badge, .pending-moderation-answer-badge {
border-style: solid;
border-width: 1px;
border-color: #c7aa2b;
color: #c7aa2b;
padding: 3px5px;
margin-top: 10px;
font-size: 12px;
}

Agregar aprobaciones al centro de ayuda

En el tema estándar Copenhagen, las aprobaciones se muestran de manera predeterminada cuando la función de solicitudes de aprobación está activada. Si está usando un tema personalizado o del Marketplace, deberá actualizar el tema para que las solicitudes de aprobación se puedan mostrar a los usuarios.
Nota:
  • Las aprobaciones están disponibles de manera predeterminada en los temas estándar y en los temas que se personalizaron después del 28 de julio de 2025. Si el tema de su centro de ayuda se personalizó antes del 28 de julio de 2025, actualícelo para que admita las aprobaciones.
  • El catálogo de servicios requiere la API de creación de plantillas versión 4. Si está usando la versión 3 u otra inferior, pásese a la versión 4 antes de actualizar el tema personalizado o personalice manualmente la versión inferior de la API de creación de plantillas para garantizar la compatibilidad con las aprobaciones.
Plantillas aplicables
  1. approval_request_page.hbs
  2. approval_request_list_page.hbs
  3. Los siguientes recursos:
    • approval_requests_bundle.js
    • approval_requests_translations_bundle.js
Receta
  • Haga clic en el icono Descargar archivo sin procesar por cada archivo de plantilla y de recurso que desee descargar.

  • Agregue los archivos de plantilla (.hbs) a la carpeta de plantillas en el tema activo ya descomprimido.
  • Copie todos los recursos a la carpeta de recursos en el tema activo ya descomprimido.
  • Agregue el fragmento de código de abajo a la plantilla document_head.hbs y luego borre todo script que comience con <script type="importmap">.
    <script type="importmap">
    {
      "imports": {
        "new-request-form": "{{asset 'new-request-form-bundle.js'}}",
        "flash-notifications": "{{asset 'flash-notifications-bundle.js'}}",
        "service-catalog": "{{asset 'service-catalog-bundle.js'}}",
        "approval-requests": "{{asset 'approval-requests-bundle.js'}}",
        "approval-requests-translations": "{{asset 'approval-requests-translations-bundle.js'}}",
        "new-request-form-translations": "{{asset 'new-request-form-translations-bundle.js'}}",
        "service-catalog-translations": "{{asset 'service-catalog-translations-bundle.js'}}",
        "shared": "{{asset 'shared-bundle.js'}}",
        "ticket-fields": "{{asset 'ticket-fields-bundle.js'}}",
        "wysiwyg": "{{asset 'wysiwyg-bundle.js'}}"
      }
    }
    </script>
  • De ser necesario, también puede personalizar las plantillas de página.
  • Comprima el tema y cárguelo en el centro de ayuda.

Agregar el catálogo de servicios al centro de ayuda

En el tema estándar Copenhagen, el catálogo de servicios se muestra de manera predeterminada cuando la función de catálogo de servicios está activada. Si está usando un tema personalizado o del Marketplace, deberá actualizar el tema para que el catálogo de servicios se muestre a los usuarios.

Puede copiar la implementación del catálogo de servicios del tema Copenhagen siguiendo los pasos que se describen a continuación. Si lo que quiere es personalizar por completo la interfaz de usuario, existe otra posibilidad: crear su propia versión del tema Copenhagen y cambiar la implementación en la carpeta src/modules/service-catalog.
Nota:
  • El catálogo de servicios está disponible de manera predeterminada en los temas estándar y en los temas que se personalizaron después del 31 de julio de 2025. Si el tema personalizado de su centro de ayuda se personalizó antes del 31 de julio de 2025, tendrá que actualizarlo para que pueda admitir el catálogo de servicios.
  • El catálogo de servicios requiere la API de creación de plantillas versión 4. Si está usando la versión 3 u otra inferior, pásese a la versión 4 antes de actualizar el tema personalizado o personalice manualmente la versión inferior de la API de creación de plantillas para garantizar la compatibilidad con el catálogo de servicios.
Plantillas aplicables
  • service_page.hbs
  • service_list_page.hbs
  • assets
Receta
  1. Haga clic en el icono Descargar archivo sin procesar por cada archivo de plantilla y de recurso que desee descargar.

  2. Agregue los archivos de plantilla (.hbs) a la carpeta de plantillas en el tema activo ya descomprimido.
  3. Copie todos los recursos a la carpeta de recursos en el tema activo ya descomprimido.
  4. Agregue el fragmento de código de abajo a la plantilla document_head.hbs y luego borre todo script que comience con <script type="importmap">.
    <script type="text/javascript">
      // Load ES module polyfill only for browsers that don't support ES modules
      if (!(HTMLScriptElement.supports && HTMLScriptElement.supports('importmap'))) {
        document.write('<script async src="{{asset 'es-module-shims.js'}}"><\/script>');
      }
    </script>
    <script type="importmap">
    {
      "imports": {
        "new-request-form": "{{asset 'new-request-form-bundle.js'}}",
        "flash-notifications": "{{asset 'flash-notifications-bundle.js'}}",
        "service-catalog": "{{asset 'service-catalog-bundle.js'}}",
        "approval-requests": "{{asset 'approval-requests-bundle.js'}}",
        "approval-requests-translations": "{{asset 'approval-requests-translations-bundle.js'}}",
        "new-request-form-translations": "{{asset 'new-request-form-translations-bundle.js'}}",
        "service-catalog-translations": "{{asset 'service-catalog-translations-bundle.js'}}",
        "shared": "{{asset 'shared-bundle.js'}}",
        "ticket-fields": "{{asset 'ticket-fields-bundle.js'}}",
        "wysiwyg": "{{asset 'wysiwyg-bundle.js'}}"
      }
    }
    </script>
    <script type="module">
      import { renderFlashNotifications } from "flash-notifications";
    
      const settings = {{json settings}};
      const baseLocale = {{json help_center.base_locale}};
    
      renderFlashNotifications(settings, baseLocale);
    </script>
  5. Use el asistente link para agregar un vínculo al catálogo de servicios en la plantilla header.js.
  6. Copie los siguientes estilos en el archivo style.css:
    .service-catalog-description {
      display: flow-root;
    }
    .service-catalog-description a {
      color: $link_color;
      text-decoration: underline;
    }
    .service-catalog-description a:visited {
      color: $visited_link_color;
    }
    .service-catalog-description a:hover, .service-catalog-description a:active, .service-catalog-description a:focus {
      color: $hover_link_color;
    }
    .service-catalog-description img {
      height: auto;
      max-width: 100%;
    }
    .service-catalog-description p > img.image-style-align-left {
      float: left;
      margin: 8px 20px 6px 0;
    }
    .service-catalog-description p > img.image-style-align-right {
      float: right;
      margin: 8px 0px 6px 20px;
    }
    .service-catalog-description p > img.image-style-block-align-right {
      margin-left: auto;
      margin-right: 0;
    }
    .service-catalog-description p > img.image-style-block-align-left {
      margin-left: 0;
      margin-right: auto;
    }
    .service-catalog-description figure.image {
      display: table;
      margin: 0 auto;
    }
    .service-catalog-description figure.image > img {
      display: block;
      width: 100%;
    }
    .service-catalog-description figure.image.image-style-align-left {
      float: left;
      margin: 8px 20px 6px 0;
    }
    .service-catalog-description figure.image.image-style-align-right {
      float: right;
      margin: 8px 0px 6px 20px;
    }
    .service-catalog-description figure.image.image-style-block-align-right {
      margin-left: auto;
      margin-right: 0;
    }
    .service-catalog-description figure.image.image-style-block-align-left {
      margin-left: 0;
      margin-right: auto;
    }
    .service-catalog-description figcaption {
      padding: 10px 0;
      font-size: 12px;
      text-align: center;
      background-color: darken($background_color, 5%);
    }
    .service-catalog-description ul,
    .service-catalog-description ol {
      padding-left: 20px;
      list-style-position: outside;
      margin: 20px 0 20px 20px;
    }
    [dir=rtl] .service-catalog-description ul,
    [dir=rtl] .service-catalog-description ol {
      padding-right: 20px;
      padding-left: 0;
      margin-left: 0;
      margin-right: 20px;
    }
    .service-catalog-description ul > ul,
    .service-catalog-description ol > ol,
    .service-catalog-description ol > ul,
    .service-catalog-description ul > ol,
    .service-catalog-description li > ul,
    .service-catalog-description li > ol {
      margin: 0;
    }
    .service-catalog-description ul {
      list-style-type: disc;
    }
    .service-catalog-description :not(pre) > code {
      background: darken($background_color, 3%);
      border: 1px solid #ddd;
      border-radius: 3px;
      padding: 0 5px;
      margin: 0 2px;
    }
    .service-catalog-description pre {
      background: darken($background_color, 3%);
      border: 1px solid #ddd;
      border-radius: 3px;
      padding: 10px 15px;
      overflow: auto;
      white-space: pre;
    }
    .service-catalog-description blockquote {
      border-left: 1px solid #ddd;
      color: lighten($text_color, 20%);
      font-style: italic;
      padding: 0 15px;
    }
  7. De ser necesario, también puede personalizar las plantillas de página.
  8. Comprima el tema y cárguelo en el centro de ayuda.

Agregar un catálogo de servicios o aprobaciones en versiones de la API de creación de plantillas inferiores a la 4

La API de creación de plantillas versión 4 incluye un asistente JSON necesario para el catálogo de servicios y la funcionalidad de aprobaciones. Si embargo, si necesita seguir usando una versión inferior de la plantilla, puede serializar los datos de manera distinta.

Para usar el catálogo de servicios o las aprobaciones en versiones inferiores de la API de creación de plantillas
  1. Elimine el asistente JSON de los valores booleanos y los números.
  2. Serialice las cadenas con el asistente json_stringify.
  3. Para objetos complejos, serialice cada propiedad por separado.

En el siguiente ejemplo se muestra cómo adaptar la plantilla service_page.hbs. También tendrá que modificar de manera similar el resto de las plantillas necesarias.

Reemplace el siguiente código original:
<script type="module">
  import { renderServiceCatalogItem } from "service-catalog";

  const settings = {{json settings}};
  const container = document.getElementById("service-catalog-item");

  // Extract the ID from the URL
  const id = window.location.pathname.split("/").pop()

  const props = {
    baseLocale: {{json help_center.base_locale}},
    hasAtMentions: {{json help_center.at_mentions_enabled}},
    userRole: {{json user.role}},
    userId: {{json user.id}},
    brandId: {{json brand.id}},
    organizations: {{json user.organizations}},
    serviceCatalogItemId: id,
    helpCenterPath: {{json (page_path 'help_center')}},
  }

  renderServiceCatalogItem(container, settings, props);
</script>
Con lo siguiente:
<script type="module">
  import { renderServiceCatalogItem } from "service-catalog";

  const settings = {
    background_color: {{json_stringify settings.background_color}},
    text_color: {{json_stringify settings.text_color}},
    brand_color: {{json_stringify settings.brand_color}},
    brand_text_color: {{json_stringify settings.brand_text_color}},
    link_color: {{json_stringify settings.link_color}},
    hover_link_color: {{json_stringify settings.hover_link_color}},
    visited_link_color: {{json_stringify settings.visited_link_color}},
  };
  const container = document.getElementById("service-catalog-item");

  // Extract the ID from the URL
  const id = window.location.pathname.split("/").pop()

  const props = {
    baseLocale: {{json_stringify help_center.base_locale}},
    hasAtMentions: {{help_center.at_mentions_enabled}},
    userRole: {{json_stringify user.role}},
    userId: {{user.id}},
    brandId: {{brand.id}},
    organizations: [
     {{#each user.organizations}}
              {id: {{id}}},
     {{/each}}
    ],
    serviceCatalogItemId: id,
    helpCenterPath: {{json_stringify (page_path 'help_center')}},
  }

  renderServiceCatalogItem(container, settings, props);
</script>

Tecnología de Zendesk