Chat web
Crea widgets de chat web para tu sitio, obtén el código de inserción, mira los indicadores del canal y supervisa las conversaciones de IA.
Objetivo
Añade un widget de chat con IA a tu sitio web. Desde el módulo Web Chat creas y personalizas uno o varios widgets, copias el fragmento de inserción para tu sitio y asignas cada widget a un agente de IA. La cabecera de la página muestra la misma franja de indicadores que el resto de canales: quién te espera, cuántas conversaciones hay abiertas y cuánto margen deja tu plan. Las conversaciones de los visitantes se supervisan en el buzón compartido, donde puedes tomar el control de la IA, responder y cerrarlas.
Acceso
Sidebar -> Messaging -> Web Chat Rutas:
- /app/{tenant}/webchat (crear y gestionar widgets, obtener el código de inserción)
- /app/{tenant}/conversations?channel=web_chat (conversaciones de Web Chat en el buzón unificado)
- /app/{tenant}/conversations/{id} (una conversación concreta)
El botón View conversations en la página de Web Chat abre el buzón unificado filtrado a Web Chat, y el chip indicador Needs you lo abre ya filtrado a las conversaciones que esperan a un humano. La gestión de widgets vive en esta página; las conversaciones viven en el buzón compartido, no aquí.
Roles
- owner, admin, agent
- Eliminar una conversación está restringido a owner y admin.
- Relajar la política de mensajes salientes (Settings) está restringido a owner y admin.
Requisitos previos
- Al menos un agent activo con el canal Web Chat habilitado (se configura en el módulo Agents). Sin uno, el flujo de creación te pide configurarlo primero.
- Un email verificado. Un espacio de trabajo sin verificar no puede crear un widget.
- El cupo de widgets de chat web de tu plan. Los espacios nuevos incluyen un widget; para más se requiere un plan superior.
Indicadores del canal
La cabecera de la página de Web Chat muestra la misma franja de estadísticas que los demás módulos de canal:
| Chip | Qué muestra |
|---|---|
| Needs you | Conversaciones de Web Chat abiertas que esperan a un humano (escalaciones y marcas de atención). Se pone ámbar cuando es mayor que cero. Al hacer clic abre el buzón filtrado exactamente a esas conversaciones. |
| Conversations | Conversaciones de Web Chat abiertas. Al hacer clic abre el buzón filtrado a Web Chat. |
| widgets | Widgets activos, junto a "de N widgets en tu plan" (o "sin límite en tu plan"). Se pone ámbar cuando alcanzas el techo del plan. |
Notas:
- Los conteos salen de la misma fuente y los mismos filtros que las páginas del buzón a las que enlazan los chips, así que un chip y su destino no pueden contradecirse.
- La franja se oculta cuando tu plan no incluye Web Chat, y tampoco se pinta cuando los conteos no se pudieron cargar: nunca muestra ceros inventados.
- Una conversación de Web Chat sigue abierta hasta que la cierras en el buzón o el visitante inicia una conversación nueva, así que Conversations cuenta hilos abiertos, no el tráfico histórico.
Crear un widget
- En la página de Web Chat, haz clic en Create Widget (o en la tarjeta Create Your First Widget).
- Completa el modal de creación (Create Web Chat Widget). Un Live Preview en la parte superior refleja tus cambios a medida que escribes.
- Haz clic en Create Widget para guardar.
| Campo | Notas |
|---|---|
| Widget Name | Obligatorio. Nombre interno para identificar el widget; no se muestra a los visitantes. |
| AI Agent | Obligatorio. Debe ser un agent activo con el canal Web Chat habilitado. Elige un agente solo ("Agents (answer alone)") o un equipo ("Teams (can ask a specialist for help)"). |
| Language | Idioma del widget mostrado a los visitantes: English, Spanish, Portuguese, French o German. |
| Widget Title | Texto de cabecera que ven los visitantes. Predeterminado "Chat with us". |
| Welcome Message | Primer mensaje que aparece al abrir el chat. Predeterminado "How can we help you today?". |
| Primary Color | Color de acento, desde presets o un valor hex personalizado. Predeterminado #3b82f6. |
| Position | Bottom Right o Bottom Left. |
| Widget Theme | Light, Dark o Auto. Auto sigue la preferencia del sistema del visitante. |
| Chat button icon | Icono del botón flotante: Chat, Message, Support, Spark, Wave o Helios. |
| Animate chat button | Añade un rebote sutil para llamar la atención. Predeterminado activado. |
| Widget Avatar | Logo o avatar personalizado (PNG, JPG, SVG o WebP; máx. 2MB). Se muestra junto a las respuestas del agente. |
| Allowed Domains | Restringe el widget a dominios concretos. Acepta example.com, *.example.com y localhost:3000. Déjalo vacío para permitir cualquier sitio. |
| Collect visitor name | Pide el nombre al visitante antes de iniciar el chat. |
| Collect visitor email | Pide el email al visitante antes de iniciar el chat. |
| Show branding | Muestra "Powered by HeliosVision". Desactivarlo requiere el plan Growth, Business o Enterprise. |
| Offline Message | Mensaje opcional mostrado cuando los agentes no están disponibles. |
Notas:
- El modo Team solo está disponible cuando tu plan incluye Teams y el agente elegido es un coordinador con al menos un especialista aprobado. En otro caso el widget responde con un agente solo.
- Si el agente vinculado a un widget queda inactivo o pierde el canal Web Chat, el editor lo advierte y te pide elegir un agente activo antes de guardar.
- Las burbujas de mensaje llevan tu identidad, no la de la plataforma: el lado del agente muestra el Widget Avatar si subiste uno, si no la inicial del agente vinculado, y si no la inicial del título del widget. El lado del visitante muestra su inicial cuando se recogió su nombre, y si no una figura neutra. El Live Preview sigue las mismas reglas que el widget real.
Gestionar widgets
Cada widget aparece como una tarjeta con su nombre, el agente vinculado, una insignia Active / Inactive y una vista previa de su título, posición, color e idioma. Acciones de la tarjeta:
- Get Embed Code — abre los fragmentos de instalación (más abajo).
- Edit — reabre el mismo modal, titulado "Edit Widget".
- El menú de acciones (⋮) añade Delete Widget.
Cuando tienes más de un widget, aparecen sobre la cuadrícula un cuadro de búsqueda (Search) y un control de orden (Sort: Name A–Z, Name Z–A, Active first).
Eliminar un widget pide confirmación. Las conversaciones existentes se conservan, pero los nuevos visitantes ya no pueden iniciar chats con ese widget.

