Cet article est conçu pour vous aider à résoudre le défi que représente l’intégration de fonctionnalités personnalisées et uniques à votre centre d’aide Zendesk. En vous guidant dans le processus d’ajout de pages personnalisées à votre édition Guide Enterprise, il explique comment développer, regrouper et incorporer des pages personnalisées en utilisant des technologies comme React.js et Node.js. Par exemple, vous pouvez créer une page d’inscription VIP Support personnalisée qui s’intègre parfaitement à votre centre d’aide existant et offre ainsi une expérience utilisateur personnalisée et homogène.
Cet exemple d’application d’une seule page utilise React avec TypeScript pour le front-end et Node.js pour le backend. Le style CSS de l’application est conçu par TalkWind et Nodemailer gère les confirmations par e-mail pour les nouveaux utilisateurs qui ont réussi à s’inscrire.
Comme il s’agit d’une application React, l’exemple couvre les étapes de Webpack pour le compiler dans un seul fichier. Incorporez le fichier au thème de votre centre d’aide et chargez-le. Suivez les sections ci-dessous pour chaque série d’étapes :
- Développer : Créez la page personnalisée en utilisant React avec TypeScript et Node.js.
- Offre groupée : Configurer Webpack pour regrouper la page personnalisée
- Incorporer : Intégrer le projet à votre thème et le publier dans le centre d’aide
Développer : Créez la page personnalisée en utilisant React avec TypeScript et Node.js.
Les pages personnalisées vous permettent de développer en utilisant n'importe quelle pile technologique Web de votre choix. et beaucoup préfèrent utiliser React.js avec Node.js pour le développement du backend. Chaque technologie a ses nuances et ses spécifications. Voici quelques considérations techniques :
Réagissez
Utilisez Create React App pour les pages personnalisées, car il s’agit d’un framework d’application ne contenant qu’une seule page. La page de connexion Assistance VIP ci-dessus fait deux demandes. L'un d'entre eux génère un token sécurisé pour l'authentification du backend. L'autre envoie des données réelles.
L’exemple de page personnalisée modifie les profils et les organisations des utilisateurs au sein de Zendesk. Si votre page fait des demandes similaires, validez les données du front-end avant la demande. La validation backend est essentielle, mais la validation frontend garantit que les données sont propres, en particulier à partir des saisies des utilisateurs.
N’oubliez pas qu’une page personnalisée n’est qu’une partie de votre centre d’aide. Assurez-vous que toutes les fonctionnalités, marques et styles sont en adéquation avec l’ensemble de votre centre d’aide.
Réfléchissez aux points suivants en matière de design :
-
Authentification : Déterminez qui peut accéder à cette page : agents, tous les utilisateurs authentifiés ou tous les utilisateurs
-
Navigation :
-
Ne développez pas d’en-tête ni de navigation sur votre page personnalisée. L’équipe Guide de votre compte les configure. La page personnalisée hérite de l’en-tête et de la navigation du thème actuel.
-
Placez cette page au bon endroit de votre centre d’aide. Comme la fonctionnalité, la page personnalisée existe hors du schéma du centre d’aide par défaut. Les utilisateurs accèdent à ces pages par le biais des liens dans n’importe quel modèle du centre d’aide ou n’importe quelle page prédéfinie comme votre page d’accueil. Les URL de page personnalisée ont le format suivant :
https://{domain_name}/hc[/{locale}]/p/{page_name}
-
-
Style de page : Sélectionnez des bibliothèques de styles qui s’alignent sur le thème du centre d’aide. Vérifiez que votre police et votre palette de couleurs correspondent au thème existant.
-
Traitement des images : Comme vous allez configurer et regrouper votre page personnalisée manuellement, le stockage des images ou des documents en local ne fonctionnera pas. Chargez-les dans le thème de votre centre d’aide avant de les incorporer. Pour des instructions détaillées, consultez l’article : Utilisation de vos propres ressources de thème pour le centre d’aide.
Node.js
Les pages personnalisées fournissent une toile vierge dans laquelle vous pouvez créer une expérience personnalisée pour vos visiteurs. Avec des outils comme Node.js et Express, vous pouvez vous connecter directement aux systèmes et bases de données existants. Vous pouvez aussi créer de nouveaux services avec votre pile technologique préférée, en les intégrant à votre centre d’aide pour une expérience utilisateur fluide.
L’exemple d’application utilise les fonctions ci-dessous.
-
Une API Express développée qui reçoit les informations sur l’utilisateur et l’organisation envoyées par le formulaire front-end.
-
Envoyez des demandes API à Zendesk Support pour créer et mettre à jour l’utilisateur et l’organisation pertinents avec la récupération de nœuds.
-
Valider les données d’envoi du formulaire à l’aide de validator.js.
-
Envoyez une notification par e-mail de confirmation à l’envoi du formulaire réussi avec Nodemailer.
Protégez les routages de vos API quand vous créez des services de pages personnalisées côté serveur. Utilisez des outils comme JWT pour sécuriser votre application en créant une authentification de demande. Pour en savoir plus au sujet de JWT, consultez cet article du site Web JWT : Introduction du token Web JSON.
L’exemple d’application utilise l’authentification ci-dessous.
-
Un point de terminaison d’authentification pour le front-end pour demander un token JWT pour autoriser les demandes à l’API d’envoi de formulaire.
-
Modules d'authentification qui génèrent et vérifient les tokens JWT à l'aide de jsonwebtoken.
En fonction de l’application que vous créez, réfléchissez à votre politique CORS (Cross-Origin Resource Sharing). Vérifiez que CORS est activé sur les routages recevant les demandes du côté client. Si vous connaissez les domaines qui envoient les demandes, spécifiez-les explicitement. Sinon, utilisez le caractère générique *. Pour en savoir plus au sujet de CORS, consultez cet article du site Web de Mozilla : Partage de ressources d’origines multiples (CORS).
Offre groupée : Configurer Webpack pour regrouper la page personnalisée
Une fois le développement de votre page personnalisée terminé, créez un package de votre application React avec Webpack. Étant donné que toutes les pages personnalisées doivent être incorporées à votre thème, compilez-les dans un seul fichier HTML. L’ application Create React est dotée de ses propres avantages et optimisation. Cependant, comme l’objectif est de renvoyer un widget index.html , l’exemple a sa propre configuration de webpack pour simplifier ce processus.
Incorporer : Intégrer le projet à votre thème et le publier dans le centre d’aide
Une fois votre application créée, incorporez-la à votre centre d’aide. Naviguez jusqu’au nouveau répertoire de build. Vous trouverez ici quelques fichiers nécessaires pour créer la nouvelle page personnalisée.
index.htmlstatic/css/bundle.min.cssstatic/bundle.min.js
La index.html file est le code à insérer dans la page personnalisée. Accédez au code JavaScript et CSS créé pour le projet. Commencez par charger le fichier JavaScript et CSS comme ressource dans votre centre d’aide. Ensuite, copiez le code à partir de votre index.html fichier dans la page personnalisée et ajuster les chemins d’accès aux documents.
Vous trouverez ci-dessous un exemple montrant comment cela s'affiche dans l'éditeur de code.
Ensuite, publiez votre page personnalisée. Pour des ressources supplémentaires sur la gestion du contenu dans votre centre d’aide, consultez l’article : Ressources Guide.
Traduction - exonération : cet article a été traduit par un logiciel de traduction automatisée pour permettre une compréhension élémentaire de son contenu. Des efforts raisonnables ont été faits pour fournir une traduction correcte, mais Zendesk ne garantit pas l’exactitude de la traduction.
Si vous avez des questions quant à l’exactitude des informations contenues dans l’article traduit, consultez la version anglaise de l’article, qui représente la version officielle.