Aplicaciones del panel: incrustación de portales web en iFrames contextuales del chat

Las Aplicaciones del panel (Aplicaciones del panel) de Waclis Inbox permiten incrustar portales web externos, sistemas administrativos o ERPs directamente dentro de la conversación mediante un marco web seguro. Al abrir un chat, la aplicación aparece como una pestaña junto a Mensajes y recibe automáticamente vía mensajería del navegador el evento appContext con los datos de conversation, contact y agente actual.

Qué puedes hacer

Registrar aplicaciones web en Ajustes > Integraciones > Aplicaciones del panel > Configurar > + Añadir una nueva aplicación.
Mostrar cada herramienta como una pestaña junto a Mensajes dentro de la conversación, sin que el agente cambie de navegador.
Recibir contexto automático en vivo mediante mensajería del navegador con el evento appContext (conversation, contact y agente actual).
Solicitar contexto bajo demanda enviando 'waclis-dashboard-app:fetch-info' desde el marco web hacia la ventana padre.
Consultar y operar sistemas externos (pedidos de e-commerce, comprobantes fiscales, reservas o un ERP propio) filtrados automáticamente por el cliente activo.

Cuándo conviene usarla

Consulta de pedidos y envíos: Cuando el agente necesita revisar compras, seguimiento logístico o devoluciones del contacto con el que chatea.
Facturación y cuenta corriente: Para visualizar comprobantes, saldos o links de pago asociados al email o teléfono del cliente.
Backoffice o ERP propio: Cuando tu empresa tiene un sistema web interno y quieres abrirlo en una pestaña del chat ya posicionado en la ficha del cliente.
Cotizadores o diagnósticos técnicos: Para operar calculadoras comerciales o herramientas de soporte sin salir de Waclis Inbox.

Disponibilidad por plan

Plan Estándar: Incluye acceso completo a Aplicaciones del panel, pestañas múltiples y envío del evento appContext.
Plan Premium: Permite combinar Aplicaciones del panel con automatizaciones avanzadas y tableros comerciales.
Plan Evolución: Integra Aplicaciones del panel en operaciones corporativas junto a Servidores MCP, SLA y políticas de capacidad.

Requisitos previos

Rol de Administrador en Waclis Inbox para configurar Ajustes > Integraciones > Aplicaciones del panel.
Una página web servida bajo protocolo HTTPS (URL del endpoint).
Cabeceras HTTP en tu servidor web que permitan ser embebido en un marco web (Content-Security-Policy: frame-ancestors y sin bloqueo X-Frame-Options: DENY).

Cómo funciona en Waclis Inbox paso a paso

Parte 1: Añadir la aplicación en Ajustes > Integraciones

En el menú lateral izquierdo, ve a Ajustes > Integraciones.
En la tarjeta Aplicaciones del panel, haz clic en Configurar.
Pulsa + Añadir una nueva aplicación arriba a la derecha.
Completa los campos del modal:

Nombre de la aplicación: Título que verán los agentes en la pestaña del chat (Pedidos Tienda o ERP Clientes).
URL del endpoint: Dirección https:// de la aplicación web que se cargará en el marco web.

Haz clic en Crear.

Parte 2: Recibir `appContext` y usar la pestaña en la conversación

En el JavaScript de tu página web, escucha window.addEventListener('message', ...) y valida que el JSON recibido tenga event === 'appContext'.
Lee de data los objetos contact (nombre, email, teléfono, custom_attributes), conversation (ID, estado, etiquetas, mensajes) y agente actual (datos del agente activo).
En Waclis Inbox, abre cualquier conversación y haz clic en la pestaña con el Nombre de la aplicación ubicada junto a Mensajes para operar tu portal en contexto.

Opciones y configuraciones disponibles

Parámetros del módulo y estructura del mensaje postMessage:

Parámetro / Objeto	Ubicación	Descripción técnica
Nombre de la aplicación	Ajustes > Integraciones > Aplicaciones del panel	Texto de la pestaña superior junto a Mensajes.
URL del endpoint	Ajustes > Integraciones > Aplicaciones del panel	Endpoint `https://` renderizado dentro del marco web.
Evento `appContext`	mensajería del navegador	Evento JSON enviado al abrir la pestaña o cambiar de chat.
Objeto `data.contact`	Dentro de `appContext`	Datos del cliente: `id`, `name`, `email`, `phone_number` y `custom_attributes`.
Objeto `data.conversation`	Dentro de `appContext`	Datos del hilo: `id`, `inbox_id`, `status`, `labels` y mensajes.
Objeto `data.currentAgent`	Dentro de `appContext`	Identidad del operador: `id`, `name` y `email`.

