Cómo instalar y personalizar el Chat Web (Widget JS) en tu sitio web

• Categoría: Canales y bandejas de entrada
• Disponibilidad: Incluido en todos los planes (Estándar, Premium y Evolución)
• Tiempo estimado de configuración: 5 a 10 minutos
• Rol necesario: Administrador

El Widget de Chat Web (identificado en la cuadrícula de canales como Sitio Web) te permite incorporar un canal de atención y ventas en tiempo real dentro de tu tienda online, página institucional o aplicación web. En esta guía aprenderás a crear y diseñar tu widget utilizando la vista previa interactiva en vivo, configurar el Pre-formulario de chat con atributos personalizados y aprovechar las opciones avanzadas de la pestaña Configuración de sesión: instalación en modo Flotante o incrustado Embed / Inline (#waclis-chatweb-embed), Identificación automática vía cookies, restricción por Dominios Permitidos, soporte para aplicaciones móviles y Validación de Identidad (HMAC).

1. ¿Qué puedes hacer y cuándo te sirve?

El canal Sitio Web convierte las visitas anónimas de tu página en conversaciones comerciales o de soporte atendidas desde Waclis Inbox:

• Asistencia de preventa en tiendas online (Modo Flotante): Coloca la burbuja de chat en la esquina inferior derecha o izquierda de tu tienda para resolver dudas sobre talles, medios de pago o tiempos de envío justo antes de que el visitante abandone el carrito.
• Centro de soporte incrustado dentro de una página (Modo Embed / Inline): Si tienes una página de "Contacto" o un área privada de clientes y no quieres una burbuja flotante, puedes usar el modo Embed / Inline para incrustar la ventana de chat completa dentro de un bloque fijo (<div id="waclis-chatweb-embed">) de tu diseño.
• Reconocimiento automático de usuarios logueados sin programar (Cookies o HMAC): Si tu sitio web ya guarda el nombre, correo o teléfono del usuario en cookies del navegador, puedes indicar los nombres de esas cookies en Waclis Inbox para identificar al cliente automáticamente sin escribir código adicional, o activar firmas criptográficas HMAC en plataformas SaaS y financieras.

2. Antes de comenzar (Requisitos previos)

Para completar la creación e instalación del widget necesitarás:

1. Rol de Administrador en Waclis Inbox: Necesario para acceder a Ajustes → Entradas.
2. Dominio de tu sitio web: La dirección principal donde instalarás el chat (por ejemplo, mitienda.com o app.miempresa.com).
3. Acceso al código HTML o gestor de etiquetas de tu web: Permisos para pegar un fragmento de código JavaScript antes de la etiqueta de cierre </body> en tu sitio (tiendas de Waclis, WordPress, Google Tag Manager o sitio propio).

3. Paso a paso en Waclis Inbox

Paso 1: Crear la bandeja de entrada Sitio Web

1. En la barra lateral izquierda de Waclis Inbox, ve a Ajustes (icono de engranaje) → Entradas y haz clic en + Añadir bandeja de entrada.
2. En el Paso 1: Elegir canal, haz clic sobre la primera tarjeta: Sitio Web (Crea un widget de chat en vivo).
3. En el Paso 2: Crear bandeja de entrada, completa los datos iniciales del formulario mientras observas a la derecha cómo se actualiza la vista previa en vivo:

• Nombre del sitio web: El nombre comercial que verán tanto tus agentes como los visitantes en la cabecera del chat (ej. Tienda Oficial).
• Dominio del sitio web: Ingresa el dominio de tu página (ej. mitienda.com).
• Color del widget: Elige en la paleta el color corporativo de tu marca (por defecto #009CE0).
• Cabecera de bienvenida: Título principal de saludo cuando el visitante abre el widget (ej. ¡Hola! ¿En qué podemos ayudarte?).
• Bienvenido Tagline: Subtítulo descriptivo de hasta 255 caracteres con soporte de formato.
• Habilitar bienvenida al canal: Deja Activado este selector y redacta el Mensaje de bienvenida del canal si deseas que el visitante reciba un primer mensaje automático apenas inicie una conversación.

1. Haz clic en Crear bandeja de entrada.
2. En el Paso 3: Añadir agentes, selecciona a los agentes que atenderán el chat web y pulsa Añadir agentes.
3. En la pantalla ¡Tu bandeja de entrada está lista!, haz clic en Más ajustes para personalizar el diseño, el pre-formulario y copiar el código de instalación.

Paso 2: Personalizar la apariencia y preferencias en la pestaña Ajustes

Dentro de la pestaña Ajustes de tu bandeja Sitio Web, verás la pantalla dividida en dos columnas: a la izquierda los controles de configuración y a la derecha la Vista previa interactiva en vivo, donde puedes alternar entre la vista Predeterminado (portada del widget) y Modo chat (conversación abierta):

1. Avatar y Nombre del remitente: Sube el logotipo de tu empresa en Avatar del canal, vincula opcionalmente un portal de Centro de ayuda para que los clientes busquen artículos desde el widget, y elige el Nombre del remitente:

• Amigable: Muestra el nombre del agente junto al nombre de tu empresa (ej. "Sofía de Tienda Oficial").
• Profesional: Muestra únicamente el nombre de la bandeja o empresa.

1. Acordeón Características del widget: Despliégalo para ajustar:

• Posición del widget: Izquierda o Derecha de la pantalla.
• Tipo de burbuja del widget: Estándar (icono circular clásico) o Burbuja expandida (píldora con texto personalizado en Título del lanzador, como "Chatea con nosotros").
• Tiempo de respuesta: Indica la expectativa de demora en la cabecera (En unos minutos, En unas horas, En un día).
• 4 casillas de funciones del chat: Activa o desactiva el selector de archivos adjuntos, el selector de emojis, permitir al usuario finalizar la conversación desde el widget y usar el avatar de la bandeja para el bot.

1. Acordeón Preferencias de canal: Configura la solicitud automática de correo electrónico en el chat, si permites que el visitante envíe mensajes después de resuelta la conversación y la continuidad de la conversación por correo electrónico.
2. Haz clic en el botón Actualizar al pie de la página para guardar los cambios.

Paso 3: Configurar el Pre-formulario de chat (Con atributos personalizados)

Si deseas solicitar los datos del visitante antes de que empiece a escribir, haz clic en la pestaña superior Pre-formulario de chat:

1. Activa el interruptor Activar formulario de pre-chat.
2. Escribe en Mensaje de prechat una breve invitación (ej. "Completa tus datos para conectarte con un asesor").
3. En la tabla Campos del formulario del chat, encontrarás tanto los tres campos estándar (Correo electrónico, Nombre completo y Número de teléfono) como todos los Atributos personalizados de contacto que hayas creado en tu cuenta (por ejemplo, DNI, Número de cliente o Empresa).
4. Para cada campo de la tabla puedes:

• Arrastrar y soltar la fila para cambiar el orden en que aparecen en el widget.
• Activar la casilla para mostrarlo en el formulario y marcar si es Requerido (obligatorio).
• Personalizar la Etiqueta visible y la Marca de posición (placeholder).

1. Pulsa Actualizar para aplicar el formulario.

Paso 4: Copiar el script e instalarlo desde Configuración de sesión

Haz clic en la pestaña Configuración de sesión de tu bandeja Sitio Web. Aquí se encuentran el generador de código y las cuatro herramientas de integración técnica:

1. Selector de modo del Script: Flotante vs. Embed / Inline

En el bloque Script de Messenger, elige cómo quieres que se muestre el chat en tu página web:

• Modo Flotante (Por defecto): Genera el script estándar que muestra el botón flotante en la esquina de tu sitio web. Solo debes hacer clic en Copiar y pegarlo antes del cierre </body> de tu página.
• Modo Embed / Inline: Al seleccionar esta opción, el generador modifica automáticamente el script agregando la propiedad modo incrustado (Inline) e incluye un contenedor HTML <div id="waclis-chatweb-embed" style="height: 600px;"></div>. En este modo el chat no flota como burbuja, sino que se renderiza incrustado directamente dentro del elemento #waclis-chatweb-embed donde lo coloques en tu maquetación.

4. Desglose de funciones avanzadas en Configuración de sesión

Además del selector de script, la pestaña Configuración de sesión incluye tres secciones clave de seguridad e identificación:

5. Otras formas de hacerlo y atajos rápidos

• Probar cambios sin publicar en tu web: Cada vez que modifiques colores, textos, el tipo de burbuja o la posición del widget en la pestaña Ajustes, utiliza el conmutador superior de la Vista previa en vivo (Predeterminado / Modo chat) a la derecha de la pantalla para comprobar el resultado visual al instante.
• Disparar mensajes proactivos según la URL visitada (Campañas → Chat en vivo): Puedes crear campañas continuas (Ongoing) para que cuando un visitante permanezca más de 10 segundos en una URL específica (por ejemplo, https://mitienda.com/precios*), el widget abra automáticamente un mensaje de ayuda personalizado.

6. Cómo combinarlo con otras funciones de Waclis Inbox

• Centro de ayuda integrado en el widget (Ajustes → Centro de ayuda): Al asociar tu portal público del Centro de ayuda en el selector Centro de ayuda de la pestaña Ajustes de la bandeja Sitio Web, los visitantes verán un buscador de artículos de autoservicio en la portada del widget antes de iniciar un chat.
• Enrutamiento automático por idioma o URL de origen (Automatización): Crea reglas en Ajustes → Automatización usando los atributos Enlace de referencia (referer, por ejemplo si contiene /mayoristas) o Idioma del navegador para asignar el chat automáticamente al equipo correspondiente.
• Agente de IA Capitán (Configuración del bot): Asigna a Capitán en tu bandeja Sitio Web para que responda al instante las consultas de los visitantes web las 24 horas y transfiera el chat a un asesor humano cuando detecte intención de compra.

7. Relación con el ecosistema Waclis

• Waclis (Tienda Online / Catálogo): Puedes pegar el script del widget de Waclis Inbox en tu tienda de Waclis para acompañar en vivo el proceso de compra, mientras recibes en la misma plataforma los pedidos enviados desde el Carrito Cotizador.
• WaclisCAL: Si un visitante consulta por un turno o reunión desde el chat web de tu página, tu agente o Capitán pueden compartir el enlace público de reserva de WaclisCAL, o bien operar mediante una Aplicación del panel o Herramienta personalizada HTTP si tu cuenta la configura.
• Waclis Connect: Cuando el visitante completa su correo o teléfono en el Pre-formulario de chat o mediante Identificación automática vía cookies, Waclis Inbox unifica su ficha con el historial que ya tenga ese contacto en otros canales como WhatsApp o Correo Electrónico.

8. Problemas frecuentes y cómo resolverlos

8.1 Pegué el script en mi página web pero la burbuja del chat no aparece

• Síntoma: El código JavaScript está presente en el HTML de tu sitio, pero el icono del widget no se muestra en pantalla.
• Causa probable: Existen dos causas habituales: 1) seleccionaste el modo Embed / Inline pero no colocaste el contenedor <div id="waclis-chatweb-embed"></div> en tu página, o 2) escribiste una lista en Dominios Permitidos que no incluye el dominio o subdominio exacto donde estás probando (por ejemplo, www.mitienda.com vs. mitienda.com).
• Cómo resolverlo: Entra a la pestaña Configuración de sesión de la bandeja Sitio Web. Si quieres la burbuja clásica, verifica que el modo elegido sea Flotante. Luego revisa el campo Dominios Permitidos: agrega todos tus subdominios separados por comas o déjalo vacío temporalmente para permitir la carga en cualquier dominio.

8.2 El widget funciona en la web pero al abrirlo dentro de nuestra app móvil Android/iOS da error de dominio

• Síntoma: Tienes configurados Dominios Permitidos por seguridad y el chat no carga dentro del WebView de tu aplicación móvil nativa.
• Causa probable: Los WebViews móviles no envían la misma cabecera de dominio que un navegador web de escritorio.
• Cómo resolverlo: En la pestaña Configuración de sesión, debajo del campo Dominios Permitidos, activa el interruptor Habilitar widget en aplicaciones móviles y guarda los cambios.

8.3 Activé Requerir validación de identidad para todas las conversaciones y ningún visitante nuevo puede escribir

• Síntoma: Los visitantes que no han iniciado sesión en tu sitio web intentan abrir el chat y sus mensajes son rechazados.
• Causa probable: Al encender el interruptor obligatorio de validación HMAC, el servidor exige que cada conexión incluya un Firma de verificación de identidad firmado por tu backend, bloqueando a los visitantes anónimos.
• Cómo resolverlo: Si en tu página también atiendes a visitantes públicos sin sesión iniciada, desactiva el interruptor Requerir validación de identidad para todas las conversaciones en Configuración de sesión. De ese modo podrás seguir enviando el hash HMAC para usuarios logueados sin bloquear a los visitantes anónimos.

9. Preguntas frecuentes (FAQ)

¿Puedo cambiar el color, el texto de bienvenida o la posición del widget sin tener que volver a pegar el código en mi sitio web?

Sí. Todos los ajustes visuales de la pestaña Ajustes y los campos de Pre-formulario de chat se cargan dinámicamente desde los servidores de Waclis Inbox. Basta con hacer clic en Actualizar dentro de la plataforma y recargar tu página web para ver los cambios aplicados.

¿Qué pasa si un visitante me escribe por el Chat Web y se va de mi página antes de que un agente le responda?

Si en Ajustes → Preferencias de canal mantienes activa la recolección de correo o el Pre-formulario de chat pide el email, cuando el agente responda desde Waclis Inbox el sistema le enviará automáticamente al visitante un correo electrónico con la respuesta y un enlace para retomar la conversación.

¿Cómo agrego un campo como "CUIT", "Número de pedido" o "Sucursal" al formulario previo del chat?

Primero crea ese campo en Ajustes → Atributos personalizados eligiendo como modelo Contacto. Una vez creado, vuelve a tu bandeja Sitio Web → pestaña Pre-formulario de chat: verás ese atributo disponible en la tabla Campos del formulario del chat listo para activarlo, marcarlo como requerido y ordenarlo.

10. Artículos relacionados

• Horarios comerciales por día de la semana, descanso de almuerzo y mensajes automáticos fuera de turno
• Configuración inicial del Agente de IA Capitan: modelos LLM e instrucciones
• Reglas de automatización en tiempo real para triaje y auto-asignación