Comment créer et personnaliser les modèles de page de section de Zendesk Guide

Si vous gérez un centre d'aide avec des centaines d'articles, vous avez probablement remarqué qu'une solution unique ne convient pas à tous. Une section de dépannage a besoin d'une mise en page différente de celle d'une section de documentation produit. C'est là que les modèles de page de section de Zendesk Guide entrent en jeu. Ils vous permettent de personnaliser l'apparence et le fonctionnement de vos pages de section, offrant ainsi aux visiteurs une meilleure expérience de navigation en fonction du type de contenu qu'ils consultent.

Ce guide vous explique tout ce que vous devez savoir sur la création et la personnalisation des modèles de page de section. Que vous préfériez utiliser l'éditeur de thème ou travailler directement avec le code, vous découvrirez les deux approches avec des exemples pratiques que vous pouvez mettre en œuvre dès aujourd'hui.

Comprendre les modèles de page de section

Modèles par défaut et modèles personnalisés

Chaque centre d'aide Zendesk commence avec un modèle de page de section par défaut. Ce modèle affiche le nom de la section, la description et une liste d'articles dans une mise en page standard. Il convient parfaitement aux besoins de base, mais il traite toutes les sections de la même manière.

Les modèles de page de section personnalisés vous permettent de :

• Modifier la mise en page et la hiérarchie visuelle
• Mettre en évidence les articles promus différemment
• Ajouter des éléments de navigation personnalisés
• Créer des CTA (call to action) spécifiques à la section
• Ajuster l'affichage en fonction du type de contenu

Quand utiliser des modèles de page de section personnalisés

Envisagez de créer des modèles personnalisés lorsque :

• Vous avez différents types de contenu qui nécessitent des présentations différentes (FAQ vs. tutoriels vs. dépannage)
• Certaines sections ont besoin d'une navigation ou d'un lien croisé unique
• Vous souhaitez mettre en évidence les articles promus plus en évidence dans des sections spécifiques
• Les exigences de branding varient selon les différentes parties de votre centre d'aide
• Vous devez intégrer des widgets spécifiques à la section ou du contenu tiers

Comment les pages de section s'intègrent dans la hiérarchie

Zendesk Guide organise le contenu dans une hiérarchie à trois niveaux :

1. Catégories : conteneurs de niveau supérieur (masqués si vous n'en avez qu'un)
2. Sections : contiennent des articles connexes
3. Articles : éléments de contenu individuels

Sur les plans Enterprise, les sections peuvent également contenir des sous-sections, ce qui permet d'avoir jusqu'à cinq niveaux d'imbrication avec un maximum de 200 sections par parent. Cette flexibilité est utile pour les bases de connaissances complexes, mais nécessite une conception de modèle réfléchie.

Méthode 1 : Créer des modèles dans l'éditeur de thème

L'éditeur de thème fournit une interface visuelle pour créer des modèles sans télécharger de fichiers. Voici comment l'utiliser.

Étape 1 : Accéder à l'administration des connaissances

Accédez à Administration des connaissances dans votre panneau d'administration Zendesk, puis cliquez sur Personnaliser la conception dans la barre latérale. Vos thèmes apparaîtront sur la page Thèmes.

Étape 2 : Modifier le code de votre thème

Recherchez le thème que vous souhaitez personnaliser et cliquez sur Personnaliser. Cliquez ensuite sur Modifier le code pour accéder aux fichiers de modèle.

Étape 3 : Ajouter un nouveau modèle de section

Dans la zone Fichiers, cliquez sur Ajouter nouveau, puis sélectionnez Modèle de section dans le menu déroulant.

Étape 4 : Configurer votre modèle

Vous devrez fournir :

• Nom du modèle : utilisez snake_case (minuscules avec des traits de soulignement), 25 caractères maximum. Exemple : video_section ou faq_layout
• Commencer à partir de : choisissez un modèle vierge ou copiez un modèle existant comme point de départ

Étape 5 : Modifier le code du modèle

Le nouveau modèle s'ouvre dans l'éditeur de code. C'est là que vous écrivez votre code HTML et Curlybars. L'éditeur comprend la coloration syntaxique et la fonctionnalité d'enregistrement automatique.

