Imaginez un agent de support travaillant sur un ticket complexe. Il doit vérifier l'historique des commandes du client, consulter son enregistrement CRM et effectuer une recherche dans la base de connaissances, sans quitter Zendesk. C'est exactement ce que fait une application pour la barre latérale des tickets. Elle apporte des données et des outils externes directement dans l'espace de travail de l'agent, ce qui permet de gagner du temps et de réduire les changements de contexte.
La barre latérale des tickets est l'un des emplacements les plus puissants pour les applications Zendesk. Elle se trouve dans le tiroir des applications sur le côté droit de chaque ticket, ce qui donne aux agents un accès instantané aux informations contextuelles. Que vous créiez une intégration pour votre équipe ou que vous envisagiez de publier sur la place de marché Zendesk, ce guide vous expliquera comment créer une application pour la barre latérale des tickets à partir de zéro.
Ce dont vous aurez besoin
Avant de commencer la création, assurez-vous que vous avez les éléments suivants prêts :
- Un compte Zendesk avec le plan Suite Growth ou supérieur, ou le plan Support Professional ou supérieur. Vous pouvez obtenir un compte d'essai gratuit pour le développement si nécessaire.
- Node.js 14.17.3 ou version ultérieure installé sur votre machine
- L'interface de ligne de commande Zendesk (ZCLI) pour créer et tester des applications localement
- Un navigateur Web qui autorise le contenu HTTP et HTTPS mixte, comme Chrome ou Firefox. Safari ne fonctionnera pas pour le développement local, car il ne prend pas en charge le contenu mixte.
- Connaissance de base de HTML, CSS et JavaScript
Étape 1 : Configurer votre environnement de développement
Tout d'abord, vous devrez installer ZCLI et créer la structure de votre application. ZCLI est l'outil de ligne de commande officiel de Zendesk qui gère tout, de la création de nouvelles applications à leur empaquetage pour le déploiement.
Pour installer ZCLI globalement, exécutez :
npm install -g @zendesk/zcli
Une fois installé, créez une nouvelle application en exécutant :
zcli apps:new
Vous serez invité à fournir quelques détails :
- Nom du répertoire : cela crée le dossier pour les fichiers de votre application
- Nom et adresse e-mail de l'auteur : pour le manifeste de l'application
- Nom de l'application : le nom d'affichage de votre application
ZCLI génère un modèle de démarrage avec les fichiers essentiels :
manifest.json: définit la configuration de votre application, y compris l'emplacementassets/iframe.html: le contenu HTML affiché dans la barre latéraleassets/logo.png: l'icône de votre applicationtranslations/en.json: pour l'internationalisation
Étape 2 : Configurer l'emplacement de la barre latérale des tickets
Le cœur de la configuration de votre application se trouve dans manifest.json. Ce fichier indique à Zendesk où votre application doit apparaître et quel contenu charger.
Pour une application de barre latérale de ticket, votre manifeste a besoin d'une propriété location qui spécifie la clé ticket_sidebar :
{
"name": "My Sidebar App",
"author": {
"name": "Your Name",
"email": "you@example.com"
},
"defaultLocale": "en",
"private": true,
"location": {
"support": {
"ticket_sidebar": {
"url": "assets/iframe.html",
"flexible": true
}
}
},
"version": "1.0.0"
}
Décomposons les propriétés clés :
url: pointe vers le fichier HTML qui se charge dans l'iframe de la barre latérale. C'est là que se trouve l'interface utilisateur de votre application.flexible: contrôle si l'iframe se redimensionne avec le tiroir des applications. Définissez surtruepour un comportement réactif, oufalsepour verrouiller la largeur à 320 px.
Il existe également un emplacement new_ticket_sidebar pour les applications qui doivent apparaître lorsque les agents créent de nouveaux tickets, avant qu'ils ne soient soumis. Une fois un ticket créé, il passe à l'emplacement standard ticket_sidebar.
Étape 3 : Accéder aux données des tickets avec les API ZAF
Passons maintenant à la partie intéressante : faire en sorte que votre application fasse réellement quelque chose. Le Zendesk Apps Framework (ZAF) fournit un SDK JavaScript qui permet à votre application d'interagir avec les données des tickets, les informations utilisateur et l'interface Zendesk.
Tout d'abord, incluez le SDK ZAF dans votre iframe.html :
<script src="https://static.zdassets.com/zendesk_app_framework_sdk/2.0/zaf_sdk.min.js"></script>
Ensuite, initialisez le client et commencez à extraire les données :
var client = ZAFClient.init();
// Get the current ticket's subject and status
client.get('ticket.subject').then(function(data) {
console.log('Ticket subject:', data['ticket.subject']);
});
// Fetch multiple properties at once
client.get(['ticket.subject', 'ticket.status', 'ticket.priority']).then(function(data) {
console.log('Ticket info:', data);
});
L'emplacement de la barre latérale des tickets vous donne accès à des objets de données riches :
- Objet Ticket : statut, priorité, sujet, description, champs personnalisés, balises
- Objets Utilisateur : détails du demandeur, utilisateur actuel, collaborateurs
- Objets Commentaire : commentaires et pièces jointes des tickets
- Données de la marque et de l'organisation : contexte sur le compte
Vous pouvez également écouter les modifications en temps réel. Si un agent met à jour le statut du ticket ou le cessionnaire, votre application peut répondre immédiatement :
client.on('ticket.status.changed', function() {
console.log('Ticket status was updated');
// Refresh your app's data or UI
});
Étape 4 : Concevoir des mises en page réactives
Voici quelque chose que de nombreux développeurs manquent : la largeur de la barre latérale des tickets n'est plus fixe. Avec l'espace de travail de l'agent, les agents peuvent redimensionner le tiroir des applications de 200 px à une largeur pratiquement illimitée. Votre application doit gérer cela avec élégance.
Si vous définissez flexible: true dans votre manifeste, l'iframe se redimensionne automatiquement. Mais votre CSS doit également répondre. Envisagez d'utiliser un framework réactif comme Tailwind CSS, ou écrivez des requêtes de média qui adaptent votre mise en page :
/* Default styles for narrow sidebar */
.app-container {
padding: 12px;
font-size: 14px;
}
/* Wider sidebar - show more details */
@media (min-width: 400px) {
.app-container {
padding: 16px;
}
.detail-view {
display: block;
}
}
Pensez à la concentration de l'agent. Lorsque la barre latérale est étroite, il se concentre probablement sur la conversation. Affichez uniquement les informations essentielles. Lorsqu'il développe le tiroir, il essaie probablement d'effectuer une tâche dans votre application. C'est alors que vous pouvez révéler plus de fonctionnalités.
Étape 5 : Tester et déployer votre application
Une fois votre application créée, il est temps de la tester localement avant de la déployer. ZCLI comprend un serveur local qui vous permet d'exécuter votre application dans votre environnement Zendesk réel.
Démarrez le serveur de développement :
zcli apps:server
Cela démarre un serveur Web local pour votre application. Pour le voir en action :
- Ouvrez une fenêtre de navigateur incognito ou privée (cela empêche les problèmes de mise en cache)
- Connectez-vous à Zendesk et ouvrez n'importe quel ticket
- Ajoutez
?zcli_apps=trueà l'URL - Votre application apparaît dans le tiroir des applications
Apportez des modifications à votre code, enregistrez et actualisez la page pour voir les mises à jour instantanément.
Lorsque vous êtes prêt à déployer, packagez votre application :
zcli apps:package
Cela crée un fichier ZIP que vous pouvez télécharger directement sur votre instance Zendesk pour un usage privé, ou soumettre à la place de marché Zendesk si vous souhaitez le partager avec d'autres organisations.
Cas d'utilisation courants pour les applications de la barre latérale des tickets
Maintenant que vous comprenez les mécanismes, que devez-vous créer ? Voici quelques modèles qui fonctionnent bien dans la barre latérale des tickets :
- Recherches de données client : extrayez l'historique des commandes de Shopify, les détails du compte de Salesforce ou le statut de l'abonnement de votre système de facturation. Les agents voient tout sans changer d'onglet.
- Flux de travail multiplateformes : créez des problèmes Jira, ajoutez des cartes Trello ou enregistrez des bogues dans GitHub directement à partir d'un ticket. L'application préremplit les données du ticket Zendesk pour gagner du temps.
- Assistance à la connaissance : recherchez dans votre centre d'aide, votre wiki interne ou vos tickets passés pour trouver des solutions pertinentes. Certaines applications utilisent l'IA pour suggérer des réponses basées sur le contenu du ticket.
- Support optimisé par l'IA : des outils comme eesel AI fonctionnent dans la barre latérale pour rédiger des réponses, faire remonter les connaissances pertinentes de plusieurs sources et aider les agents à résoudre les tickets plus rapidement.
La clé est le contexte. Les meilleures applications de la barre latérale affichent automatiquement les informations pertinentes au ticket spécifique et au client que l'agent consulte.
Conseils et bonnes pratiques
Avant de terminer votre application, gardez ces directives à l'esprit :
- Gardez-la légère : les applications de la barre latérale se chargent sur chaque ticket. Les bibliothèques JavaScript lourdes ou les ressources volumineuses ralentissent l'expérience de l'agent.
- Gérez les erreurs avec élégance : les API externes échouent. Les connexions réseau tombent. Intégrez la gestion des erreurs afin que votre application échoue silencieusement plutôt que de perturber le flux de travail de l'agent.
- Utilisez Zendesk Garden : le système de conception de Zendesk fournit des composants qui correspondent à l'interface native. Cela donne à votre application l'impression de faire partie de Zendesk, et non d'un élément étranger.
- Sécurisez vos clés API : ne codez jamais en dur les informations d'identification dans votre application. Utilisez les paramètres sécurisés de Zendesk ou OAuth pour l'authentification.
- Testez avec des données réelles : une application qui fonctionne parfaitement avec des tickets de test peut avoir du mal avec des caractères inhabituels, des lignes d'objet longues ou des champs personnalisés manquants.
Commencez à créer votre application de barre latérale Zendesk dès aujourd'hui
Vous avez maintenant tout ce dont vous avez besoin pour créer une application de barre latérale de ticket. De la configuration de votre environnement de développement avec ZCLI à la configuration du manifeste, en passant par l'accès aux données des tickets via ZAF et la conception de mises en page réactives, la base est en place.
La barre latérale des tickets est un moyen puissant d'étendre les capacités de Zendesk. Que vous résolviez un flux de travail spécifique pour votre équipe ou que vous construisiez quelque chose pour la communauté Zendesk au sens large, les applications dans cet emplacement mettent les informations et les actions exactement là où les agents en ont besoin.
Si vous cherchez à ajouter des capacités d'IA à votre configuration Zendesk, eesel AI fonctionne comme une application de barre latérale qui apporte les connaissances de votre centre d'aide, des tickets passés et de la documentation interne directement dans l'espace de travail de l'agent. C'est un bon exemple de ce qui est possible lorsque vous combinez le Zendesk Apps Framework avec des capacités d'IA modernes.
Prêt à commencer ? Récupérez vos informations d'identification Zendesk, installez ZCLI et créez quelque chose qui facilite un peu la journée de votre équipe de support.
Foire aux questions
Partager cet article
Article by
Stevia Putri
Stevia Putri is a marketing generalist at eesel AI, where she helps turn powerful AI tools into stories that resonate. She’s driven by curiosity, clarity, and the human side of technology.
