Este artículo le ayudará a integrar una funcionalidad personalizada y única en su centro de ayuda Zendesk. Le guiará a través del proceso para agregar páginas personalizadas a su plan Knowledge Enterprise y le explicará cómo puede 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 coincida perfectamente con el diseño de su centro de ayuda existente, lo que proporciona una experiencia de usuario cohesiva y personalizada.
Este ejemplo de aplicación de una sola página usa React with TypeScript para el frontend y Node.js para el backend. Tailwind CSS aplica estilo a la aplicación, y Nodemailer administra las confirmaciones por correo electrónico para los nuevos usuarios que se registran correctamente.
Puesto que se trabaja con una aplicación React, el ejemplo describe los pasos del Webpack para compilarlo en un solo archivo. El archivo se incrusta en el tema del centro de ayuda y se carga. Siga las secciones a continuación para cada conjunto de pasos:
- Paso 1: Desarrolle la página personalizada usando React con TypeScript y Node.js
- Paso 2: Configurar Webpack para agrupar la página personalizada
- Paso 3: Incruste e integre el proyecto en su tema y publíquelo en el centro de ayuda
Si no desea integrarse con un backend o usar TypeScript, dele una mirada a la boilerplate para iniciar su propia aplicación de una sola página.
Paso 1: Desarrolle la página personalizada usando React con TypeScript y Node.js
Las páginas personalizadas permiten desarrollar usando cualquier pila de tecnología web preferida. Muchos desarrolladores prefieren React.js con Node.js para el desarrollo de backend. Cada tecnología tiene sus propios matices y especificaciones. Considere los siguientes puntos técnicos:
Reaccionar
Use Crear aplicación React para páginas personalizadas ya que este framework admite aplicaciones de una sola página. La página de registro de soporte VIP de arriba hace dos solicitudes: una solicitud genera un token seguro para la autenticación del backend y la otra 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 del frontend antes de enviar la solicitud. La validación del backend juega un papel crucial, pero la validación del 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 cualquier funcionalidad, marca o estilo coincida con el centro de ayuda en su conjunto.
Considere estos aspectos de diseño:
-
Autenticación: Especifique quién tiene acceso a esta página: agentes, todos los usuarios autenticados o todos los usuarios.
-
Navegación:
-
Evite crear un encabezado o una navegación en su página personalizada. El equipo de Conocimiento de su cuenta establece estas funciones. La página personalizada hereda el encabezado y la navegación del tema actual.
-
Coloque esta página correctamente dentro del centro de ayuda. Al igual que la funcionalidad, la página personalizada existe fuera del esquema predeterminado del centro de ayuda. Reach estas páginas a través de vínculos en cualquier plantilla del centro de ayuda o páginas predefinidas como la página principal. Los URL de página personalizados se ven así:
https://{domain_name}/hc[/{locale}]/p/{page_name}
-
-
Estilo de página: Seleccione bibliotecas de estilos que se ajusten al 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: Puesto que la página personalizada se configura y agrupa manualmente, el almacenamiento local de imágenes o recursos no funciona. Cárguelos en el tema de su centro de ayuda antes de incrustarlos. Si desea instrucciones paso a paso, consulte el artículo: Uso de sus propios recursos de temas para centro de ayuda.
Nodo.js
Las páginas personalizadas ofrecen un lienzo en blanco para crear una experiencia personalizada para los visitantes. Con herramientas como Node.js y Express, puede conectarse directamente a sistemas y bases de datos existentes. También puede crear nuevos servicios con su pila de tecnología preferida e integrarlos con su centro de ayuda para ofrecer una experiencia de usuario impecable.
La aplicación de ejemplo utiliza las funciones a continuación.
-
Los desarrolladores crearon una API Express que recibe la información del usuario y la organización enviada por el formulario frontend.
-
La aplicación envía solicitudes de API a Zendesk Support para crear y actualizar el usuario y la organización pertinentes usando la obtención de nodos.
-
Valida los datos de envío del formulario usando validator.js.
-
La aplicación envía una notificación por correo electrónico de confirmación al usuario cuando el formulario se envía correctamente usando Nodemailer.
Proteja los desvíos de API cuidadosamente cuando cree servicios de páginas personalizadas del lado del servidor. Utilice herramientas como JWT para proteger su aplicación creando 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 utiliza la autenticación que se describe a continuación.
-
Los desarrolladores crearon un extremo de autenticación que el frontend usa para solicitar un token de JWT y autorizar solicitudes a la API de envío de formularios.
-
Los módulos de autenticación generan y verifican tokens JWT usando jsonwebtoken.
Dependiendo de la aplicación que cree, considere su política de CORS (Compartir recursos de origen cruzado). Asegúrese de que las rutas que reciben solicitudes del lado del cliente tengan activado el CORS. Si conoce los dominios que envían las solicitudes, especifique estos dominios explícitamente. De lo contrario, configure el * comodín. Si desea más información sobre CORS, consulte este artículo del sitio web de Mozilla: Cross-Origin Resource Sharing (CORS).
Paso 3: Configurar Webpack para agrupar la página personalizada
Una vez completado el desarrollo de la página personalizada, combine la aplicación React con el Webpack. Debido a que el tema necesita incrustar todas las páginas personalizadas, compile la página personalizada en un solo archivo HTML. La aplicación Create React incluye su propio agrupamiento y optimización. Sin embargo, como su objetivo es devolver un solo archivo index.html, el ejemplo usa su propia configuración de webpack para simplificar este proceso.
Paso 4: Incruste e integre el proyecto en su tema y publíquelo en el centro de ayuda
Después de crear la aplicación, incruste la aplicación en el centro de ayuda. Vaya al directorio de compilación recién creado. Encontrará algunos archivos necesarios para crear la nueva página personalizada.
index.htmlstatic/css/bundle.min.cssstatic/bundle.min.js
El archivo index.html contiene el código que se ha introducido en la página personalizada. Acceda a JavaScript y CSS creados para el proyecto. Primero, cargue los archivos JavaScript y CSS como recursos en el centro de ayuda. Luego, copie el código del archivo index.html en la página personalizada y ajuste las rutas del archivo para que apunten a los recursos.
Vea un ejemplo a continuación de cómo se ve esto en el editor de código.
Cuando termine, publique su página personalizada. Si desea recursos adicionales sobre cómo administrar el contenido en su centro de ayuda, consulte el artículo: Recursos de conocimiento.
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.