Cliquez sur Aperçu pour voir à quoi ressemble votre modèle avec des données en direct, puis sur Enregistrer lorsque vous êtes satisfait(e).

Étape 6 : Appliquer le modèle aux sections

Une fois votre modèle enregistré et votre thème en ligne, accédez à n'importe quelle section de votre centre d'aide. Cliquez sur Modifier la section et sélectionnez votre modèle personnalisé dans le menu déroulant Modèle dans la barre latérale.

Cliquez sur Mettre à jour pour appliquer le modèle. La modification prend effet immédiatement sur la page de section en direct.

Méthode 2 : Créer des modèles localement

Pour les développeurs qui préfèrent travailler dans leur propre environnement, vous pouvez créer des modèles localement et les importer.

Étape 1 : Télécharger votre thème

Dans la page Thèmes, cliquez sur le menu des options de votre thème et sélectionnez Télécharger. Cela vous donne un fichier ZIP contenant tous les fichiers de thème.

Étape 2 : Créer le dossier section_pages

Extrayez le fichier ZIP et accédez au répertoire templates. Créez un nouveau dossier nommé section_pages s'il n'existe pas.

Étape 3 : Ajouter votre fichier de modèle

Créez un nouveau fichier avec l'extension .hbs dans le dossier section_pages. Le nom de fichier doit :

• Utiliser snake_case (minuscules avec des traits de soulignement)
• Avoir 25 caractères ou moins
• Inclure uniquement des lettres, des chiffres et des traits de soulignement

Exemples de noms de fichiers : video_gallery.hbs, faq_accordion.hbs, featured_top.hbs

Étape 4 : Écrire votre code de modèle

Voici une structure de base pour vous aider à démarrer :

<nav class="sub-nav">
  {{breadcrumbs}}
  {{subscribe}}
</nav>

<h1>{{section.name}}</h1>
<p class="section-description">{{section.description}}</p>

