Les pages personnalisées sont une fonctionnalité supplémentaire pour les éditions Guide Enterprise. Cette fonctionnalité vous permet d'ajouter des fonctionnalités uniques et des pages Web personnalisées à votre centre d'aide. Il s'agit d'une extension des thèmes personnalisés.
Dans cette démonstration de fonctionnalité, trouvez une application d'une seule page développée que les utilisateurs finaux peuvent utiliser pour s'inscrire afin de devenir des membres VIP et bénéficier d'une assistance personnalisée pour leur organisation.
Cet exemple d'application d'une seule page a été développé en utilisant React avec Typescript pour le frontend et Node.js pour le backend. Tailwind CSS a également été utilisé à des fins de style, ainsi que Nodemailer pour configurer le processus afin d'envoyer une confirmation par e-mail aux utilisateurs qui s'inscrivent.
Comme il s'agit d'une application React, l'exemple passe par les étapes Webpack nécessaires pour la compiler en un seul fichier. Ensuite, incorporez le fichier dans le thème de votre centre d'aide et chargez-le. Consultez les sections ci-dessous pour chaque série d'étapes :
- Développer - Comment développer la page personnalisée en utilisant React avec Typescript et Node.js
- Bundle - Comment configurer Webpack pour regrouper la page personnalisée
- Incorporer - Comment incorporer le projet dans votre thème et le publier dans le centre d'aide
Développer
Les pages personnalisées vous permettent de développer la page avec n'importe quelle pile technologique Web. Une préférence populaire pour la pile technologique est l'utilisation de React.js avec Node.js pour le développement backend. Comme pour toute technologie choisie, chaque code a ses propres nuances et spécifications à mettre en œuvre. Vous trouverez ci-dessous un aperçu de ces considérations techniques.
Réagir
Comme les pages personnalisées sont créées avec vos propres fonctionnalités, l' application Create React est un excellent choix de développement qui utilise un framework d'application d'une seule page.
La démonstration de la page d'inscription à l'assistance VIP ci-dessus fait deux demandes. Une demande génère un token sécurisé pour l'authentification de notre backend. L'autre demande consiste à faire la demande de données d'envoi.
L'exemple de page personnalisée modifie les profils et les organisations des utilisateurs au sein de Zendesk. Si votre page personnalisée effectue également ce type de demandes, mettez en œuvre un moyen de valider ces données à partir du frontend avant la demande. Bien qu'il devrait y avoir une validation des données traitant la demande dans le backend, en exécutant la validation à partir du frontend, surtout quand ces données proviennent d'entrées utilisateur comme un formulaire, vous pourrez vous assurer que seules des données propres et utilisables parviendront à votre instance Zendesk. .
Il est également important de comprendre qu'une page personnalisée n'est qu'une partie de votre centre d'aide. Toute fonctionnalité, marque ou style utilisé pour votre page personnalisée doit être cohérent avec l'ensemble de votre centre d'aide.
Certains aspects de la conception à prendre en compte incluent les points ci-dessous.
- Authentification : Quels types d'utilisateurs peuvent accéder à cette page ? Les agents, tous les utilisateurs authentifiés ou tous les utilisateurs ?
- Navigation :
- Il n'est pas nécessaire de développer un en-tête ou une navigation sur votre page personnalisée. L'équipe Guide de votre compte configure la navigation et l'en-tête. Comme la page personnalisée est incorporée à votre thème, l'en-tête et la navigation du thème actuel sont également appliqués à cette page.
- Réfléchissez à l'emplacement de cette page dans le centre d'aide. De la même façon que les fonctionnalités sont extraites du centre d'aide, la page personnalisée elle-même ne se trouve pas dans le schéma du centre d'aide par défaut. Les utilisateurs peuvent accéder à ces pages par le biais d'un lien incorporé dans un modèle de centre d'aide ou une page prédéfinie incluse à votre centre d'aide, comme votre page d'accueil. L'URL de vos pages personnalisées sera au format suivant :
https://{domain_name}/hc[/{locale}]/p/{page_name}
- Stylisme de la page : réfléchissez aux bibliothèques de styles que vous utilisez et vérifiez que le style s'aligne sur le reste du thème du centre d'aide. Vérifiez que vos sélections de police et de palette de couleurs correspondent au thème en place.
- Gestion des images : comme vous devrez configurer et regrouper votre page personnalisée manuellement, le stockage local des images ou des documents ne fonctionnera pas. Chargez-les dans le thème de votre centre d'aide avant de les incorporer. Pour un guide détaillé du chargement des documents dans votre thème, consultez l'article : Utilisation de vos propres documents de thème pour le centre d'aide.
Node.js
Les pages personnalisées vous donnent un canevas vide pour créer une expérience plus personnalisée pour vos visiteurs. La possibilité d'interagir avec un serveur principal créé avec des outils comme Node.js et Express vous permet de vous connecter directement aux systèmes et bases de données que vous avez déjà en place. Vous pouvez aussi créer des services entièrement nouveaux avec votre pile technologique préférée qui s'intègrent à 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 d'utilisateur et d'organisation envoyées par l'utilisateur dans le formulaire frontal.
-
Envoyez des demandes API à Zendesk Support pour créer et mettre à jour l'utilisateur et l'organisation pertinents avec Node-Fetch.
- Validez les données d'envoi du formulaire en utilisant validator.js.
-
Envoyez une notification de confirmation par e-mail à l'utilisateur une fois le formulaire envoyé avec Nodemailer.
Faites attention à la sécurité et protégez vos routages API quand vous créez des services de pages personnalisées côté serveur. Envisagez de développer l'authentification des demandes avec des outils comme JWT pour sécuriser votre application. Pour en savoir plus au sujet de JWT, consultez cet article du site Web JWT : Présentation du token Web JSON.
L'exemple d'application utilise l'authentification ci-dessous.
- Un point de terminaison d'authentification pour l'interface permettant de demander un token JWT pour autoriser les demandes à l'API d'envoi de formulaires.
- Modules d'authentification qui génèrent et vérifient les tokens JWT en utilisant jsonwebtoken.
Selon l'application que vous créez, votre politique CORS (Cross-Origin Resource Sharing) doit aussi être prise en compte. Vérifiez que les routages qui reçoivent des demandes du côté client ont activé CORS. Si vous savez quels domaines envoient les demandes, spécifiez ces domaines explicitement. Sinon, utilisez le caractère générique *. Pour en savoir plus sur CORS, consultez cet article du site Web de Mozilla : Partage des ressources inter-origine (CORS).
Forfait
Une fois le développement de votre page personnalisée terminé, regroupez votre application React en utilisant webpack. Comme toutes les pages personnalisées doivent être incorporées dans votre thème, compilez la page personnalisée dans un seul fichier html. L' application Create React est livrée avec ses propres fonctionnalités de regroupement et d'optimisation. Cependant, comme l'objectif est de renvoyer un seul index.html , l'exemple a sa propre configuration webpack, ce qui simplifiera ce processus.
Embarqué
Une fois votre application créée, incorporez-la à votre centre d'aide. Naviguez jusqu'au nouveau répertoire de création. Vous trouverez ici quelques fichiers nécessaires à la création de la nouvelle page personnalisée.
index.html- statique/css/bundle.min.css
- statique/bundle.min.js
Le index.html est le code à placer dans la page personnalisée. Accéder au code JavaScript et CSS créé pour le projet. Commencez par charger les fichiers JavaScript et CSS sous forme d' actifs dans votre centre d'aide. Ensuite, copiez le code de votre index.html dans la page personnalisée et ajuster les chemins d'accès aux documents.
Vous trouverez ci-dessous un exemple de cet affichage dans l'éditeur de code.
Une fois que vous avez terminé, publiez votre page personnalisée. Pour des ressources supplémentaires sur la gestion du contenu dans votre centre d'aide, consultez l'article : Ressources pour les guides.
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.
2 commentaire
Vous connecter pour laisser un commentaire.