Comment importer un thème Zendesk Guide depuis GitHub

La gestion d'un thème de centre d'aide directement dans l'interface d'administration de Zendesk fonctionne bien pour les petites modifications. Mais une fois que vous commencez à apporter des changements importants ou à travailler avec une équipe, vous atteindrez rapidement les limites. Il n'y a pas de contrôle de version, pas de moyen de savoir qui a changé quoi, et pas de méthode simple pour tester les changements avant qu'ils ne soient mis en ligne.

C'est là que l'intégration GitHub entre en jeu. En connectant votre thème Zendesk Guide à un référentiel GitHub, vous bénéficiez de tous les avantages du contrôle de version : création de branches pour les expériences, demandes de tirage pour la revue de code et historique complet de chaque modification. Votre équipe peut collaborer au développement du thème sans empiéter sur le travail des autres, et vous pouvez déployer les mises à jour en toute confiance.

Ce guide vous explique le processus complet d'importation d'un thème Zendesk Guide depuis GitHub. Que vous partiez du thème officiel Copenhagen ou que vous importiez un thème personnalisé existant, vous apprendrez à configurer l'intégration, à travailler localement avec ZCLI et à établir un flux de travail qui évolue avec votre équipe.

Pendant que vous améliorez l'apparence de votre centre d'aide, réfléchissez également à la manière dont vous gérez les interactions avec les clients. Des outils comme eesel AI s'intègrent directement à Zendesk pour automatiser les réponses et trier les tickets, complétant ainsi votre nouveau thème avec une automatisation intelligente.

Étape 1 : Préparer votre thème dans GitHub

L'intégration GitHub a des exigences spécifiques quant à la structure de votre référentiel. Bien faire les choses dès le départ vous évitera des maux de tête plus tard.

Exigences relatives à la structure du référentiel

Votre référentiel de thème doit répondre à deux exigences clés :

1. Le fichier manifest.json doit se trouver à la racine du référentiel Ce fichier contient les métadonnées du thème et les définitions des paramètres. Zendesk le recherche au niveau supérieur, et non dans les sous-répertoires.

2. Un thème par référentiel Vous ne pouvez pas stocker plusieurs thèmes dans un seul référentiel. Si vous avez besoin de variations d'un thème, utilisez plutôt des branches.

La structure standard du thème ressemble à ceci :

my-zendesk-theme/
├── manifest.json
├── style.css
├── script.js
├── thumbnail.png
├── templates/
│   ├── header.hbs
│   ├── footer.hbs
│   ├── home_page.hbs
│   ├── article_page.hbs
│   └── ...
├── assets/
│   ├── logo.png
│   └── ...
├── settings/
│   └── ...
└── translations/
    └── ...

Fork du thème Copenhagen vs. création à partir de zéro

Pour la plupart des équipes, forker le thème officiel Copenhagen est le meilleur point de départ. C'est le thème par défaut de Zendesk, activement maintenu, et conçu pour être réactif et accessible. Commencer ici signifie que vous recevrez des mises à jour lorsque Zendesk améliorera le thème de base.

Pour le forker, visitez le référentiel du thème Copenhagen et cliquez sur le bouton Fork. Cela crée votre propre copie que vous pouvez personnaliser librement.

Si vous avez déjà un thème existant dans Zendesk, téléchargez-le depuis l'interface d'administration des connaissances et poussez-le vers un nouveau référentiel GitHub à la place.

Stratégie de branche pour les variations de thème

Puisqu'il ne peut y avoir qu'un seul thème par référentiel, utilisez des branches pour gérer les variations :

• main ou master Votre thème de production
• develop Environnement de staging pour tester les changements
• feature/new-header Travail sur une fonctionnalité spécifique
• brand/variant-a Variations en marque blanche pour différentes marques

Lors de l'importation dans Zendesk, vous pouvez spécifier la branche à utiliser, ce qui facilite la gestion de plusieurs variations de thème à partir du même référentiel.

Étape 2 : Configurer votre environnement de développement local

Travailler localement vous permet de prévisualiser les changements instantanément sans avoir à les télécharger à chaque fois sur Zendesk. ZCLI rend cela simple.

Installer ZCLI

ZCLI est l'outil de ligne de commande moderne de Zendesk pour le développement de thèmes. Installez-le globalement via npm :

npm install -g @zendesk/zcli

Vérifiez l'installation :

zcli --version

S'authentifier auprès de votre compte Zendesk

