Las páginas personalizadas son una función adicional de los planes Guide Enterprise. Esta función le permite agregar funcionalidad única y páginas web personalizadas a su centro de ayuda y es una extensión de los temas personalizados.
En esta demostración de funciones, busque una aplicación desarrollada de una sola página que los usuarios finales pueden usar para registrarse para convertirse en miembros VIP y recibir soporte personalizado para su organización.
Este ejemplo de aplicación de una sola página se desarrolló usando React con Typescript para la interfaz y Node.js para el backend. El CSSde tailwind también se usó para fines de estilo junto con Nodemailer para configurar el proceso para enviar una confirmación por correo electrónico a los usuarios que se registran correctamente.
Debido a que esta es una aplicación de React, el ejemplo sigue los pasos necesarios para compilarlo en un solo archivo. Luego, incruste el archivo en el tema del centro de ayuda y cárguelo. Consulte las secciones a continuación para ver cada conjunto de pasos:
- Desarrollar : cómo desarrollar la página personalizada usando React con Typescript y Node.js
- Lote: cómo configurar Webpack para agrupar la página personalizada
- Incrustar : cómo incrustar el proyecto en el tema y publicarlo en el centro de ayuda
Desarrollar
Las páginas personalizadas le permiten desarrollar la página con cualquier tecnología web que desee. Una preferencia popular de la pila de tecnología es el uso de React.js con Node.js para el desarrollo backend. Al igual que con cualquier tecnología elegida, cada código tiene sus propios matices y especificaciones para implementar. Consulte más abajo un resumen de estas consideraciones técnicas.
Reaccionar
Debido a que las páginas personalizadas se crean con su propia funcionalidad, la aplicación Create React es una excelente opción de desarrollo que usa un framework de aplicaciones de una sola página.
La demostración de la página de registro de Soporte VIP anterior hace dos solicitudes. Una solicitud genera un token seguro para la autenticación en nuestro backend. La otra solicitud es hacer la propia solicitud de envío de datos.
La página personalizada de ejemplo crea cambios en los perfiles de usuario y las organizaciones dentro de Zendesk. Si su página personalizada también hará este tipo de solicitudes, implemente una manera de validar esos datos desde la interfaz antes de la solicitud. Si bien debería haber una validación de datos que maneje la solicitud dentro del backend, si se ejecuta la validación desde el interfaz, especialmente cuando estos datos provienen de las entradas del usuario, como un formulario, podrá asegurarse de que solo los datos limpios y consumibles lleguen a su instancia de Zendesk .
También es importante reconocer que una página personalizada es solo una parte del centro de ayuda. Cualquier funcionalidad, marca o estilo que se use para la página personalizada debe ser coherente con el centro de ayuda en general.
Algunos aspectos de diseño que se deben tener en cuenta son los siguientes.
- Autenticación: ¿Qué tipos de usuarios pueden acceder a esta página? ¿Agentes, todos los usuarios autenticados o todos los usuarios?
- Navegación:
- No es necesario crear un encabezado ni una navegación en la página personalizada. El equipo de Guide de su cuenta establece la navegación y el encabezado. Como la página personalizada está incrustada en el tema, el encabezado y la navegación del tema actual también se aplican a esta página.
- Considere dónde se ubicará esta página en el centro de ayuda. De manera similar a cómo se extrae la funcionalidad del centro de ayuda, la página personalizada en sí también reside fuera del esquema predeterminado del centro de ayuda. Los usuarios pueden acceder a estas páginas a través de un vínculo incrustado en cualquier plantilla del centro de ayuda o página predefinida incluida con el centro de ayuda, como la página principal. El URL para sus páginas personalizadas tendrá este formato:
https://{domain_name}/hc[/{locale}]/p/{page_name}
- Estilo de página: tenga en cuenta las bibliotecas de estilos que está usando y si el estilo se alinea con el resto del tema del centro de ayuda. Asegúrese de que las selecciones de fuente y paleta de colores coincidan con el tema en su lugar.
- Manejo de imágenes: como tendrá que configurar y agrupar la página personalizada manualmente, no funcionará el almacenamiento local de imágenes y recursos. Cárguelos al tema del centro de ayuda antes de incrustarlos. Si desea una guía paso a paso sobre cómo cargar recursos a su tema, consulte el artículo: Usar sus propios recursos de temas para el centro de ayuda.
Node.js
Las páginas personalizadas proporcionan un espacio en blanco para crear una experiencia más personalizada para los visitantes. La capacidad de interactuar con un servidor back-end creado con herramientas como Node.js y Express le permite conectarse directamente con los sistemas y las bases de datos que ya tiene. También puede crear servicios completamente nuevos con su tecnología preferida que se integren con su centro de ayuda para brindar una experiencia de usuario perfecta.
La aplicación de ejemplo usa las funciones a continuación.
- Una API Express desarrollada que recibe la información del usuario y la organización enviada por el usuario en el formulario de interfaz.
-
Envíe solicitudes de API a Zendesk Support para crear y actualizar el usuario y la organización correspondientes con la búsqueda de nodos.
- Valide los datos de envío del formulario usando validator.js.
-
Envíe una notificación por correo electrónicode confirmación al envío correcto del formulario con Nodemailer.
Tenga en cuenta la seguridad y proteja las rutas de la API al crear servicios de páginas personalizadas del lado del servidor. Considere crear la autenticación de solicitudes con herramientas como JWT para proteger su aplicación. Si desea leer más sobre JWT, consulte este artículo del sitio web de JWT: Introducción al Token Web JSON.
La aplicación de ejemplo utiliza la autenticación a continuación.
- Un extremo de autenticación para que la interfaz solicite un token de JWT para autorizar las solicitudes a la API de envío de formularios.
- Los módulos de autenticación que generan y verifican los tokens de JWT usando jsonwebtoken.
Dependiendo de la aplicación que se cree, otra consideración debe ser la política CORS (Cross-Origin Resource Sharing). Asegúrese de que las rutas que reciben solicitudes del lado del cliente tengan activado CORS. Si sabe qué dominios envían las solicitudes, especifique esos dominios explícitamente. De lo contrario, utilice el comodín "*". Si desea más información sobre CORS, consulte este artículo del sitio web de Mozilla: Intercambio de recursos entre orígenes (CORS).
Paquete
Una vez finalizado el desarrollo de su página personalizada, agrupe su aplicación React usando el paquete web. Debido a que todas las páginas personalizadas deben incrustarse dentro del tema, compile la página personalizada en un solo archivo html. La aplicación Create React viene con su propio paquete y optimización. Sin embargo, dado que el objetivo es devolver un solo index.html
, el ejemplo tiene su propia configuración de paquete web que simplificará este proceso.
Incrustar
Después de compilar la aplicación, incruste la aplicación en el centro de ayuda. Vaya al directorio de compilación recién creado. Aquí encontrará algunos archivos que son necesarios para crear la nueva página personalizada.
index.html
- estática / css / bundle.min.css
- estático / bundle.min.js
El index.html
file es el código que se coloca en la página personalizada. Acceda a JavaScript y CSS creados para el proyecto. Primero, cargue el archivo JavaScript y CSS como recursos en el centro de ayuda. Luego, copie el código de su index.html
en la página personalizada y ajuste las rutas de archivo a los recursos.
Vea un ejemplo a continuación de cómo se ve esto en el editor de código.
Una vez que termine, publique su página personalizada. Si desea recursos adicionales sobre la administración de contenido en el centro de ayuda, consulte el artículo: Recursos de Guide.
Descargo de responsabilidad de la traducción: Este artículo ha sido traducido usando software de traducción automática para proporcionar una idea básica del contenido. Se han realizado esfuerzos razonables para proporcionar una traducción exacta, sin embargo, Zendesk no garantiza la exactitud de la traducción.
Si surge alguna pregunta relacionada con la exactitud de la información incluida en el artículo traducido, consulte la versión en inglés del artículo, que es la versión oficial.