Este artículo le ayudará a resolver el desafío de integrar una funcionalidad única y personalizada en su centro de ayuda de Zendesk. Al guiarlo a través del proceso de agregar páginas personalizadas a su plan Guide Enterprise, explica cómo desarrollar, agrupar e incrustar páginas personalizadas usando tecnologías como React.js y Node.js. Por ejemplo, puede crear una página de registro de soporte VIP personalizada que se adapte perfectamente al diseño de su centro de ayuda existente, proporcionando una experiencia de usuario cohesiva y personalizada.
Este ejemplo de aplicación de una sola página usa React con TypeScript para el frontend y Node.js para el backend. Tailwind CSS diseña la aplicación, y Nodemailer maneja las confirmaciones por correo electrónico para los nuevos usuarios que se registran correctamente.
Como se trata de una aplicación de React, el ejemplo describe los pasos del Webpack para compilarlo en un solo archivo. Incruste el archivo en el tema del centro de ayuda y cárguelo. Siga las secciones a continuación para cada conjunto de pasos:
- Desarrollar: Cree la página personalizada usando React con TypeScript y Node.js.
- Paquete: Configurar Webpack para agrupar la página personalizada
- Incrustar: Integre el proyecto en su tema y publíquelo en el centro de ayuda
Desarrollar: Cree la página personalizada usando React con TypeScript y Node.js.
Las páginas personalizadas le permiten desarrollar usando cualquier pila de tecnología web preferida. Muchos prefieren usar React.js con Node.js para el desarrollo de backend. Cada tecnología tiene sus propios matices y especificaciones. Estas son algunas consideraciones técnicas:
React
Utilice Create React App para las páginas personalizadas, ya que es un framework de aplicación de una sola página. La página de registro de VIP Support anterior hace dos solicitudes. Uno genera un token seguro para la autenticación de backend. El otro envía datos reales.
La página personalizada de ejemplo cambia los perfiles de usuario y las organizaciones dentro de Zendesk. Si su página hace solicitudes similares, valide los datos de la interfaz antes de la solicitud. La validación de backend es esencial, pero la validación de frontend garantiza datos limpios, especialmente de las entradas de los usuarios.
Recuerde que una página personalizada es solo una parte del centro de ayuda. Asegúrese de que la funcionalidad, la marca o el estilo coincidan con el centro de ayuda en su conjunto.
Considere estos aspectos de diseño:
-
Autenticación: Determinar quién puede acceder a esta página: los agentes, todos los usuarios autenticados o todos los usuarios
-
Navegación:
-
No desarrolle un encabezado o navegación en su página personalizada. El equipo de Guide de su cuenta los establece. La página personalizada hereda el encabezado y la navegación del tema actual.
-
Coloque esta página en el lugar apropiado dentro del centro de ayuda. Al igual que la funcionalidad, la página personalizada existe fuera del esquema predeterminado del centro de ayuda. Los usuarios acceden a estas páginas a través de vínculos en cualquier plantilla del centro de ayuda o página predefinida como la página principal. Los URL de página personalizados siguen este formato:
https://{domain_name}/hc[/{locale}]/p/{page_name}
-
-
Estilo de página: Seleccione bibliotecas de estilos que se alineen con el tema del centro de ayuda. Asegúrese de que la fuente y la paleta de colores coincidan con el tema existente.
-
Manejo de imágenes: Como la página personalizada se configura y empaqueta manualmente, el almacenamiento local de imágenes o recursos no funcionará. Cárguelos en el tema del centro de ayuda antes de incrustarlos. Si desea una guía paso a paso, consulte el artículo: Uso de sus propios recursos de tema para el centro de ayuda.
Node.js
Las páginas personalizadas proporcionan un lienzo en blanco para crear una experiencia personalizada para los visitantes. Con herramientas como Node.js y Express, puede conectarse directamente a los sistemas y bases de datos existentes. También puede crear nuevos servicios con su pila de tecnología preferida, integrándolos con su centro de ayuda para una experiencia de usuario perfecta.
La aplicación de ejemplo usa las funciones a continuación.
-
Una API de Express desarrollada que recibe la información del usuario y la organización enviada por el formulario de interfaz.
-
Envíe solicitudes de API a Zendesk Support para crear y actualizar el usuario y la organización pertinentes con node-fetch.
-
Valide los datos de envío del formulario usando validator.js.
-
Enviar una notificación por correo electrónico de confirmación al usuario si el formulario se envió correctamente con Nodemailer.
Tenga en cuenta la seguridad y proteja sus rutas de API al crear servicios de página personalizados del lado del servidor. Utilice herramientas como JWT para proteger su aplicación mediante la creación de autenticación de solicitudes. Si desea más detalles sobre JWT, consulte este artículo del sitio web de JWT: Introducción al token web JSON.
La aplicación de ejemplo usa la autenticación a continuación.
-
Un extremo de autenticación para que la interfaz solicite un token JWT para autorizar solicitudes a la API de envío de formularios.
-
Módulos de autenticación que generan y verifican tokens JWT usando jsonwebtoken.
Dependiendo de la aplicación que cree, considere su política CORS (Cross-Origin Resource Sharing). Asegúrese de que las rutas que reciben solicitudes del lado del cliente tengan CORS activado. Si conoce los dominios que envían las solicitudes, especifíquelos explícitamente. De lo contrario, use 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: Configurar Webpack para agrupar la página personalizada
Una vez que complete el desarrollo de su página personalizada, empaquete su aplicación React usando Webpack. Dado que todas las páginas personalizadas deben estar incrustadas en el tema, compile la página personalizada en un solo archivo HTML. La aplicación Create React viene con su propio empaquetado y optimización. Sin embargo, dado que el objetivo es devolver un solo index.html archivo, el ejemplo tiene su propia configuración de webpack para simplificar este proceso.
Incrustar: Integre el proyecto en su tema y publíquelo en el centro de ayuda
Después de crear la aplicación, insértela en el centro de ayuda. Vaya al directorio de compilación recién creado. Aquí encontrará algunos archivos necesarios para crear la nueva página personalizada.
index.htmlstatic/css/bundle.min.cssstatic/bundle.min.js
El index.html file es el código que se coloca en la página personalizada. Acceda al 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 los archivos a los recursos.
Vea un ejemplo a continuación de cómo aparece esto en el editor de código.
Una vez que termine, publique su página personalizada. Si desea recursos adicionales sobre cómo administrar el 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.