Avant de pouvoir prévisualiser les thèmes, ZCLI a besoin d'accéder à votre compte Zendesk. Exécutez la commande de connexion :

zcli login -i

Vous serez invité à saisir :

• Sous-domaine Votre sous-domaine Zendesk (la partie avant .zendesk.com)
• E-mail Votre adresse e-mail d'administrateur Zendesk
• Mot de passe Un jeton API (recommandé) ou votre mot de passe de compte

Pour créer un jeton API, allez dans Centre d'administration > Applications et intégrations > API > API Zendesk, puis ajoutez un jeton sous l'onglet Paramètres.

Cloner votre référentiel de thème

Si vous ne l'avez pas déjà fait, clonez votre référentiel de thème localement :

git clone https://github.com/your-org/your-theme.git
cd your-theme

Démarrer la prévisualisation locale

Avec ZCLI authentifié et votre code de thème local, démarrez le serveur de prévisualisation :

zcli themes:preview

Cette commande :

• Télécharge votre thème vers un emplacement temporaire
• Démarre un serveur de développement local
• Ouvre votre navigateur par défaut pour prévisualiser le thème
• Surveille les changements de fichiers et recharge automatiquement

La prévisualisation utilise vos données de compte Zendesk réelles, vous verrez donc les articles, les catégories et les tickets réels rendus avec votre thème. Apportez une modification à un fichier de modèle, enregistrez-le, et le navigateur se rafraîchit automatiquement.

Étape 3 : Connecter Zendesk à votre référentiel GitHub

Avec votre thème prêt dans GitHub et le développement local fonctionnel, il est temps d'établir la connexion entre Zendesk et votre référentiel.

Accéder à l'intégration GitHub

Dans votre compte Zendesk :

1. Allez dans Administration des connaissances (l'interface de gestion du centre d'aide)
2. Cliquez sur Personnaliser le design dans la barre latérale
3. Cliquez sur Ajouter un thème en haut à droite
4. Sélectionnez Ajouter depuis GitHub

Autoriser et importer

Vous verrez une boîte de dialogue vous demandant l'URL de votre référentiel. Entrez l'URL GitHub complète :

https://github.com/your-org/your-theme

Spécifiez éventuellement un nom de branche si vous souhaitez importer à partir d'une branche autre que la branche par défaut.

Cliquez sur Importer. Si vous n'avez pas autorisé Zendesk à accéder à GitHub auparavant, vous serez redirigé vers GitHub pour accorder les autorisations. Autorisez l'application Zendesk, puis revenez à Zendesk.

Le processus d'importation récupère vos fichiers de thème depuis GitHub et crée un nouveau thème dans votre compte Zendesk. Une fois terminé, vous verrez la vignette du thème sur votre page Thèmes.

Comprendre la connexion

Cette importation initiale établit une connexion unique entre votre thème Zendesk et le référentiel GitHub. Après ce point, les changements circulent dans une seule direction : de GitHub vers Zendesk. Vous ne pouvez pas modifier un thème géré par GitHub directement dans l'interface Zendesk sans casser la connexion.

Étape 4 : Personnaliser et déployer votre thème

Maintenant que l'intégration est active, vous disposez d'un flux de travail qui combine la puissance du contrôle de version avec un déploiement facile vers Zendesk.

Apporter des modifications localement

Travaillez toujours sur votre thème localement, pas dans l'administration Zendesk. Voici le flux de travail recommandé :

1. Créer une branche pour vos modifications : git checkout -b feature/update-header
2. Apporter des modifications aux modèles, au CSS ou au JavaScript
3. Prévisualiser les modifications avec zcli themes:preview
4. Valider votre travail : git commit -am "Update header styling"
5. Pousser vers GitHub : git push origin feature/update-header
6. Ouvrir une demande de tirage pour la revue de l'équipe
7. Fusionner vers main une fois approuvé

Important : Ne modifiez jamais un thème géré par GitHub directement dans l'interface Zendesk. Si vous le faites, Zendesk vous avertira que cela cassera la connexion GitHub. Si vous apportez accidentellement des modifications dans Zendesk, vous devrez télécharger le thème et valider ces modifications dans GitHub pour restaurer la synchronisation.

Mettre à jour le thème dans Zendesk

Lorsque vos modifications sont fusionnées dans la branche principale et que vous êtes prêt à déployer :

