Comment masquer des composants dans Zendesk Guide à l'aide de Curlybars

Parfois, vous devrez masquer certains éléments dans votre centre d'aide Zendesk. Vous voudrez peut-être supprimer le pied de page « Powered by Zendesk » pour une expérience de marque plus propre. Ou peut-être avez-vous des catégories internes qui ne devraient pas apparaître sur votre page d'accueil publique. Vous pourriez même avoir besoin de masquer les commentaires d'articles globalement sans les désactiver un par un.

Curlybars, le langage de modélisation de Zendesk, vous donne un contrôle précis sur ce qui s'affiche dans votre centre d'aide. Contrairement au masquage CSS (qui rend simplement les choses invisibles), Curlybars peut empêcher les composants d'atteindre le navigateur. Ceci est important à la fois pour la sécurité et les performances.

Dans ce guide, vous apprendrez à utiliser Curlybars pour masquer des composants dans votre Zendesk Guide. Nous verrons comment trouver les ID de composants, modifier les modèles de thème et implémenter l'assistant isnt. À la fin, vous aurez des exemples de code fonctionnels pour les scénarios de masquage les plus courants.

Ce dont vous aurez besoin avant de commencer

Avant de plonger dans le code, assurez-vous que vous avez la bonne configuration. La personnalisation Curlybars nécessite des plans et des autorisations Zendesk spécifiques.

Vous aurez besoin de :

• Plan Guide Professional ou Enterprise (ou Suite Growth et supérieur). Ces personnalisations ne sont pas disponibles sur Suite Team.
• Accès administrateur aux paramètres de personnalisation de la conception dans votre compte Zendesk
• Connaissance de base de HTML/CSS (utile mais pas strictement nécessaire)
• Un plan de sauvegarde - les thèmes personnalisés ne sont pas officiellement pris en charge par Zendesk, alors documentez vos modifications

Si vous gérez un centre d'aide complexe avec de nombreuses personnalisations, réfléchissez à la manière dont des outils comme eesel AI peuvent vous aider à documenter et à maintenir votre configuration. Notre coéquipier IA peut suivre les modifications de votre thème en même temps que le contenu de votre base de connaissances, ce qui facilite la gestion de tout au même endroit.

Comprendre comment fonctionne le masquage Curlybars

Curlybars est le langage de modélisation de Zendesk basé sur Handlebars. Il s'exécute sur les serveurs de Zendesk avant même que les pages de votre centre d'aide n'atteignent un navigateur. Ce traitement côté serveur est ce qui rend le masquage Curlybars fondamentalement différent des autres méthodes.

Lorsque vous utilisez l'assistant isnt pour masquer un composant, ce HTML n'est tout simplement pas généré. Le navigateur ne le reçoit jamais. Comparez cela au masquage JavaScript, où le HTML est présent dans le code source de la page et simplement masqué avec CSS. Toute personne ayant des compétences de base en navigation peut révéler le contenu masqué par JavaScript.

Voici pourquoi c'est important :

• Sécurité : le contenu sensible reste entièrement hors de la réponse du serveur
• Performances : moins de HTML signifie des chargements de page plus rapides
• Référencement (SEO) : le contenu masqué n'apparaîtra pas dans les explorations des moteurs de recherche

L'[assistant isnt](https://developer.zendesk.com/api-reference/help_center/help-center-templates/helpers/#isnt-helper) compare deux valeurs en utilisant une inégalité stricte (!==`). S'ils ne correspondent pas, le contenu à l'intérieur du bloc s'affiche. S'ils correspondent, rien ne s'affiche. Il s'agit de la principale méthode pour masquer les composants par leur ID unique.

D'autres méthodes existent, mais servent à des fins différentes :

• Les segments d'utilisateurs contrôlent l'accès au niveau de l'article via le système d'autorisations de Zendesk
• Le masquage JavaScript/CSS fonctionne pour les modifications esthétiques, mais n'est pas sécurisé
• La désactivation des fonctionnalités dans les paramètres (comme la désactivation des commentaires) affecte tout le contenu globalement

Pour plus de détails, consultez la documentation officielle de Zendesk sur le masquage des composants.

Guide étape par étape pour masquer les composants

Passons en revue l'implémentation réelle. Ces étapes supposent que vous travaillez avec le thème Copenhague ou un thème personnalisé basé sur celui-ci.

Étape 1 : Trouver l'ID du composant

Chaque catégorie, section et article de votre centre d'aide possède un numéro d'identification unique. Vous le trouverez dans l'URL lorsque vous naviguez vers ce composant.

Voici comment le localiser :

1. Ouvrez votre centre d'aide tel qu'un utilisateur final le verrait
2. Accédez au composant que vous souhaitez masquer (une catégorie, une section ou un article)
3. Regardez la barre d'adresse de votre navigateur
4. Extrayez le numéro de l'URL

Par exemple, si l'URL est /hc/en-us/categories/200420805-General, l'ID est 200420805.

