Widget del sitio web

• Qué pueden hacer los clientes en el widget: chat, Voice, capturas de pantalla y archivos, en su propio idioma.
• 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.

El agente de soporte con IA responde cada conversación del widget a partir de tu base de conocimiento. Para los clientes que han iniciado sesión, también usa los datos de cuenta que autoriza tu backend.

• Chatear en su propio idioma: el agente responde en el idioma en que escriba el cliente.
• Talk (Voice): los clientes pueden hablar con el agente. El habla se detecta automáticamente y Voice responde en voz alta en 40+ idiomas; donde la respuesta hablada no está disponible, la conversación continúa por texto. Los minutos de Voice vienen con los planes de pago.
• Enviar capturas de pantalla y archivos: imágenes, capturas de pantalla y fotos, y archivos PDF, DOC, DOCX y TXT de hasta 8 MB. Las imágenes se leen con visión artificial; los documentos PDF y Word se analizan, incluidas las tablas.
• Pegar enlaces: el agente lee la página enlazada como contexto para esa conversación. Los enlaces del cliente son contexto, no tu conocimiento aprobado.
• Hablar con una persona: cuando el agente no puede verificar una respuesta, deriva la conversación a tu equipo en lugar de adivinar, y cualquier miembro del equipo puede tomar el control desde la bandeja de entrada.

Ve a Channels -> Widget. Si el widget todavía no está habilitado, actívalo primero.

• Vista previa en vivo de Home, Chat y Talk, en escritorio y móvil.
• Ajustes de diseño y comportamiento.
• Código de instalación.

Adapta el widget a tu producto sin escribir CSS. Cada cambio se ve en la vista previa en vivo mientras editas.

• Superficies: Home, Chat y Talk (Voice). Tú eliges cuál se abre primero.
• Tema: claro u oscuro.
• Colores: encabezado, burbujas del asistente y del cliente, fondo del chat, campo de entrada, botón de enviar, lanzador, botones y botón de cerrar.
• Tipografía: 45 Google Fonts (sans serif, serif y monoespaciadas), configurables por separado para el encabezado, los mensajes del asistente, los mensajes del cliente, el campo de entrada y el lanzador, cada uno con su propio tamaño.
• Mensajes: 6 formas de burbuja, que puedes aplicar a ambos lados, y varios iconos de envío para elegir.
• Encabezado: nombre del asistente, línea de estado y un avatar o logotipo opcional.
• Lanzador: 15 iconos, texto opcional (solo el icono en móvil si lo prefieres) y 13 animaciones del lanzador.
• Pantalla de inicio: titular, una línea corta encima, un botón principal, hasta 3 enlaces, un orbe animado y estilos de fondo como malla, halo, rayos, resplandor, estrellas, puntos, grano y semitono, con controles de tono, intensidad y movimiento.
• Talk: voz, mensaje de bienvenida hablado y textura del orbe.
• Textos y comportamiento: mensaje de bienvenida, texto de ejemplo del campo de entrada, subida de archivos activada o desactivada, modo compacto, dominios permitidos y páginas permitidas o excluidas.

Instalación estándar (recomendada).

1. 1Copia el script del widget desde Channels -> Widget -> Install code
2. 2Añádelo a tu sitio web para que se cargue en todas las páginas.
3. 3Mejor lugar: dentro de <head>, antes de </head>.
4. 4Si <head> no está disponible, colócalo antes de </body> (funciona, pero puede cargar un poco más lento).

• 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>.

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.

• Cada conversación del widget aparece en Conversations, en la misma bandeja de entrada que WhatsApp, Instagram y Telegram.
• El agente de soporte con IA responde a partir de tu base de conocimiento y, para los clientes que han iniciado sesión, de los datos de cuenta autorizados, en el idioma del cliente.
• Cualquier miembro del equipo puede tomar el control y responder directamente. Mientras un compañero gestiona la conversación, la IA permanece en silencio; haz clic en Resume AI para devolvérsela.
• En el widget, el cliente ve "{name} joined the conversation" cuando responde un miembro del equipo, y "Assistant resumed" cuando la IA vuelve a responder.

• 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.