Cómo crear una aplicación de barra lateral de tickets de Zendesk: Una guía completa para desarrolladores
Stevia Putri
Última edición March 2, 2026
Imagine a un agente de soporte trabajando en un ticket complejo. Necesitan verificar el historial de pedidos del cliente, buscar su registro de CRM y buscar en la base de conocimientos. Sin salir de Zendesk. Eso es exactamente lo que hace una aplicación de barra lateral de tickets. Lleva datos y herramientas externas directamente al espacio de trabajo del agente, ahorrando tiempo y reduciendo el cambio de contexto.
La barra lateral de tickets es una de las ubicaciones más poderosas para las aplicaciones de Zendesk. Se encuentra en la bandeja de aplicaciones en el lado derecho de cada ticket, lo que brinda a los agentes acceso instantáneo a información contextual. Ya sea que esté creando una integración para su equipo o planeando publicar en el Zendesk Marketplace, esta guía lo guiará a través de la creación de una aplicación de barra lateral de tickets desde cero.
Lo que necesitará
Antes de comenzar a construir, asegúrese de tener listos estos requisitos previos:
- Una cuenta de Zendesk con el plan Suite Growth o superior, o el plan Support Professional o superior. Puede obtener una cuenta de prueba gratuita para el desarrollo si es necesario.
- Node.js 14.17.3 o posterior instalado en su máquina
- La interfaz de línea de comandos de Zendesk (ZCLI) para construir y probar aplicaciones localmente
- Un navegador web que permita contenido mixto HTTP y HTTPS, como Chrome o Firefox. Safari no funcionará para el desarrollo local porque no admite contenido mixto.
- Familiaridad básica con HTML, CSS y JavaScript
Paso 1: Configure su entorno de desarrollo
Primero, deberá instalar ZCLI y crear la estructura de su aplicación. ZCLI es la herramienta de línea de comandos oficial de Zendesk que se encarga de todo, desde la creación de nuevas aplicaciones hasta el empaquetado para su implementación.
Para instalar ZCLI globalmente, ejecute:
npm install -g @zendesk/zcli
Una vez instalado, cree una nueva aplicación ejecutando:
zcli apps:new
Se le solicitarán algunos detalles:
- Nombre del directorio: Esto crea la carpeta para los archivos de su aplicación
- Nombre y correo electrónico del autor: Para el manifiesto de la aplicación
- Nombre de la aplicación: El nombre para mostrar de su aplicación
ZCLI genera una plantilla de inicio con los archivos esenciales:
manifest.json: Define la configuración de su aplicación, incluida la ubicaciónassets/iframe.html: El contenido HTML que se muestra en la barra lateralassets/logo.png: El icono de su aplicacióntranslations/en.json: Para la internacionalización
Paso 2: Configure la ubicación de la barra lateral de tickets
El corazón de la configuración de su aplicación reside en manifest.json. Este archivo le dice a Zendesk dónde debe aparecer su aplicación y qué contenido cargar.
Para una aplicación de barra lateral de tickets, su manifiesto necesita una propiedad location que especifique la clave ticket_sidebar:
{
"name": "Mi aplicación de barra lateral",
"author": {
"name": "Su nombre",
"email": "you@example.com"
},
"defaultLocale": "en",
"private": true,
"location": {
"support": {
"ticket_sidebar": {
"url": "assets/iframe.html",
"flexible": true
}
}
},
"version": "1.0.0"
}
Analicemos las propiedades clave:
url: Apunta al archivo HTML que se carga en el iframe de la barra lateral. Aquí es donde vive la interfaz de usuario de su aplicación.flexible: Controla si el iframe cambia de tamaño con la bandeja de aplicaciones. Establezca entruepara un comportamiento receptivo, ofalsepara bloquear el ancho en 320px.
También hay una ubicación new_ticket_sidebar para las aplicaciones que deben aparecer cuando los agentes están creando nuevos tickets, antes de que se envíen. Una vez que se crea un ticket, se mueve a la ubicación estándar ticket_sidebar.
Paso 3: Acceda a los datos de los tickets con las APIs de ZAF
Ahora viene la parte interesante: hacer que su aplicación realmente haga algo. El Zendesk Apps Framework (ZAF) proporciona un SDK de JavaScript que permite que su aplicación interactúe con los datos de los tickets, la información del usuario y la interfaz de Zendesk.
Primero, incluya el SDK de ZAF en su iframe.html:
<script src="https://static.zdassets.com/zendesk_app_framework_sdk/2.0/zaf_sdk.min.js"></script>
Luego inicialice el cliente y comience a obtener datos:
var client = ZAFClient.init();
// Obtenga el asunto y el estado del ticket actual
client.get('ticket.subject').then(function(data) {
console.log('Asunto del ticket:', data['ticket.subject']);
});
// Obtenga varias propiedades a la vez
client.get(['ticket.subject', 'ticket.status', 'ticket.priority']).then(function(data) {
console.log('Información del ticket:', data);
});
La ubicación de la barra lateral de tickets le da acceso a objetos de datos enriquecidos:
- Objeto Ticket: estado, prioridad, asunto, descripción, campos personalizados, etiquetas
- Objetos User: detalles del solicitante, usuario actual, colaboradores
- Objetos Comment: comentarios y archivos adjuntos del ticket
- Datos de marca y organización: contexto sobre la cuenta
También puede escuchar los cambios en tiempo real. Si un agente actualiza el estado del ticket o el asignado, su aplicación puede responder de inmediato:
client.on('ticket.status.changed', function() {
console.log('Se actualizó el estado del ticket');
// Actualice los datos o la interfaz de usuario de su aplicación
});
Paso 4: Diseñe para diseños receptivos
Aquí hay algo que muchos desarrolladores pasan por alto: el ancho de la barra lateral de tickets ya no es fijo. Con el Espacio de trabajo del agente, los agentes pueden cambiar el tamaño de la bandeja de aplicaciones desde 200px hasta un ancho esencialmente ilimitado. Su aplicación necesita manejar esto con elegancia.
Si establece flexible: true en su manifiesto, el iframe cambia de tamaño automáticamente. Pero su CSS también necesita responder. Considere usar un framework receptivo como Tailwind CSS, o escriba consultas de medios que adapten su diseño:
/* Estilos predeterminados para la barra lateral estrecha */
.app-container {
padding: 12px;
font-size: 14px;
}
/* Barra lateral más ancha: muestra más detalles */
@media (min-width: 400px) {
.app-container {
padding: 16px;
}
.detail-view {
display: block;
}
}
Piense en el enfoque del agente. Cuando la barra lateral es estrecha, probablemente se estén concentrando en la conversación. Muestre solo información esencial. Cuando expanden la bandeja, es probable que estén tratando de completar una tarea en su aplicación. Ahí es cuando puede revelar más funcionalidad.
Paso 5: Pruebe e implemente su aplicación
Con su aplicación construida, es hora de probarla localmente antes de implementarla. ZCLI incluye un servidor local que le permite ejecutar su aplicación en su entorno de Zendesk real.
Inicie el servidor de desarrollo:
zcli apps:server
Esto inicia un servidor web local para su aplicación. Para verlo en acción:
- Abra una ventana de navegador de incógnito o privada (esto evita problemas de almacenamiento en caché)
- Inicie sesión en Zendesk y abra cualquier ticket
- Agregue
?zcli_apps=truea la URL - Su aplicación aparece en la bandeja de aplicaciones
Realice cambios en su código, guarde y actualice la página para ver las actualizaciones al instante.
Cuando esté listo para implementar, empaquete su aplicación:
zcli apps:package
Esto crea un archivo ZIP que puede cargar directamente a su instancia de Zendesk para uso privado, o enviar al Zendesk Marketplace si desea compartirlo con otras organizaciones.
Casos de uso comunes para aplicaciones de barra lateral de tickets
Ahora que comprende la mecánica, ¿qué debe construir? Aquí hay algunos patrones que funcionan bien en la barra lateral de tickets:
- Búsquedas de datos de clientes: Extraiga el historial de pedidos de Shopify, los detalles de la cuenta de Salesforce o el estado de la suscripción de su sistema de facturación. Los agentes ven todo sin cambiar de pestaña.
- Flujos de trabajo multiplataforma: Cree incidencias de Jira, agregue tarjetas de Trello o registre errores en GitHub directamente desde un ticket. La aplicación rellena previamente los datos del ticket de Zendesk para ahorrar tiempo.
- Asistencia de conocimiento: Busque en su centro de ayuda, wiki interno o tickets anteriores para encontrar soluciones relevantes. Algunas aplicaciones utilizan IA para sugerir respuestas basadas en el contenido del ticket.
- Soporte impulsado por IA: Herramientas como eesel AI funcionan en la barra lateral para redactar respuestas, mostrar conocimiento relevante de múltiples fuentes y ayudar a los agentes a resolver tickets más rápido.
La clave es el contexto. Las mejores aplicaciones de barra lateral muestran automáticamente información relevante para el ticket específico y el cliente que está viendo el agente.
Consejos y mejores prácticas
Antes de terminar su aplicación, tenga en cuenta estas pautas:
- Manténgala ligera: Las aplicaciones de la barra lateral se cargan en cada ticket. Las bibliotecas pesadas de JavaScript o los activos grandes ralentizan la experiencia del agente.
- Maneje los errores con elegancia: Las APIs externas fallan. Las conexiones de red se caen. Incorpore el manejo de errores para que su aplicación falle silenciosamente en lugar de interrumpir el flujo de trabajo del agente.
- Use Zendesk Garden: El sistema de diseño de Zendesk proporciona componentes que coinciden con la interfaz nativa. Esto hace que su aplicación se sienta como parte de Zendesk, no como un elemento extraño.
- Proteja sus claves API: Nunca codifique las credenciales en su aplicación. Use la configuración segura de Zendesk o OAuth para la autenticación.
- Pruebe con datos reales: Una aplicación que funciona perfectamente con tickets de prueba puede tener problemas con caracteres inusuales, líneas de asunto largas o campos personalizados faltantes.
Comience a construir su aplicación de barra lateral de Zendesk hoy mismo
Ahora tiene todo lo que necesita para construir una aplicación de barra lateral de tickets. Desde la configuración de su entorno de desarrollo con ZCLI hasta la configuración del manifiesto, el acceso a los datos de los tickets a través de ZAF y el diseño para diseños receptivos, la base está en su lugar.
La barra lateral de tickets es una forma poderosa de extender las capacidades de Zendesk. Ya sea que esté resolviendo un flujo de trabajo específico para su equipo o construyendo algo para la comunidad de Zendesk en general, las aplicaciones en esta ubicación colocan la información y las acciones exactamente donde los agentes las necesitan.
Si está buscando agregar capacidades de IA a su configuración de Zendesk, eesel AI funciona como una aplicación de barra lateral que trae conocimiento de su centro de ayuda, tickets anteriores y documentación interna directamente al espacio de trabajo del agente. Es un buen ejemplo de lo que es posible cuando combina el Zendesk Apps Framework con las capacidades modernas de IA.
¿Listo para comenzar? Tome sus credenciales de Zendesk, instale ZCLI y construya algo que haga que el día de su equipo de soporte sea un poco más fácil.
Preguntas Frecuentes
Share this article
Article by
Stevia Putri
Stevia Putri is a marketing generalist at eesel AI, where she helps turn powerful AI tools into stories that resonate. She’s driven by curiosity, clarity, and the human side of technology.
