Cet article vous aide à intégrer des fonctionnalités personnalisées et uniques à votre centre d’aide Zendesk. Il vous guide tout au long du processus d’ajout de pages personnalisées à votre édition Connaissances Enterprise et 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 Support VIP personnalisée qui s’intègre parfaitement au design de votre centre d’aide existant et offre une expérience utilisateur cohérente et personnalisée.
Cet exemple d’application d’une seule page utilise React avec TypeScript pour l’interface et Node.js pour le backend. Finest CSS applique un style à l’application et Nodemailer gère les confirmations par e-mail pour les nouveaux utilisateurs qui s’inscrivent.
Comme vous travaillez avec l’application React, l’exemple couvre les étapes Webpack pour le compiler dans un seul fichier. Vous incorporez le fichier au thème de votre centre d’aide et vous le chargez. Suivez les sections ci-dessous pour chaque série d’étapes :
- Étape 1 : Développez la page personnalisée en utilisant React avec TypeScript et Node.js
- Étape 2 : Configurez Webpack pour regrouper la page personnalisée
- Étape 3 : Incorporez et intégrez le projet à votre thème, puis publiez-le dans le centre d’aide
Si vous ne voulez pas effectuer d’intégration avec un système backend ni utiliser TypeScript, essayez la procédure standard pour créer votre propre application d’une seule page.
Étape 1 : Développez 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. De nombreux développeurs préfèrent React.js et Node.js pour le développement du backend. Chaque technologie a ses nuances et ses spécifications. Réfléchissez aux points techniques suivants :
React
Utilisez Create React App pour les pages personnalisées, car ce framework prend en charge les applications d’une seule page. La page d’inscription à Support VIP ci-dessus fait deux demandes : une demande génère un token sécurisé pour l’authentification backend et l’autre envoie des données.
L’exemple de page personnalisée modifie les profils et organisations des utilisateurs dans Zendesk. Si votre page fait des demandes similaires, validez les données du système avant d’envoyer la demande. La validation du backend joue un rôle crucial, mais la validation de l’interface garantit que les données sont propres, en particulier pour les saisies utilisateur.
N’oubliez pas qu’une page personnalisée ne forme qu’une partie de votre centre d’aide. Assurez-vous que les fonctionnalités, les éléments de marque et le style sont en adéquation avec l’ensemble de votre centre d’aide .
Réfléchissez aux aspects suivants :
-
Authentification : Spécifiez qui peut accéder à cette page : agents, tous les utilisateurs authentifiés ou tous les utilisateurs.
-
Navigation :
-
Évitez de développer un en-tête ou une navigation sur votre page personnalisée. L’équipe Connaissances de votre compte configure ces fonctionnalités. La page personnalisée hérite de l’en-tête et de la navigation du thème actuel.
-
Positionnez cette page correctement dans votre centre d’aide. Comme la fonctionnalité précédente, la page personnalisée existe hors du schéma du centre d’aide par défaut. Les utilisateurs accèdent à ces pages via des liens dans n’importe quel modèle du centre d’aide ou via des pages prédéfinies comme votre page d’accueil. Les URL de pages personnalisées ressemblent à ceci :
https://{domain_name}/hc[/{locale}]/p/{page_name}
-
-
Style de la page : Sélectionnez les bibliothèques de style adaptées au thème du centre d’aide . Assurez-vous que la police et la palette de couleurs correspondent à celles de votre thème existant.
-
Traitement des images : Comme vous configurez et regroupez votre page personnalisée manuellement, le stockage des images ou des documents en local ne fonctionne 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 vous offrent une toile vierge pour 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 et les intégrer à votre centre d’aide pour une expérience utilisateur fluide.
L’application de l’exemple utilise les fonctions ci-dessous.
-
Les développeurs ont créé une API express qui reçoit les informations d’utilisateur et d’organisation envoyées par le formulaire front-end.
-
L’application envoie des demandes API à Zendesk Support pour créer et mettre à jour l’utilisateur et l’organisation pertinents à l’aide de la récupération de nœuds.
-
Il valide les données d’envoi du formulaire à l’aide de validator.js.
-
L’application envoie une notification par e-mail de confirmation à l’utilisateur lorsque l’envoi du formulaire réussit à l’aide de Nodemailer.
Protégez soigneusement vos routages API quand vous créez des services de page personnalisés côté serveur. Utilisez des outils comme JWT pour sécuriser votre application en créant l’authentification des demandes. Pour en savoir plus sur JWT, consultez cet article sur le site Web JWT : Introduction du token Web JSON.
L’application de l’exemple utilise l’authentification décrite ci-dessous.
-
Les développeurs ont créé un point de terminaison d’authentification que l’interface utilise pour demander un token JWT et autoriser les demandes à envoyer à l’API d’envoi de formulaire.
-
Les modules d'authentification génèrent et vérifient les tokens JWT à l'aide de jsonwebtoken.
Selon l’application que vous créez, réfléchissez à la politique CORS (Cross-Origin Resource Sharing). Vérifiez que CORS est activé sur les routages qui reçoivent les demandes côté client. Si vous connaissez les domaines qui envoient les demandes, spécifiez-les explicitement. Sinon, configurez 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)
Étape 3 : Configurez Webpack pour regrouper la page personnalisée
Une fois que vous avez terminé le développement de votre page personnalisée, regroupez votre application React en utilisant Webpack. Comme votre thème doit incorporer toutes les pages personnalisées, compilez la page personnalisée dans un seul fichier HTML. L’ application Create React inclut ses propres fonctionnalités et optimisation. Cependant, comme votre but est de renvoyer index.html l’exemple utilise sa propre configuration de webpack pour simplifier ce processus.
Étape 4 : Incorporez et intégrez le projet à votre thème, puis publiez-le dans le centre d’aide
Une fois que vous avez créé votre application, incorporez-la à votre centre d’aide. Naviguez jusqu’au nouveau répertoire de création. Vous trouverez quelques fichiers nécessaires pour créer la nouvelle page personnalisée.
index.htmlstatic/css/bundle.min.cssstatic/bundle.min.js
La index.html Le fichier contient le code que vous placez dans la page personnalisée. Accédez au code JavaScript et CSS créé pour le projet. Commencez par charger les fichiers JavaScript et CSS comme documents dans votre centre d’aide. Ensuite, copiez le code à partir de votre index.html vers la page personnalisée et modifiez les chemins de fichiers pour pointer vers les actifs.
Regardez l’exemple présenté par l’éditeur de code ci-dessous.
Une fois que vous avez terminé, publiez votre page personnalisée. Pour en savoir plus sur la gestion du contenu dans votre centre d’aide, consultez l’article : Ressources de connaissances.
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.