zendesk-app-location-sidebar-ticket
eesel Team
Last edited 2 marzo 2026
{
"title": "Cómo crear una aplicación de barra lateral de tickets de Zendesk: Una guía completa para desarrolladores",
"slug": "zendesk-app-location-sidebar-ticket",
"locale": "es",
"date": "2026-03-02",
"updated": "2026-03-02",
"template": "default",
"excerpt": "Una guía paso a paso para desarrolladores sobre cómo crear aplicaciones para la barra lateral de tickets de Zendesk, desde la configuración del manifiesto hasta el trabajo con datos de tickets a través del Zendesk Apps Framework.",
"categories": [
"Guides",
"Zendesk"
],
"tags": [
"Zendesk",
"App Development",
"Ticket Sidebar",
"ZAF",
"Developer Guide"
],
"readTime": 8,
"author": 16,
"reviewer": 14,
"seo": {
"title": "Cómo crear una aplicación de barra lateral de tickets de Zendesk: Una guía completa para desarrolladores",
"description": "Una guía paso a paso para desarrolladores sobre cómo crear aplicaciones para la barra lateral de tickets de Zendesk, desde la configuración del manifiesto hasta el trabajo con datos de tickets a través del Zendesk Apps Framework.",
"image": "https://wmeojibgfvjvinftolho.supabase.co/storage/v1/object/public/public_assets/blog-gen/banner-23678d8a-12b3-4be7-b973-433f05e21354"
},
"coverImage": "https://wmeojibgfvjvinftolho.supabase.co/storage/v1/object/public/public_assets/blog-gen/banner-23678d8a-12b3-4be7-b973-433f05e21354",
"coverImageAlt": "Imagen del banner para Cómo crear una aplicación de barra lateral de tickets de Zendesk: Una guía completa para desarrolladores",
"coverImageWidth": 1920,
"coverImageHeight": 1080,
"faqs": {
"heading": "Preguntas Frecuentes",
"type": "blog",
"answerType": "html",
"faqs": [
{
"question": "¿Cuál es la diferencia entre ticket_sidebar y new_ticket_sidebar en una ubicación de aplicación de Zendesk?",
"answer": "La ubicación ticket_sidebar muestra su aplicación cuando se visualizan tickets existentes, mientras que new_ticket_sidebar aparece cuando los agentes están creando nuevos tickets antes de enviarlos. Una vez que se crea un ticket, se mueve a la barra lateral de tickets estándar. Puede configurar ambas ubicaciones en su manifiesto si su aplicación necesita funcionar durante la creación del ticket y después."
},
{
"question": "¿Puedo usar la ubicación de la barra lateral de tickets de la aplicación de Zendesk para aplicaciones que necesitan modificar los datos de los tickets?",
"answer": "Sí, la ubicación de la barra lateral de tickets admite tanto la lectura como la escritura de datos de tickets. Puede utilizar los métodos del cliente ZAF para actualizar las propiedades de los tickets, añadir comentarios o modificar los campos personalizados. Sin embargo, tenga cuidado con los permisos. Su aplicación sólo puede realizar las acciones que el agente autenticado tenga permiso para realizar."
},
{
"question": "¿Cómo manejo los diferentes anchos de la barra lateral al crear una aplicación de barra lateral de tickets de Zendesk?",
"answer": "Establezca flexible: true en su manifest.json para habilitar el cambio de tamaño responsivo. A continuación, utilice consultas de medios CSS o un framework responsivo como Tailwind CSS para adaptar su diseño. Diseñe para un ancho mínimo de 200px y escale gradualmente. Considere qué información es esencial en anchos estrechos frente a lo que puede revelar cuando los agentes expanden la barra lateral."
},
{
"question": "¿Qué APIs están disponibles específicamente para la ubicación de la barra lateral de tickets de Zendesk?",
"answer": "La barra lateral de tickets proporciona acceso al objeto Ticket (estado, prioridad, campos personalizados), objetos User (solicitante, usuario actual), objetos Comment, datos de Brand e información de Organization. También puede suscribirse a eventos en tiempo real como ticket.status.changed para responder a las actualizaciones a medida que ocurren."
},
{
"question": "¿Necesito permisos especiales para instalar una aplicación personalizada de barra lateral de tickets de Zendesk?",
"answer": "Para cargar e instalar aplicaciones privadas, necesita acceso de administrador a su instancia de Zendesk. Para el desarrollo y las pruebas con ZCLI, sólo necesita una cuenta de Zendesk con los niveles de plan apropiados (Suite Growth+ o Support Professional+). Si planea publicar en el Zendesk Marketplace, su aplicación pasa por un proceso de revisión."
},
{
"question": "¿Puedo crear una aplicación de barra lateral de tickets de Zendesk que se integre con sistemas externos como plataformas CRM o de comercio electrónico?",
"answer": "Absolutamente. Este es uno de los casos de uso más comunes para las aplicaciones de la barra lateral. Puede realizar llamadas API a servicios externos desde el iframe de su aplicación, mostrar los datos en la barra lateral e incluso permitir que los agentes realicen acciones en esos sistemas sin salir de Zendesk. Sólo asegúrese de manejar la autenticación de forma segura y de incorporar el manejo de errores para cuando las APIs externas no estén disponibles."
}
],
"supportLink": null
}
}
---
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:
```bash
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.
Compartir esta entrada
Article by
