Construye una plataforma de mensajería para clientes

Descripción general

Computer puede configurar una plataforma completa de mensajería para clientes de una sola vez: un widget de chat integrable para tu sitio web y una bandeja de entrada de agentes desde la cual tu equipo puede trabajar de inmediato. Conecta hilos en tiempo real, respuestas predefinidas, flujos básicos de bots y estados de conversación, y almacena todo localmente para que puedas hacer demostraciones e iterar sin necesidad de configurar un backend.

Resultado clave

Computer entregó una aplicación de mensajería totalmente funcional al estilo "Breeze" con dos vistas principales: una vista previa del widget de chat y un panel de la bandeja de entrada de agentes, ambos ejecutándose en la misma página. La vista del widget muestra un botón flotante y animado en la esquina inferior derecha que abre una ventana de chat con un formulario previo al chat (nombre y correo electrónico), mensaje de bienvenida, burbujas de usuario y agente con marcas de tiempo, indicadores de escritura y un selector de emojis. Cuando ningún agente está disponible, un flujo de bot simple saluda al usuario, recopila su correo electrónico y confirma el seguimiento.

La vista de la bandeja de entrada del agente utiliza un diseño de tres paneles: una lista de conversaciones a la izquierda con insignias de no leído, filtros de estado (Todos, Abiertos, Pospuestos, Cerrados) y búsqueda; un panel central con el hilo completo de mensajes y marcas de tiempo; y un panel derecho con detalles del usuario y notas. Las respuestas predefinidas aparecen cuando un agente escribe /, ofreciendo plantillas de respuesta rápida para saludos, cierres, seguimiento y resolución. El estado de la conversación se puede actualizar por hilo, y los mensajes se sincronizan entre las vistas del widget y de la bandeja de entrada a través de un sistema de eventos en memoria, con todas las conversaciones almacenadas en el almacenamiento del navegador para su persistencia. Un interruptor de modo oscuro lo complementa para que los equipos de soporte puedan hacer demostraciones o usarlo cómodamente durante todo el día.

Ampliar

Ampliar

Consejos

• Clarifica tu modelo de integración – Agrega orientaciones como: "Optimiza el marcado y el script del widget para que pueda insertarse en cualquier sitio mediante una sola etiqueta de script y un mínimo de anulaciones de CSS".
• Limita las respuestas predefinidas – Especifica el tono y las categorías, por ejemplo: "Incluye las plantillas /greeting, /troubleshoot y /handoff, todas redactadas en un tono amigable pero conciso".
• Vincula los estados a los SLA – Indica a Computer cómo debe comportarse el estado, por ejemplo: "Mueve automáticamente los hilos de Pospuesto a Abierto cuando el cliente responda, y destaca cualquier conversación Abierta sin respuesta de un agente después de 5 minutos".