Obtener el código de inserción
Abre Get Embed Code en cualquier widget para copiar un fragmento de instalación. El modal ofrece tres caminos:
| Opción | Úsala cuando |
|---|---|
| Install with your AI coding agent | Construyes con Cursor, Claude Code, v0, Lovable o similar. Copia el prompt y pégalo en tu agente; él integra el widget en tu framework. |
| Basic Installation | Pegas el script en el HTML de tu sitio manualmente, justo antes de la etiqueta de cierre </body>. |
| With Visitor Identification | Igual que Basic, más campos opcionales para preidentificar visitantes (nombre, email y metadatos personalizados). |
Cada fragmento ya contiene el ID de tu widget y siempre apunta a la URL de producción, así que funciona desde cualquier sitio. Tras pegar el fragmento y desplegar, el botón flotante de chat aparece en tus páginas.
También puedes controlar el widget desde JavaScript:
window.HeliosChat.api.open()abre el chat.window.HeliosChat.api.close()cierra el chat.window.HeliosChat.api.sendMessage('Hi')envía un mensaje.
Límites de plan y marca
- El número de widgets que puedes crear depende de tu plan. El chip indicador widgets muestra tu uso actual frente al límite del plan, y alcanzar el límite abre un diálogo de mejora en lugar del formulario de creación.
- Quitar la marca "Powered by HeliosVision" requiere el plan Growth, Business o Enterprise. En otros planes el interruptor permanece activado.
Prólogo y aviso de IA
Dos ajustes opcionales del agente moldean cómo el widget abre una conversación. Ambos viven en el agente, no en el widget, así que aplican en todos los canales que el agente atiende:
- Prologue (Agents -> editar -> pestaña Prologue). Cuando el agente vinculado tiene un prólogo, el widget ejecuta primero esos pasos guionizados — hace las preguntas configuradas antes de que la IA responda libremente — y entrega las respuestas recogidas al agente como contexto. Un paso de opciones se muestra como lista numerada (el widget pinta texto plano, no botones), y el visitante puede responder con el número o con el texto de una opción. Un paso del prólogo también puede entregar la conversación directamente a tu equipo.
- Tell customers they are chatting with an AI (Agents -> editar -> AI Config). Desactivado por defecto. Al activarlo, la primera respuesta de una conversación abre diciendo que es un asistente de IA y ofrece traer a una persona, en el idioma del visitante (o con tu propia redacción); solo se repite tras un día de silencio. Con o sin este ajuste, si un visitante pregunta directamente si habla con una persona, el agente siempre responde con honestidad — eso no se puede desactivar.
Política de mensajes salientes
Cada respuesta autónoma de la IA pasa un control de política de salida antes de llegar al visitante:
- Una respuesta que contenga una credencial o un secreto vivo se bloquea siempre. Esta regla no se puede relajar.
- Una respuesta que pida al visitante credenciales o acceso a una cuenta, comprometa a tu negocio económicamente (un precio, descuento, reembolso o exención) o haga una promesa con forma legal (garantía o compromiso contractual) se retiene para revisión humana en lugar de enviarse.
Cuando una respuesta queda retenida, el visitante no la ve. Recibe en su lugar un breve mensaje de traspaso — "Permíteme consultarlo con nuestro equipo. Un miembro del equipo revisará tu solicitud y te responderá por aquí." — en su propio idioma. La conversación se escala, los miembros activos de tu equipo reciben una notificación con enlace a ella y el borrador retenido se conserva (con los secretos redactados) para que una persona lo revise; en el buzón, la burbuja de traspaso queda etiquetada como retención de política. Un mensaje retenido siempre espera revisión; nunca se descarta en silencio.
Si tu negocio realmente necesita que el agente diga estas cosas — por ejemplo, cotizar precios es su trabajo — un owner o admin puede relajar cada regla revisable en Settings -> Outbound message policy. La regla que bloquea credenciales permanece activa en todos los espacios de trabajo.
Conversaciones
Las conversaciones de Web Chat se supervisan en el buzón compartido. Abre una conversación para ver el nombre y el email del visitante (o "Anonymous Visitor" cuando no se recogió ninguno), el hilo de mensajes y los controles siguientes.
| Control | Qué hace |
|---|---|
| AI Active / AI Disabled | Activa o desactiva las respuestas automáticas del agente para esta conversación. |
| Take Over | Aparece cuando la IA pide ayuda ("AI Requested Assistance"). Toma el control y pausa las respuestas de la IA. |
| Return to AI | Devuelve a la IA una conversación atendida por un humano. |
| Close / Reopen | Cambia el estado entre Active y Closed. |
| Archive | Oculta una conversación cerrada de la lista activa; se puede reabrir más tarde. |
| Delete | Elimina permanentemente la conversación y sus mensajes (solo owner y admin). |
| Generate Insights | Genera un resumen con IA y un análisis de sentimiento de la conversación. |
Notas:
- El panel se actualiza automáticamente cada pocos segundos; tu respuesta aparece de inmediato al enviarla.
- Una burbuja de mensaje se marca con RAG cuando el agente usó tus documentos y con SQL cuando consultó tus tablas de datos.
- Los adjuntos entrantes se muestran en línea: las imágenes como miniaturas, las notas de voz y los documentos como fichas etiquetadas.
- Una respuesta retenida por la política de mensajes salientes aparece como conversación escalada; toma el control para responder tú al visitante.
- Generate Insights usa IA. Si tu espacio de trabajo depende de tu propia clave de OpenAI y falta o es inválida, se te pide añadirla o corregirla en Settings -> API Keys.
- Estas conversaciones también aparecen en el buzón unificado completo junto con el resto de canales.
Buenas prácticas
- Configura un agente con el canal Web Chat antes de crear un widget, para que el widget tenga quien responda.
- Usa Allowed Domains para evitar que un widget se cargue en sitios que no controlas.
- Activa Collect visitor email cuando quieras una vía para dar seguimiento tras el chat.
- Toma el control de la IA cuando una conversación se escale y devuélvela una vez resuelta.
- Revisa pronto las retenciones de política: al visitante se le dijo que tu equipo le respondería, y el chip Needs you cuenta esas conversaciones.
- Si cotizar precios o descuentos es el trabajo de tu agente, relaja la regla financiera en Settings -> Outbound message policy para que esas respuestas no queden retenidas.
Notas comunes
- Si un widget muestra la advertencia "previously linked agent is inactive", activa el agente (o habilita su canal Web Chat) en el módulo Agents y luego reasígnalo.
- Eliminar un widget no borra las conversaciones pasadas; solo detiene los nuevos chats.
- Los límites de marca y de número de widgets los impone tu plan; mejóralo para ampliarlos.
- Si la franja de indicadores no aparece, o tu plan no incluye Web Chat o los conteos no se pudieron cargar en ese momento — recarga la página.
Relacionados
Phone Numbers
Compra un número de EE. UU. en Helios, ponle nombre y úsalo para un agente de voz o WhatsApp, con dirección E911 y un asistente guiado.
Widget de Chat Web (Incrustar)
Crea y personaliza un widget de chat web, incrústalo en tu sitio con el snippet de instalación y contrólalo desde JavaScript.