Cómo ocultar componentes en Zendesk Guide usando Curlybars

A veces necesitará ocultar ciertos elementos en su Centro de Ayuda de Zendesk. Tal vez quiera eliminar el pie de página "Powered by Zendesk" para una experiencia de marca más limpia. O quizás tenga categorías internas que no deberían aparecer en su página de inicio pública. Incluso podría necesitar ocultar los comentarios de los artículos globalmente sin deshabilitarlos uno por uno.

Curlybars, el lenguaje de plantillas de Zendesk, le brinda un control preciso sobre lo que se renderiza en su centro de ayuda. A diferencia de la ocultación con CSS (que simplemente hace que las cosas sean invisibles), Curlybars puede evitar que los componentes lleguen al navegador. Esto es importante tanto para la seguridad como para el rendimiento.

En esta guía, aprenderá a usar Curlybars para ocultar componentes en su Zendesk Guide. Cubriremos cómo encontrar los ID de los componentes, editar las plantillas de temas e implementar el helper isnt. Al final, tendrá ejemplos de código funcionales para los escenarios de ocultación más comunes.

Lo que necesitará antes de comenzar

Antes de sumergirse en el código, asegúrese de tener la configuración correcta. La personalización de Curlybars requiere planes y permisos específicos de Zendesk.

Necesitará:

• Plan Guide Professional o Enterprise (o Suite Growth y superior). Estas personalizaciones no están disponibles en Suite Team.
• Acceso de administrador a la configuración de Personalizar diseño en su cuenta de Zendesk
• Familiaridad básica con HTML/CSS (útil pero no estrictamente necesario)
• Un plan de respaldo - los temas personalizados no son oficialmente compatibles con Zendesk, así que documente sus cambios

Si está administrando un centro de ayuda complejo con muchas personalizaciones, considere cómo herramientas como eesel AI pueden ayudarlo a documentar y mantener su configuración. Nuestro compañero de equipo de IA puede rastrear los cambios de su tema junto con el contenido de su base de conocimientos, lo que facilita la administración de todo en un solo lugar.

Comprender cómo funciona la ocultación con Curlybars

Curlybars es el lenguaje de plantillas basado en Handlebars de Zendesk. Se ejecuta en los servidores de Zendesk antes de que las páginas de su centro de ayuda lleguen a un navegador. Este procesamiento del lado del servidor es lo que hace que la ocultación con Curlybars sea fundamentalmente diferente de otros métodos.

Cuando usa el helper isnt para ocultar un componente, ese HTML simplemente no se genera. El navegador nunca lo recibe. Compare esto con la ocultación con JavaScript, donde el HTML está presente en el código fuente de la página y simplemente se oculta con CSS. Cualquiera con habilidades básicas de navegador puede revelar el contenido oculto con JavaScript.

He aquí por qué esto importa:

• Seguridad: El contenido confidencial permanece fuera de la respuesta del servidor por completo
• Rendimiento: Menos HTML significa cargas de página más rápidas
• SEO: El contenido oculto no aparecerá en los rastreos de los motores de búsqueda

El isnt helper compara dos valores utilizando la desigualdad estricta (!==). Si no coinciden, el contenido dentro del bloque se renderiza. Si coinciden, no se renderiza nada. Este es el método principal para ocultar componentes por su ID único.

Existen métodos alternativos, pero sirven para diferentes propósitos:

• Los segmentos de usuario controlan el acceso a nivel de artículo a través del sistema de permisos de Zendesk
• La ocultación con JavaScript/CSS funciona para cambios cosméticos, pero no es segura
• Deshabilitar funciones en la configuración (como desactivar los comentarios) afecta a todo el contenido globalmente

Para obtener más detalles, consulte la documentación oficial de Zendesk sobre cómo ocultar componentes.

Guía paso a paso para ocultar componentes

Repasemos la implementación real. Estos pasos asumen que está trabajando con el tema Copenhagen o un tema personalizado basado en él.

Paso 1: Encuentre el ID del componente

Cada categoría, sección y artículo en su centro de ayuda tiene un número de ID único. Lo encontrará en la URL cuando navegue a ese componente.

Así es como se localiza:

1. Abra su centro de ayuda como lo vería un usuario final
2. Navegue al componente que desea ocultar (una categoría, sección o artículo)
3. Mire la barra de direcciones de su navegador
4. Extraiga el número de la URL

Por ejemplo, si la URL es /hc/en-us/categories/200420805-General, el ID es 200420805.

El patrón de URL varía según el tipo de componente:

• Categorías: /categories/ID-Name
• Secciones: /sections/ID-Name
• Artículos: /articles/ID-Name

Anote los ID de todos los componentes que desea ocultar. Los necesitará en el siguiente paso.

Paso 2: Acceda al código de su tema