{{#if promoted_articles}}
  <div class="promoted-articles">
    <h2>Articles en vedette</h2>
    <ul>
      {{#each promoted_articles}}
        <li><a href="{{url}}">{{title}}</a></li>
      {{/each}}
    </ul>
  </div>
{{/if}}

{{#if section.articles}}
  <ul class="article-list">
    {{#each section.articles}}
      <li class="article">
        <a href="{{url}}">{{title}}</a>
      </li>
    {{/each}}
  </ul>
{{else}}
  <p>Aucun article dans cette section pour le moment.</p>
{{/if}}

{{pagination}}

Étape 5 : Importer votre thème

Zippez le dossier de thème modifié et revenez à Zendesk. Cliquez sur Ajouter un thème > Importer et téléchargez votre fichier ZIP. Prévisualisez le thème pour vérifier que vos modèles fonctionnent correctement, puis publiez-le pour le mettre en ligne.

Référence du code de modèle de page de section

Comprendre les propriétés et les assistants disponibles vous permet de créer des modèles plus sophistiqués.

Propriétés disponibles

Source : Documentation pour les développeurs Zendesk

Assistants disponibles

Modèles courants

Parcourir les articles avec des métadonnées :

{{#each section.articles}}
  <article class="article-item">
    <h3><a href="{{url}}">{{title}}</a></h3>
    <p class="meta">
      Mis à jour {{date updated_at timeago=true}}
      {{#if author}}
        par {{author.name}}
      {{/if}}
    </p>
  </article>
{{/each}}

Contenu conditionnel en fonction de l'état de l'utilisateur :

{{#if signed_in}}
  <p>Bienvenue ! {{user.name}}</p>
{{else}}
  <p><a href="{{signin_url}}">Connectez-vous</a> pour une aide personnalisée.</p>
{{/if}}

Bonnes pratiques pour la conception de pages de section

Garder la navigation intuitive

Incluez toujours des breadcrumbs afin que les utilisateurs comprennent où ils se trouvent dans la hiérarchie de votre centre d'aide. L'assistant {{breadcrumbs}} gère cela automatiquement, mais assurez-vous qu'il est visible et stylisé de manière cohérente avec votre marque.

Utiliser les articles promus de manière stratégique

Les articles promus apparaissent en haut des pages de section. Utilisez-les pour mettre en évidence :

• Le contenu le plus fréquemment consulté
• Les guides de démarrage
• Les étapes de dépannage critiques
• Les articles importants récemment mis à jour

Tenir compte de la réactivité mobile

Testez vos modèles sur les appareils mobiles. Les pages de section avec de nombreux articles peuvent devenir difficiles à gérer sur les petits écrans. Envisagez des sections pliables ou des mises en page en accordéon pour les longues listes d'articles.

Maintenir une image de marque cohérente

Bien que les modèles personnalisés vous permettent de varier les mises en page, gardez les couleurs, les polices et l'espacement cohérents avec votre thème général. Les utilisateurs doivent avoir l'impression d'être dans le même centre d'aide, même lorsque les mises en page des sections diffèrent.

Tester avec différents volumes d'articles

Un modèle qui a fière allure avec 5 articles peut se casser avec 50. Testez vos modèles avec différents volumes de contenu pour vous assurer qu'ils s'adaptent de manière appropriée.

Dépannage des problèmes courants

Modèle n'apparaissant pas dans le menu déroulant

La cause la plus fréquente : votre thème n'est pas en ligne. Les modèles personnalisés n'apparaissent dans le sélecteur de modèles que lorsque le thème qui les contient est le thème actif en ligne. Sur Suite Growth et Professional, vous pouvez créer plusieurs modèles dans un thème non en ligne pour les tester, mais vous ne pouvez pas les appliquer tant que le thème n'est pas mis en ligne.

Modifications ne se reflétant pas immédiatement

Zendesk met en cache les pages du centre d'aide pour des raisons de performance. Si vous ne voyez pas les modifications apportées au modèle :

• Videz le cache de votre navigateur
• Essayez une fenêtre incognito/privée
• Attendez quelques minutes que le cache CDN s'actualise

Erreurs d'autorisation

Seuls les administrateurs des connaissances peuvent créer des modèles et les appliquer aux sections. Les agents peuvent modifier les modèles sur les articles individuels qu'ils sont autorisés à modifier, mais les modifications de modèle de section et de catégorie nécessitent un accès administrateur.

Erreurs de nommage de modèle

Si votre modèle ne s'enregistre pas, vérifiez :

• Le nom utilise uniquement des lettres minuscules, des chiffres et des traits de soulignement
• Le nom comporte 25 caractères ou moins
• Pas d'espaces ni de caractères spéciaux

Utiliser l'IA pour optimiser votre base de connaissances

La création de modèles personnalisés n'est qu'une partie de la création d'un centre d'aide efficace. Le véritable défi consiste à maintenir votre contenu organisé, à jour et facile à trouver. C'est là que les coéquipiers de l'IA peuvent vous aider.

Chez eesel AI, nous abordons la gestion des connaissances différemment. Au lieu de considérer l'IA comme un outil que vous configurez, nous la considérons comme un coéquipier que vous embauchez. Notre IA apprend votre entreprise à partir de votre contenu existant (anciens tickets, articles du centre d'aide, macros et documents connectés comme Confluence ou Notion) et vous aide à identifier les lacunes dans votre base de connaissances.

Voici comment cela fonctionne : connectez eesel AI à votre service d'assistance, et il analyse immédiatement votre contenu. Il identifie quels articles fonctionnent, lesquels ont besoin de mises à jour et ce qui manque complètement. Vous pouvez exécuter des simulations sur les anciens tickets pour voir dans quelle mesure votre base de connaissances gérerait les questions courantes, puis combler les lacunes avant que les clients ne les rencontrent.

Le modèle de coéquipier signifie que vous commencez par des conseils (eesel rédige des réponses pour examen) et passez à un fonctionnement autonome (eesel gère directement le support de première ligne) en fonction des performances réelles. Vous contrôlez le rythme en fonction de ce que vous voyez fonctionner.

Si vous investissez du temps dans des modèles de page de section personnalisés pour améliorer l'expérience utilisateur, réfléchissez à ce qu'un coéquipier de l'IA pourrait faire pour le contenu qui s'y trouve. La combinaison de modèles bien structurés et d'un contenu continuellement optimisé crée un centre d'aide qui aide réellement.