Le modèle d'URL varie selon le type de composant :

• Catégories : /categories/ID-Name
• Sections : /sections/ID-Name
• Articles : /articles/ID-Name

Notez les ID de tous les composants que vous souhaitez masquer. Vous en aurez besoin à l'étape suivante.

Étape 2 : Accéder au code de votre thème

Vous allez maintenant ouvrir l'éditeur de thème et localiser le bon fichier de modèle.

1. Dans Zendesk, accédez à Guide admin (ou Knowledge admin dans les interfaces plus récentes)
2. Cliquez sur l'icône Personnaliser la conception dans la barre latérale
3. Trouvez votre thème en direct et cliquez sur Personnaliser
4. Cliquez sur Modifier le code pour ouvrir l'éditeur de thème
5. Accédez au fichier de modèle dont vous avez besoin dans la barre latérale gauche

Le modèle que vous choisissez dépend de ce que vous masquez :

• home_page.hbs - La page d'accueil du centre d'aide
• article_page.hbs - Pages d'articles individuelles
• section_page.hbs - Pages de destination de section
• category_page.hbs - Pages de destination de catégorie
• footer.hbs - Éléments de pied de page globaux
• header.hbs - Éléments d'en-tête globaux

Étape 3 : Ajouter le code de l'assistant isnt

Une fois que vous avez le bon modèle ouvert, localisez le composant que vous souhaitez masquer. Vous l'envelopperez avec l'assistant isnt.

La syntaxe ressemble à ceci :