1. Dans l'administration des connaissances, allez dans Personnaliser le design
2. Trouvez votre thème géré par GitHub
3. Cliquez sur le menu (trois points) et sélectionnez Mettre à jour depuis GitHub
4. Passez en revue les modifications dans la prévisualisation
5. Cliquez sur Publier lorsque vous êtes prêt

Zendesk récupère la dernière version de votre référentiel et l'applique à votre centre d'aide. La mise à jour se fait immédiatement, alors pensez à utiliser un environnement de staging ou une branche de test si vous avez besoin de valider les modifications avant qu'elles ne soient mises en ligne.

Conseils pour la collaboration en équipe

Une fois que plusieurs personnes travaillent sur votre thème, quelques pratiques aident à maintenir l'organisation.

Stratégie de branche

Établissez des conventions claires pour la façon dont votre équipe utilise les branches :

• main Code prêt pour la production uniquement. Ne validez jamais directement sur main.
• develop Branche d'intégration pour le staging. Fusionnez les branches de fonctionnalité ici pour les tests.
• feature/* Fonctionnalités individuelles ou corrections de bugs. Créez une nouvelle branche pour chaque tâche.
• hotfix/* Corrections urgentes qui doivent contourner le flux de travail normal.

Dans Zendesk, vous pouvez avoir plusieurs thèmes importés depuis le même référentiel en utilisant différentes branches. Envisagez de maintenir un thème « Staging » qui suit votre branche develop, vous permettant de prévisualiser les modifications avant qu'elles n'atteignent la production.

Flux de travail de revue de code

Exigez des demandes de tirage pour toutes les modifications apportées à main. Cela garantit :

• Au moins une autre personne examine le code
• Des vérifications automatisées peuvent être exécutées (linting, tests d'accessibilité)
• Il existe un enregistrement documenté des raisons pour lesquelles les modifications ont été apportées

De nombreuses équipes utilisent GitHub Actions pour exécuter automatiquement des tests sur les demandes de tirage, détectant les problèmes avant qu'ils n'atteignent Zendesk.

Gestion de plusieurs thèmes

Si vous gérez des centres d'aide pour plusieurs marques ou régions, vous avez des options :

• Référentiels distincts Isolation complète entre les thèmes
• Même référentiel, différentes branches Code partagé avec des remplacements spécifiques à la marque
• Thème basé sur la configuration Utilisez les paramètres manifest.json pour activer/désactiver les éléments de la marque

L'approche par branche fonctionne bien lorsque les thèmes sont similaires mais ont besoin de couleurs, de logos ou de contenu spécifiques à la marque.

Dépannage des problèmes courants

Erreurs d'authentification : Si Zendesk ne peut pas accéder à votre référentiel, vérifiez que le référentiel est accessible au compte que vous avez autorisé. Les référentiels privés nécessitent des autorisations appropriées.

Échecs d'importation : Assurez-vous que manifest.json se trouve à la racine de votre référentiel et contient un JSON valide. Les erreurs de syntaxe dans ce fichier empêchent l'importation.

Problèmes de synchronisation : Si Zendesk ne reflète pas vos dernières modifications, vérifiez que vous avez poussé vers la branche correcte et que vous effectuez la mise à jour depuis la bonne branche dans Zendesk.

Améliorer votre centre d'aide au-delà des thèmes

Un thème bien conçu donne à votre centre d'aide une apparence professionnelle, mais l'impact réel sur l'expérience client vient de la façon dont vous gérez les interactions. Bien que les visiteurs apprécient une interface propre, ce qu'ils veulent vraiment, ce sont des réponses rapides et précises à leurs questions.

C'est là que les outils de support basés sur l'IA deviennent précieux. eesel AI s'intègre directement à Zendesk pour automatiser les réponses, trier les tickets entrants et fournir des réponses instantanées à partir de votre base de connaissances. Au lieu de simplement être beau, votre centre d'aide devient véritablement plus utile.

La combinaison fonctionne particulièrement bien : votre thème personnalisé géré par GitHub crée l'expérience visuelle, tandis que l'IA gère la couche conversationnelle. Les clients bénéficient d'une expérience de marque cohérente, qu'ils parcourent des articles ou qu'ils discutent avec votre agent IA.

Si vous investissez des efforts dans la personnalisation de l'apparence de votre centre d'aide, pensez également à améliorer la façon dont vous gérez les conversations qui s'y déroulent. Notre guide sur l'automatisation du support client explique comment l'IA peut réduire les temps de réponse et libérer votre équipe pour qu'elle se concentre sur les problèmes complexes qui nécessitent vraiment une attention humaine.