Ahora abrirá el editor de temas y localizará el archivo de plantilla correcto.

1. En Zendesk, vaya a Administrador de Guide (o Administrador de Knowledge en las interfaces más nuevas)
2. Haga clic en el icono Personalizar diseño en la barra lateral
3. Encuentre su tema activo y haga clic en Personalizar
4. Haga clic en Editar código para abrir el editor de temas
5. Navegue al archivo de plantilla que necesita en la barra lateral izquierda

La plantilla que elija depende de lo que esté ocultando:

• home_page.hbs - La página de inicio del centro de ayuda
• article_page.hbs - Páginas de artículos individuales
• section_page.hbs - Páginas de destino de la sección
• category_page.hbs - Páginas de destino de la categoría
• footer.hbs - Elementos globales del pie de página
• header.hbs - Elementos globales del encabezado

Paso 3: Agregue el código del helper isnt

Una vez que tenga la plantilla correcta abierta, localice el componente que desea ocultar. Lo envolverá con el helper isnt.

La sintaxis se ve así:

{{#isnt id 'YOUR_COMPONENT_ID'}}
  <!-- Component code here -->
{{/isnt}}

Aquí hay un ejemplo real. Para ocultar una categoría de la página de inicio:

{{#each categories}}
  {{#isnt id '200420805'}}
    <div class="category">
      <a href="{{url}}">{{name}}</a>
    </div>
  {{/isnt}}
{{/each}}

Para ocultar varios componentes, encadene múltiples declaraciones isnt:

{{#isnt id '200420805'}}
  {{#isnt id '200420806'}}
    <div class="category">
      <a href="{{url}}">{{name}}</a>
    </div>
  {{/isnt}}
{{/isnt}}

O use el helper is con un bloque else para la lógica opuesta:

{{#is id '200420805'}}
  <!-- This category is hidden -->
{{else}}
  <div class="category">
    <a href="{{url}}">{{name}}</a>
  </div>
{{/is}}

Paso 4: Publique y verifique

Después de agregar su código, necesita guardar y probar sus cambios.

1. Haga clic en Guardar en la esquina superior derecha
2. Haga clic en Publicar para que los cambios se activen
3. Haga clic en Vista previa para ver cómo se ve su centro de ayuda
4. Navegue a la página donde ocultó el componente
5. Verifique que esté oculto pero aún accesible a través de un enlace directo

Si el componente aún aparece, verifique lo siguiente:

• El número de ID es correcto
• Está editando el archivo de plantilla correcto
• La sintaxis es exactamente {{#isnt id 'NUMBER'}} (no isn't con un apóstrofe)

Escenarios comunes de ocultación y ejemplos de código

Aquí hay recetas prácticas para los casos de uso más comunes.

Ocultar los comentarios de los artículos globalmente

En lugar de deshabilitar los comentarios en cada artículo individualmente, puede ocultar la sección de comentarios en su tema.

En article_page.hbs, encuentre la sección de comentarios y envuélvala con comentarios HTML:

{{!--
<div class="article-comments">
  <!-- Comments code here -->
</div>
--}}

Esto elimina por completo el HTML de los comentarios de la página. Use esto cuando desee que los comentarios estén deshabilitados pero no quiera editar cientos de artículos individualmente.

Ocultar categorías de la página de inicio

Para mantener las categorías accesibles a través de un enlace directo pero ocultas de la página de inicio:

{{#each categories}}
  {{#isnt id '200420805'}}
    <div class="category-block">
      <h2><a href="{{url}}">{{name}}</a></h2>
      <p>{{description}}</p>
    </div>
  {{/isnt}}
{{/each}}

Esto es útil para categorías de documentación interna a las que los agentes acceden a través de marcadores, pero que no deberían aparecer a los visitantes generales.

Ocultar elementos del pie de página

Para eliminar el texto "Powered by Zendesk" u otros elementos del pie de página:

{{#isnt help_center.name 'Internal Help Center'}}
  <div class="footer-powered-by">
    Powered by Zendesk
  </div>
{{/isnt}}

O ocúltelo por completo eliminando o comentando la sección relevante en footer.hbs.

Ocultar según el tipo de usuario

Combine Curlybars con segmentos de usuario para la ocultación basada en roles:

{{#if signed_in}}
  {{#isnt user.role 'end-user'}}
    <div class="internal-notice">
      This section is for agents only
    </div>
  {{/isnt}}
{{/if}}

Para una verdadera seguridad, combine esto con los segmentos de usuario de Zendesk para restringir el acceso a los artículos a nivel de permiso.

Ocultar breadcrumbs en páginas específicas

Para eliminar los breadcrumbs de las páginas de artículos pero mantenerlos en otros lugares:

{{#isnt article.id '123456789'}}
  {{breadcrumbs}}
{{/isnt}}

O use el helper is para mostrar los breadcrumbs solo en ciertos tipos de página.

Mejores prácticas y consideraciones de seguridad

Antes de comenzar a personalizar, tenga en cuenta estas pautas.

Siempre duplique su tema primero. Haga clic en los tres puntos junto a su tema activo y seleccione "Duplicar". Trabaje en la copia, pruebe a fondo y luego cambie el tema activo cuando esté seguro. Esto le brinda una opción de reversión instantánea.

Pruebe en un entorno sandbox. Si tiene un sandbox de Zendesk, realice los cambios allí primero. Algunas funciones no funcionan en el modo de vista previa, por lo que necesita un entorno real para verificar que todo funcione correctamente.

Documente sus personalizaciones. Cree un documento compartido que rastree:

• Qué plantillas ha modificado
• Qué ID está ocultando
• Por qué realizó cada cambio
• Cuándo lo hizo

Esta documentación se vuelve invaluable cuando necesita solucionar problemas o cuando los miembros del equipo cambian.

Comprenda las implicaciones de seguridad. La ocultación con Curlybars ocurre en el lado del servidor, lo que significa que el HTML nunca llega al navegador. Esto es seguro. La ocultación con JavaScript, donde usa CSS para ocultar elementos después de que se cargan, no es segura. El contenido todavía está en el código fuente de la página y es visible para cualquiera que sepa cómo buscar.

Nota de rendimiento: Ocultar componentes con Curlybars reduce el HTML enviado a los navegadores, lo que puede mejorar los tiempos de carga. Sin embargo, no reduce las consultas de la base de datos en el extremo de Zendesk. El contenido todavía se busca; simplemente no se renderiza.

Si está administrando documentación en múltiples plataformas, considere cómo eesel AI puede ayudar. Nuestro compañero de equipo de IA se integra con Zendesk para generar y actualizar automáticamente los artículos del centro de ayuda en función de sus tickets de soporte, manteniendo su contenido actualizado mientras usted se enfoca en la personalización del tema.

Solución de problemas comunes

Incluso con una implementación cuidadosa, a veces las cosas no funcionan como se espera. Aquí le mostramos cómo solucionar los problemas más comunes.

El componente todavía aparece. Vuelva a verificar el número de ID. Es fácil transponer dígitos o tomar el ID incorrecto de una URL similar. También verifique que esté editando el archivo de plantilla correcto. Los cambios en home_page.hbs no afectarán las páginas de artículos.

Su plantilla está rota. Si ve mensajes de error o su centro de ayuda no se carga, es probable que tenga un error de sintaxis. Los culpables comunes:

• Usar isn't en lugar de isnt (sin apóstrofe en Curlybars)
• Faltan etiquetas de cierre ({{/isnt}})
• Comillas no coincidentes alrededor de los ID

Vuelva a su tema de respaldo inmediatamente, luego revise cuidadosamente los cambios de su código.

La vista previa se ve diferente de la versión en vivo. El modo de vista previa no siempre muestra exactamente lo que ven los usuarios. Algunas funciones requieren una carga de página completa para funcionar. Siempre pruebe los cambios en un entorno en vivo (incluso si es en un tema duplicado) antes de hacerlos públicos.

Varias condiciones no funcionan. Verifique su anidamiento. Cada helper isnt necesita su propia etiqueta de cierre. Para una lógica compleja, considere si los segmentos de usuario podrían ser una mejor solución que el código de plantilla.

Administrar el contenido del centro de ayuda con eesel AI

Curlybars maneja cómo se ve su centro de ayuda. Pero ¿qué pasa con el contenido en sí?

Mientras personaliza su tema, aún necesita crear, actualizar y mantener los artículos que leen sus clientes. Ahí es donde entra eesel AI.

Nuestro compañero de equipo de IA se integra directamente con Zendesk para:

• Generar artículos del centro de ayuda a partir de sus tickets de soporte resueltos
• Identificar las brechas de conocimiento donde los nuevos artículos reducirían el volumen de tickets
• Mantener un tono consistente en toda su documentación
• Actualizar artículos obsoletos basados en nueva información del producto

En lugar de escribir manualmente cada artículo, puede dejar que eesel AI redacte contenido basado en las preguntas reales de los clientes. Usted revisa, edita y publica. Es como tener un escritor técnico que aprende de cada interacción de soporte.

Para los equipos que administran centros de ayuda complejos, esto significa menos tiempo escribiendo documentación y más tiempo mejorando la experiencia del cliente. Usted maneja la capa de presentación con Curlybars. Nosotros manejamos la capa de contenido con IA.

Obtenga más información sobre cómo funciona eesel AI con Zendesk o explore nuestra guía completa del sistema de tickets de Zendesk para obtener más formas de optimizar su configuración de soporte.