{{#isnt id 'YOUR_COMPONENT_ID'}}
  <!-- Code du composant ici -->
{{/isnt}}

Voici un exemple concret. Pour masquer une catégorie de la page d'accueil :

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

Pour masquer plusieurs composants, enchaînez plusieurs instructions isnt :

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

Ou utilisez l'assistant is avec un bloc else pour la logique inverse :

{{#is id '200420805'}}
  <!-- Cette catégorie est masquée -->
{{else}}
  <div class="category">
    <a href="{{url}}">{{name}}</a>
  </div>
{{/is}}

Étape 4 : Publier et vérifier

Après avoir ajouté votre code, vous devez enregistrer et tester vos modifications.

1. Cliquez sur Enregistrer dans le coin supérieur droit
2. Cliquez sur Publier pour rendre les modifications actives
3. Cliquez sur Aperçu pour voir à quoi ressemble votre centre d'aide
4. Accédez à la page où vous avez masqué le composant
5. Vérifiez qu'il est masqué mais toujours accessible via un lien direct

Si le composant apparaît toujours, vérifiez :

• Le numéro d'identification est correct
• Vous modifiez le bon fichier de modèle
• La syntaxe est exactement {{#isnt id 'NUMBER'}} (pas isn't avec une apostrophe)

Scénarios de masquage courants et exemples de code

Voici des recettes pratiques pour les cas d'utilisation les plus courants.

Masquer les commentaires d'articles globalement

Au lieu de désactiver les commentaires sur chaque article individuellement, vous pouvez masquer la section des commentaires dans votre thème.

Dans article_page.hbs, trouvez la section des commentaires et enveloppez-la avec des commentaires HTML :

{{!--
<div class="article-comments">
  <!-- Code des commentaires ici -->
</div>
--}}

Cela supprime complètement le HTML des commentaires de la page. Utilisez ceci lorsque vous souhaitez que les commentaires soient désactivés, mais que vous ne souhaitez pas modifier des centaines d'articles individuellement.

Masquer les catégories de la page d'accueil

Pour que les catégories restent accessibles via un lien direct, mais masquées de la page d'accueil :

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

Ceci est utile pour les catégories de documentation interne auxquelles les agents accèdent via des signets, mais qui ne devraient pas apparaître aux visiteurs généraux.

Masquer les éléments de pied de page

Pour supprimer le texte « Powered by Zendesk » ou d'autres éléments de pied de page :

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

Ou masquez-le complètement en supprimant ou en commentant la section pertinente dans footer.hbs.

Masquer en fonction du type d'utilisateur

Combinez Curlybars avec des segments d'utilisateurs pour un masquage basé sur les rôles :

{{#if signed_in}}
  {{#isnt user.role 'end-user'}}
    <div class="internal-notice">
      Cette section est réservée aux agents
    </div>
  {{/isnt}}
{{/if}}

Pour une véritable sécurité, combinez ceci avec les segments d'utilisateurs de Zendesk pour restreindre l'accès aux articles au niveau des autorisations.

Masquer les fil d'Ariane sur des pages spécifiques

Pour supprimer les fil d'Ariane des pages d'articles, mais les conserver ailleurs :

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

Ou utilisez l'assistant is pour afficher les fil d'Ariane uniquement sur certains types de pages.

Meilleures pratiques et considérations de sécurité

Avant de commencer à personnaliser, gardez ces directives à l'esprit.

Dupliquez toujours votre thème en premier. Cliquez sur les trois points à côté de votre thème en direct et sélectionnez « Dupliquer ». Travaillez sur la copie, testez minutieusement, puis changez le thème en direct lorsque vous êtes sûr de vous. Cela vous donne une option de restauration instantanée.

Testez dans un environnement de bac à sable. Si vous avez un bac à sable Zendesk, apportez d'abord les modifications là-bas. Certaines fonctionnalités ne fonctionnent pas en mode aperçu, vous avez donc besoin d'un environnement réel pour vérifier que tout fonctionne correctement.

Documentez vos personnalisations. Créez un document partagé qui suit :

• Quels modèles vous avez modifiés
• Quels ID vous masquez
• Pourquoi vous avez apporté chaque modification
• Quand vous l'avez fait

Cette documentation devient inestimable lorsque vous devez dépanner ou lorsque les membres de l'équipe changent.

Comprenez les implications en matière de sécurité. Le masquage Curlybars se produit côté serveur, ce qui signifie que le HTML n'atteint jamais le navigateur. C'est sécurisé. Le masquage JavaScript, où vous utilisez CSS pour masquer des éléments après leur chargement, n'est pas sécurisé. Le contenu est toujours dans le code source de la page et visible pour toute personne qui sait comment regarder.

Note sur les performances : Le masquage des composants avec Curlybars réduit le HTML envoyé aux navigateurs, ce qui peut améliorer les temps de chargement. Cependant, cela ne réduit pas les requêtes de base de données du côté de Zendesk. Le contenu est toujours récupéré ; il n'est tout simplement pas affiché.

Si vous gérez la documentation sur plusieurs plateformes, réfléchissez à la manière dont eesel AI peut vous aider. Notre coéquipier IA s'intègre à Zendesk pour générer et mettre à jour automatiquement les articles du centre d'aide en fonction de vos tickets de support, gardant ainsi votre contenu à jour pendant que vous vous concentrez sur la personnalisation du thème.

Dépannage des problèmes courants

Même avec une implémentation soignée, les choses ne fonctionnent parfois pas comme prévu. Voici comment résoudre les problèmes les plus courants.

Le composant apparaît toujours. Vérifiez le numéro d'identification. Il est facile de transposer des chiffres ou de saisir le mauvais ID à partir d'une URL similaire. Vérifiez également que vous modifiez le bon fichier de modèle. Les modifications apportées à home_page.hbs n'affecteront pas les pages d'articles.

Votre modèle est cassé. Si vous voyez des messages d'erreur ou si votre centre d'aide ne se charge pas, vous avez probablement une erreur de syntaxe. Les coupables courants :

• Utilisation de isn't au lieu de isnt (pas d'apostrophe dans Curlybars)
• Balises de fermeture manquantes ({{/isnt}})
• Guillemets non concordants autour des ID

Revenez immédiatement à votre thème de sauvegarde, puis examinez attentivement les modifications de votre code.

L'aperçu est différent du direct. Le mode aperçu ne montre pas toujours exactement ce que les utilisateurs voient. Certaines fonctionnalités nécessitent un chargement complet de la page pour fonctionner. Testez toujours les modifications dans un environnement en direct (même si c'est sur un thème dupliqué) avant de les rendre publiques.

Plusieurs conditions ne fonctionnent pas. Vérifiez votre imbrication. Chaque assistant isnt a besoin de sa propre balise de fermeture. Pour une logique complexe, déterminez si les segments d'utilisateurs pourraient être une meilleure solution que le code de modèle.

Gérer le contenu du centre d'aide avec eesel AI

Curlybars gère l'apparence de votre centre d'aide. Mais qu'en est-il du contenu lui-même ?

Pendant que vous personnalisez votre thème, vous devez toujours créer, mettre à jour et maintenir les articles que vos clients lisent. C'est là qu'eesel AI entre en jeu.

Notre coéquipier IA s'intègre directement à Zendesk pour :

• Générer des articles du centre d'aide à partir de vos tickets de support résolus
• Identifier les lacunes de connaissances où de nouveaux articles réduiraient le volume de tickets
• Maintenir un ton cohérent dans toute votre documentation
• Mettre à jour les articles obsolètes en fonction des nouvelles informations sur les produits

Au lieu d'écrire manuellement chaque article, vous pouvez laisser eesel AI rédiger du contenu basé sur les questions réelles des clients. Vous examinez, modifiez et publiez. C'est comme avoir un rédacteur technique qui apprend de chaque interaction de support.

Pour les équipes qui gèrent des centres d'aide complexes, cela signifie moins de temps à rédiger de la documentation et plus de temps à améliorer l'expérience client. Vous gérez la couche de présentation avec Curlybars. Nous gérons la couche de contenu avec l'IA.

Apprenez-en davantage sur la façon dont eesel AI fonctionne avec Zendesk ou explorez notre guide complet du système de billetterie Zendesk pour plus de façons d'optimiser votre configuration de support.