Configurar y utilizar el Panel de Aplicaciones en Waclis

El Panel de Aplicaciones en Waclis te permite integrar aplicaciones personalizadas dentro de la interfaz de conversación, proporcionando a los agentes acceso directo a información relevante como datos del cliente, historial de pedidos o pagos, entre otros. Las aplicaciones pueden obtener contexto directamente desde Waclis para interactuar con los datos de la conversación y el contacto.

En este tutorial, aprenderás cómo configurar una aplicación de panel de control, recibir datos desde Waclis en tu aplicación y realizar solicitudes de datos bajo demanda.

Cómo crear una aplicación

1. Configurar la aplicación en Waclis

Dirígete a Ajustes > Integraciones > Panel de Aplicaciones.
Haz clic en el botón Configurar correspondiente a las aplicaciones del panel.

2. Agregar los detalles de la aplicación

Introduce el nombre de la aplicación y la URL en la que está alojada tu aplicación personalizada.
Haz clic en Crear para guardar la configuración.

3. Ver la aplicación en la conversación

Una vez creada, aparecerá una nueva pestaña en la ventana de conversación con el nombre que le diste a la aplicación (por ejemplo, "Pedidos de clientes").
Al hacer clic en esta pestaña, la aplicación cargará la información configurada, obteniendo datos relevantes directamente desde Waclis.

Recibir datos de Waclis en tu aplicación

Waclis entrega información del contexto de la conversación y el contacto mediante eventos de ventana. Para recibir estos datos, implementa un detector para el evento en tu página.

Ejemplo de código:

javascriptCopiar códigowindow.addEventListener("message", function (event) {
  if (!isJSONValid(event.data)) {
    return;
  }

  const eventData = JSON.parse(event.data);
  console.log(eventData); // Aquí puedes acceder a los datos del contexto
});

Solicitar datos bajo demanda desde Waclis

Si necesitas datos adicionales sobre la conversación o el contacto, puedes usar la API postMessage de JavaScript para enviar una solicitud a Waclis.

Ejemplo de código:

javascriptCopiar códigowindow.parent.postMessage('waclis-dashboard-app:fetch-info', '*');

// Respuesta esperada
window.addEventListener("message", function (event) {
  if (event.data.event === 'appContext') {
    const appContext = event.data.data;
    console.log(appContext); // Aquí se recibe la carga útil
  }
});

Carga útil del evento

Estructura de los datos recibidos

La respuesta de Waclis incluye tres objetos principales:

Objeto de conversación:
- Contiene información sobre la conversación actual, como etiquetas, estado, mensajes y atributos personalizados.
Objeto de contacto:
- Proporciona detalles sobre el cliente, incluyendo nombre, correo, teléfono, atributos personalizados y actividad reciente.
Objeto del agente actual:
- Incluye información del agente que está gestionando la conversación, como nombre, correo electrónico e ID.

Estructura de carga útil:

javascriptCopiar código{
  "event": "appContext",
  "data": {
    "conversation": {
      // <...Atributos de la conversación>
    },
    "contact": {
      // <...Atributos del contacto>
    },
    "currentAgent": {
      // <...Atributos del agente actual>
    }
  }
}

Ejemplo práctico de integración

1. Gestión de pedidos y seguimiento de compras

Uso: Integrar una aplicación que conecte con el sistema de gestión de pedidos (ERP o plataforma de ecommerce).
Objetivo:

Permitir que los agentes visualicen el historial de compras del cliente directamente desde la conversación.
Consultar el estado actual de un pedido (en proceso, enviado, entregado).
Proporcionar un enlace rápido para modificar o cancelar pedidos según las políticas del negocio.

Ejemplo práctico: Un ecommerce integra su sistema de pedidos para que los agentes puedan acceder a datos como:

Fecha del pedido.
Número de seguimiento.
Método de envío.
Detalles de los productos comprados.

Esto agiliza las respuestas a consultas sobre envíos y devoluciones, mejorando la satisfacción del cliente.

2. Gestión de soporte técnico con tickets

Uso: Integrar una herramienta de gestión de tickets (como Jira, Zendesk o Freshdesk) para asociar los casos de soporte directamente a las conversaciones de Waclis.
Objetivo:

Crear un ticket automáticamente desde una conversación en Waclis.
Actualizar el estado del ticket (abierto, en proceso, resuelto).
Visualizar los detalles del ticket y las acciones recientes tomadas por otros agentes.

Ejemplo práctico: Una empresa de SaaS utiliza esta integración para que cada conversación genere un ticket en su herramienta de soporte. Los agentes pueden ver si el caso ya fue atendido anteriormente o si necesita escalarse a un equipo técnico, optimizando la gestión de problemas recurrentes.

3. Consulta de historial de pagos y facturación

Uso: Conectar una aplicación de facturación o contabilidad (como QuickBooks, Stripe o Zoho Books) para mostrar el historial de pagos y facturas asociadas a un cliente.
Objetivo:

Acceder al historial de facturación, incluyendo facturas pendientes y pagos realizados.
Facilitar el envío de facturas o recibos directamente al cliente.
Detectar problemas relacionados con facturas impagas o discrepancias en los montos.

Ejemplo práctico: Un proveedor de servicios recurrentes integra su sistema de facturación para que los agentes puedan identificar rápidamente facturas vencidas, enviar recordatorios de pago o confirmar el estado de una suscripción.

Ventajas del Panel de Aplicaciones

Personalización: Las aplicaciones pueden ser diseñadas para adaptarse a las necesidades específicas de tu negocio.
Contexto en tiempo real: Proporciona a los agentes datos precisos y actualizados para tomar decisiones más rápidas.
Fácil integración: Compatible con cualquier tecnología que soporte eventos de ventana y comunicación mediante API.