Alternativas y cuándo elegir cada una

Herramienta	Presentación visual	Cuándo elegirla
Aplicaciones del panel	Interfaz web interactiva en una pestaña junto a Mensajes.	Cuando el agente debe ver tablas o ejecutar acciones en un portal externo.
Atributos personalizados	Campos clave-valor en la barra lateral derecha.	Cuando basta con mostrar 3 o 4 datos simples (`DNI`, `Plan`, `ID ERP`).
API REST + Notas privadas	Mensaje interno amarillo en la línea de tiempo del chat.	Para dejar constancia textual de un evento sin interfaz gráfica.

Cómo se combina con otras funciones

Atributos personalizados: Si guardas id_cliente en los atributos del contacto, tu Aplicación del panel lo lee desde data.contact.custom_attributes al recibir appContext y abre la ficha exacta.
API REST Universal: Cuando el agente ejecuta una acción dentro del marco web, tu backend puede llamar a la API REST para etiquetar el chat o agregar una nota privada.
Navegación por pestañas: El agente alterna entre Mensajes y la aplicación web sin perder el borrador que escribe.

Relación con otros productos Waclis

En Waclis Inbox (Nativo): El contenedor de Aplicaciones del panel y la emisión de appContext son nativos de Inbox.
Con el ecosistema Waclis (WaclisPOS, Waclis Factur, WaclisCAL y sistemas externos): Waclis Inbox no incluye widgets nativos preinstalados de facturación o agenda, pero el contenedor de Aplicaciones del panel permite incrustar de forma opcional cualquier vista web HTTPS (de tu ERP, backoffice o herramientas del ecosistema) para consultarla en una pestaña junto a los mensajes.
Con panel.waclis.com: Las cuentas, suscripciones y permisos organizacionales se gestionan en panel.waclis.com.

Buenas prácticas

Importante: Habilita frame-ancestors en tu servidor web: Si tu aplicación responde con X-Frame-Options: DENY o SAMEORIGIN, el navegador bloqueará la pestaña. Configura Content-Security-Policy: frame-ancestors autorizando el dominio de Waclis Inbox.

Consejo: Solicita el contexto al iniciar tu script: Ejecuta window.parent.postMessage('waclis-dashboard-app:fetch-info', '*') apenas cargue tu página para recibir appContext de inmediato.

Errores frecuentes y solución de problemas

Síntoma	Causa raíz	Solución
La pestaña se ve en blanco o rechaza la conexión	El servidor externo envía `X-Frame-Options: DENY` o `SAMEORIGIN`.	Permite la incrustación con `Content-Security-Policy: frame-ancestors`.
Bloqueo por contenido mixto (Mixed Content)	La URL del endpoint usa `http://` en vez de `https://`.	Cambia la URL a `https://` en Ajustes > Integraciones > Aplicaciones del panel.
Carga la página pero sin los datos del cliente	El marco web cargó después del envío inicial de `appContext`.	Envía `window.parent.postMessage('waclis-dashboard-app:fetch-info', '*')` al montar tu app.
No aparece el botón Configurar	El usuario tiene rol de Agente.	Ingresa con rol de Administrador.

Preguntas frecuentes

¿Cuántas Aplicaciones del panel puedo registrar?

Puedes añadir múltiples aplicaciones en Ajustes > Integraciones > Aplicaciones del panel; cada una suma su propia pestaña junto a Mensajes.

¿Qué datos del cliente viajan en `data.contact`?

Viajan el id, name, email, phone_number, identifier, additional_attributes y todos los custom_attributes del contacto.

¿Cómo fuerzo el reenvío de `appContext` si el usuario navega dentro del iFrame?

Invoca window.parent.postMessage('waclis-dashboard-app:fetch-info', '*') y Waclis Inbox te reenviará el objeto appContext actual.

¿El cliente final ve las pestañas de las Aplicaciones del panel?

No. Son pestañas internas exclusivas para la consola de agentes y administradores de Waclis Inbox.

¿Necesitas más ayuda?

Si este artículo no resolvió tu consulta, nuestro equipo puede ayudarte personalmente.

Soporte por WhatsApp