Widget de Chat Web (Incrustar)

Objetivo

Añade un widget de chat con IA a tu sitio web. Desde el módulo Web Chat creas uno o varios widgets, personalizas su apariencia y comportamiento, los vinculas a un agente de IA y copias un snippet de instalación para incrustarlos en tu sitio. Las conversaciones de los visitantes se supervisan luego en el inbox compartido.

Acceso

Sidebar -> Messaging -> Web Chat Rutas:

• /app/{tenant}/webchat (crear, personalizar y gestionar widgets; obtener el código de inserción)
• /app/{tenant}/conversations?channel=web_chat (conversaciones de Web Chat, desde el botón View conversations)

La gestión de widgets vive en esta página. Las conversaciones viven en el inbox compartido, no aquí.

Roles

• owner, admin, agent

Requisitos previos

• Un email verificado. Un espacio sin verificar no puede crear ni editar un widget.
• Al menos un agente activo con el canal Web Chat habilitado (se configura en el módulo Agents). Si no hay ninguno, el flujo de creación muestra el aviso Agent Required con un enlace Go to Agents.
• El cupo de widgets de chat web de tu plan. Los espacios nuevos incluyen un widget; para más necesitas un plan superior. Al alcanzar el límite se abre un diálogo de mejora en lugar del formulario de creación.

Crear y personalizar un widget

1. En la página Web Chat, haz clic en Create Widget (para el primero, usa la tarjeta Create Your First Widget).
2. Completa el modal titulado Create Web Chat Widget. Un Live Preview en la parte superior refleja tus cambios mientras escribes.
3. Haz clic en Create Widget para guardar.

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 caso contrario, el widget responde con un agente en solitario.
• Allowed Domains se aplica en tiempo de ejecución: cuando la lista está definida, el widget rechaza iniciar chats desde cualquier otro sitio. Sin dominios configurados, el widget funciona en cualquier sitio web.
• Si el agente vinculado a un widget queda inactivo o pierde el canal Web Chat, el editor lo señala y te pide elegir un agente activo antes de guardar.

Gestionar widgets

Cada widget aparece como una tarjeta que muestra su nombre, el agente vinculado (Agent: {name}), 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 snippets de instalación (ver 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 un cuadro Search y un control Sort (Name A–Z, Name Z–A, Active first) sobre la cuadrícula.

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 snippet de instalación. El modal (Embed Code for {name}) ofrece tres caminos:

Cada snippet ya contiene el ID de tu widget y siempre apunta a la URL de producción, por lo que funciona desde cualquier sitio. El snippet básico se ve así:

<script>
  (function() {
    window.HeliosChat = {
      widgetId: 'YOUR_WIDGET_ID',
      apiUrl: 'https://heliosvisionai.com'
    };
    var script = document.createElement('script');
    script.src = 'https://heliosvisionai.com/widget/helios-chat.js';
    script.async = true;
    document.body.appendChild(script);
  })();
</script>

La variante With Visitor Identification añade claves opcionales dentro de window.HeliosChat:

window.HeliosChat = {
  widgetId: 'YOUR_WIDGET_ID',
  apiUrl: 'https://heliosvisionai.com',

  // Opcional: pre-identifica a tus visitantes
  // visitorName: 'User Name',
  // visitorEmail: 'user@example.com',
  // metadata: { customerId: '123', plan: 'premium' }
};

Pasos de instalación: copia el snippet, pégalo justo antes de la etiqueta </body> en tu HTML, guarda y despliega, y el botón flotante de chat aparecerá 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 del plan y branding

• El número de widgets que puedes crear depende de tu plan (algunos planes son ilimitados). Al alcanzar el límite se abre un diálogo de mejora en lugar del formulario de creación.
• Quitar el branding "Powered by HeliosVision" requiere el plan Growth, Business o Enterprise. En otros planes el interruptor Show branding permanece activado.

Buenas prácticas

• Configura un agente con el canal Web Chat antes de crear un widget, para que el widget tenga quién 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.
• Mantén el snippet en todas las páginas de tu sitio, cargado exactamente una vez, para que el botón esté disponible en todas partes.

Notas comunes

• Si un widget muestra el aviso "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 elimina las conversaciones anteriores; solo detiene los nuevos chats.
• El snippet de inserción siempre apunta a la URL de producción, por lo que funciona incluso mientras desarrollas en local.

Relacionado

• Web Chat
• Conversations
• Agents
• Teams