El Widget Web es un chat que se pega a tu sitio. Quien visite tu página puede escribirte desde ahí, y la conversación entra a Conversaciones junto con las de WhatsApp e Instagram.
Vive en Canales, en el grupo Tu sitio web.
Ojo: en ese grupo hay dos widgets distintos:
Widget Web abre un chat dentro de tu página, atendido por Yolani. Widget WhatsApp es un botón flotante que manda a la persona a WhatsApp y le pone una etiqueta de campaña. Son cosas diferentes y se configuran por separado. Más abajo se explica cuál conviene.
Para qué sirve
- Captar a quien ya está en tu sitio. No tiene que buscarte en WhatsApp: te escribe ahí mismo.
- Atender 24/7. El widget queda conectado con tu agente de IA automáticamente, sin configuración extra.
- Todo en un solo inbox. No hay una bandeja aparte para la web.
Activarlo
Abre la configuración
Canales → grupo Tu sitio web → fila Widget Web → botón Activar (dice Configurar si ya está activo).
Personaliza el botón y el chat
Los campos disponibles son estos, y todos tienen valor por defecto:
| Campo | Qué controla |
|---|---|
| Color principal | El color del botón y del encabezado. Selector de color o código hexadecimal. |
| Posición | Abajo derecha o Abajo izquierda. |
| Título | El encabezado del chat abierto. Por defecto: Chat en vivo. |
| Subtítulo | La línea bajo el título. Por defecto: Responderemos lo antes posible. |
| Icono del botón | Seis opciones: Chat, Burbuja, Mensajes, Soporte, Contacto y Más. |
| Mensaje de bienvenida | Lo primero que lee el visitante al abrir el chat. |
Limita los dominios (opcional)
En Dominios permitidos escribes los dominios donde puede funcionar el widget, separados por comas: ejemplo.com, mitienda.com.
Si lo dejas vacío, el widget funciona en cualquier dominio. Está bien para empezar, pero si te importa que nadie más pueda incrustar tu chat, pon aquí tu dominio.
Pulsa Activar Widget Web
Al guardar, Yolani genera el código para tu sitio web.
Copia el código y pégalo en tu sitio
El bloque de código trae su botón Copiar. Pégalo antes del cierre de </body> de tu sitio.
Después de activarlo, la fila en Canales dice Activo y el botón cambia a Configurar. Para cambiar algo, entras, editas y pulsas Guardar cambios.
Dónde se pega el código, según tu plataforma
| Plataforma | Dónde |
|---|---|
| WordPress | Apariencia → Editor de temas → footer.php, o un plugin de "insertar código en el footer". |
| Shopify | Tienda online → Temas → Editar código → theme.liquid, antes de </body>. |
| Wix | Configuración → Código personalizado → añadir al Body, al final. |
| Webflow | Project Settings → Custom Code → Footer Code. |
| Sitio propio | Directamente en el HTML, antes de </body>. |
Qué ve el visitante
- Un botón flotante en la esquina que elegiste.
- Al pulsarlo, se abre el chat con tu título, tu subtítulo y tu mensaje de bienvenida.
- Escribe y recibe respuesta de tu agente de IA, o de tu equipo desde Conversaciones.
Regenerar el token
Dentro de la configuración hay un botón Regenerar token. Sirve cuando sospechas que tu código se filtró y alguien podría estar usando tu widget en otro sitio.
Regenerar rompe el código viejo:
Al regenerar, el snippet que ya tienes pegado deja de funcionar. Tienes que copiar el nuevo y volver a pegarlo en tu sitio. Hazlo cuando puedas actualizar la página, no un viernes por la tarde.
Desactivar
El botón Desactivar widget, abajo a la izquierda del modal. El chat desaparece de tu sitio aunque el código siga pegado. Las conversaciones que ya tenías se conservan.
Widget Web o Widget WhatsApp
| Widget Web | Widget WhatsApp | |
|---|---|---|
| Dónde ocurre la conversación | Dentro de tu página | En WhatsApp |
| Qué necesita el visitante | Nada | Tener WhatsApp |
| El agente de IA responde | Sí, en el widget | Sí, ya en WhatsApp |
| Atribución de campañas (UTM) | No | Sí, es su razón de ser |
| Configuración | Color, posición, título, subtítulo, icono, bienvenida, dominios | Número, mensaje de bienvenida, color, posición, tooltip, efecto de pulso |
El Widget WhatsApp además genera links de campaña: defines source, medium, campaña y un mensaje activador, y Yolani te da un enlace por campaña. Quien llegue por ese enlace queda atribuido a esa fuente, y verás los clics del botón por fuente en el mismo modal.
No son excluyentes: puedes tener los dos, aunque dos botones flotantes en la misma esquina se ven mal. Si vas a usar los dos, ponlos en esquinas distintas.
Cuando algo falla
| Síntoma | Qué revisar |
|---|---|
| El widget no aparece en el sitio | El código no quedó pegado antes de </body>, o el dominio no está en la lista de Dominios permitidos. |
| Aparecía y dejó de aparecer | ¿Alguien regeneró el token? El snippet viejo deja de funcionar. |
| Aparece pero no llega ningún mensaje | Revisa que la fila en Canales diga Activo y no Desactivado. |
| Nadie contesta lo que escriben | El widget entrega al agente de IA. Si el agente está apagado, la conversación queda esperando a una persona en Conversaciones. |