Widget del sitio web
El widget de OneTwoAgent permite que los clientes te escriban directamente desde tu sitio web en escritorio y móvil, con todos los chats en la bandeja de Conversations.
Widget de chat web con IACaptura de leads desde el chat del sitioConfiguración de chat web sin códigoMensajería con clientes en tu sitio web
Qué cubre este artículo
- Cómo personalizar el diseño y el comportamiento del widget.
- Cómo instalar el widget en tu sitio web.
- Cómo aplicar ajustes de seguridad como dominios permitidos y páginas excluidas.
1. Abrir la configuración del Widget
Ve a Channels -> Widget. Si el widget todavía no está habilitado, actívalo primero.
- Vista previa del widget.
- Ajustes de personalización.
- Código de instalación.
2. Personalizar el diseño del widget
Puedes hacer que el widget encaje con casi cualquier estilo de sitio web.
- Colores del widget: color del botón, fondo, colores de texto y color de acento.
- Tipografía: familia tipográfica o presets de estilo, y tamaño de fuente donde esté disponible.
- Icono y elementos de marca: icono del lanzador, nombre del negocio en el encabezado y subtítulo o saludo corto opcional.
- Posición y diseño: abajo a la derecha o abajo a la izquierda, separación respecto a los bordes de la pantalla y comportamiento en móvil.
- Comportamiento: apertura automática frente a clic manual, visibilidad del saludo, todas las páginas o páginas seleccionadas.
Notas
- Mantén el widget minimalista: colores simples, título claro y un saludo corto.
3. Instalar el widget en tu sitio web
Instalación estándar (recomendada).
- 1Copia el script del widget desde Channels -> Widget -> Install code
- 2Añádelo a tu sitio web para que se cargue en todas las páginas.
- 3Mejor lugar: dentro de <head>, antes de </head>.
- 4Si <head> no está disponible, colócalo antes de </body> (funciona, pero puede cargar un poco más lento).
Notas
- Después de instalar y publicar, el widget debería aparecer en tu sitio en vivo.
4. Instalar en plataformas populares
- Shopify: Online Store>Themes>Edit code -> layout/theme.liquid -> pega antes de </head> -> Save
- Wix Opción A: Settings -> Custom Code -> Add New Tool -> pega el código -> Load on all pages -> colócalo en Head -> Save y publica.
- Wix Opción B: añade el script mediante el área global de scripts/plugins del sitio y asegúrate de que cargue en todas las páginas.
- Webflow: Project Settings>Custom Code>pega en Head Code -> Save y publica.
- WordPress: usa un plugin de scripts en el header (sección Header) o pégalo en header.php antes de </head>.
- Sitios con código propio: coloca el script en la plantilla HTML global dentro de <head> o antes de </body>.
O envía esto a tu desarrollador
6. Ajustes de seguridad y control
Ajustes recomendados para un comportamiento más seguro y más limpio.
- Dominios permitidos: evita que el código del widget se reutilice en sitios no relacionados.
- Ejemplos de dominios: yourdomain.com, www.yourdomain.com, shop.yourdomain.com.
- Páginas excluidas: oculta el widget donde no sea relevante.
- Exclusiones habituales: checkout, confirmación de pedido, cuenta/login, privacidad y páginas técnicas.
- Ejemplos de rutas: /checkout, /account, /thank-you.
Notas
- Empieza simple: habilita el widget en todas partes y excluye solo las páginas que realmente no quieras.
7. Cómo funcionan los chats del widget en OneTwoAgent
- Cuando un cliente envía un mensaje en el widget, aparece una nueva conversación en Conversations.
- Siempre puedes responder manualmente.
- Si Auto Sales está habilitado, el asistente puede responder automáticamente usando tu configuración y tu catálogo.
Resolución de problemas
- El widget no aparece: confirma que el script está en el sitio en vivo (no solo en vista previa), publica los cambios y verifica los dominios permitidos si están activados.
- El widget aparece solo en algunas páginas: revisa las reglas de páginas excluidas y confirma que el script esté instalado globalmente.
- Los mensajes no entran: verifica que sea la cuenta de negocio correcta de OneTwoAgent y que el widget esté habilitado en Channels -> Widget.
Guías relacionadas
Continúa con los siguientes pasos de configuración sobre canales, reservas, agenda o automatización.
Preguntas frecuentes
¿Puedo instalar el widget sin una integración personalizada completa?
Sí. La configuración normal es un único script del widget en tu sitio web, además de los ajustes de diseño y comportamiento dentro del panel.
¿El widget funciona tanto en móvil como en escritorio?
Sí. El widget está pensado para visitantes de escritorio y móvil, y las conversaciones aparecen en la misma bandeja de entrada.