Configuración e instalación del Widget de chat

Widget de chat

Abra Panel → su asistente → Canales → Widget de chat. Aquí es donde instala y personaliza el widget flotante del sitio web. No hay una pestaña independiente de Integración o Integración del widget.

Instalar el widget

Despliegue Mostrar detalles de instalación arriba del área de personalización. El panel contiene:

• el código HTML listo para usar con su ID del chatbot ya insertado;
• las acciones Copiar código y Añadir al sitio web;
• Comprobar instalación para verificar que el widget se cargue en un dominio permitido;
• guías de configuración para WordPress, Shopify, Wix, Squarespace y Webflow.

Cuando WebChatAgent detecta el widget, el panel muestra el dominio donde se está cargando este asistente. Si la comprobación falla, por lo general significa que falta el código, la página todavía entrega una versión antigua en caché o el dominio no está en Configuración → Sitios web permitidos.

Consulte la Guía de integración en sitios web para la ubicación y la guía del desarrollador para widgets para atributos HTML y eventos en tiempo de ejecución.

Diseño y contenido

Esta pestaña combina el diseño visual, las imágenes y el contenido que se muestra antes de iniciar una conversación.

Configuración básica

Colores

El editor revisa el contraste del texto y avisa si una combinación de primer plano y fondo queda por debajo de la proporción recomendada de WCAG. Resuelva esos avisos antes de publicar.

Imágenes

Cada imagen admite una carga de archivo o una URL:

Las cargas admiten PNG, JPG, WebP y GIF. Utilice imágenes pequeñas y optimizadas; el editor muestra los límites de tamaño actuales junto a cada carga.

Contenido

El texto de bienvenida y del bocadillo se pueden redactar con Generar con IA y editarse después. Mantenga breve el texto del bocadillo; incluya las explicaciones más extensas en el mensaje de bienvenida.

Comportamiento

Visibilidad e interacción

Ocultar en URL/rutas

Introduzca una regla por línea. Se admite el comodín *, lo que permite ocultar el widget en páginas como:

/checkout/*
/account/*
https://example.com/en/legal/*

Utilice esto para páginas de pago, cuenta, inicio de sesión u otras donde el widget flotante distraiga de la tarea principal o cubra controles importantes.

Posicionamiento

Defina desplazamientos horizontales y verticales independientes para escritorio y móviles. Los valores establecen la distancia desde los bordes derecho e inferior. Pruébelos con avisos de cookies, barras de navegación fijas y las áreas seguras de dispositivos móviles a la vista.

Interacción automática

Active Activar disparadores proactivos cuando el widget deba contactar a los visitantes según el tiempo, la profundidad de desplazamiento, la intención de salida, la página, la inactividad, las visitas recurrentes u otros comportamientos.

El panel contiene el editor de disparadores, los controles de frecuencia global, la programación y segmentación opcionales, las plantillas y los datos de rendimiento. También explica la conexión de consentimiento opcional. El comportamiento proactivo básico funciona de forma anónima; la detección de visitantes recurrentes, los límites persistentes, las analíticas y los saludos generados por IA requieren una señal de consentimiento otorgada.

Consulte Disparadores proactivos para conocer cada tipo de disparador, modo de respuesta, límite y comportamiento de privacidad.

Botones y formularios

Acciones rápidas

Los botones de sugerencia (también llamados preguntas iniciales, preguntas sugeridas o iniciadores de conversación) son mensajes de un solo clic que se muestran antes de que el visitante escriba algo. Se encuentran en Canales → Widget de chat → Botones y formularios → Acciones rápidas.

Utilice Agregar botón para un elemento nuevo, arrastre el control de la izquierda para reordenarlo y luego seleccione Guardar cambios. Generar con IA crea un borrador a partir de las fuentes de datos del propio asistente; el interruptor superior mantiene ese conjunto actualizado automáticamente.

Los botones son visibles mientras la conversación sigue vacía. En cuanto el visitante envía el primer mensaje, pasan al menú de acciones junto al campo de entrada.

Dos detalles importantes: una Action Bar activa sustituye a los botones de sugerencia, por lo que debe utilizarse una opción u otra. Por otro lado, el chat integrado mantiene sus propios botones en Canales → Chat integrado; este ajuste no se aplica allí.

Action Bar

La Action Bar muestra acciones fijas en la parte inferior del chat. Cuando está activa, sustituye a los botones de sugerencia. Según el tipo de elemento, puede abrir un enlace, WhatsApp, una página integrada de Calendly o un formulario personalizado.

Formularios

Cree formularios, añada y reordene campos, configure valores obligatorios y personalice el botón de envío y el mensaje de éxito. Los datos enviados se guardan en el panel de Leads.

Consulte Action Bar y formularios para conocer los tipos de elementos, los tipos de campo, la traducción y la asignación de leads.

Advanced

Fuente de detección de idioma

Elija cómo detecta la traducción automática el idioma del visitante:

• Idioma del navegador utiliza la preferencia Accept-Language del navegador.
• Atributo HTML lang utiliza el valor <html lang="…"> de la página.

Utilice la opción HTML cuando cada página localizada declare su idioma correctamente y deba controlar el idioma del widget. Utilice el idioma del navegador cuando la página en sí no esté localizada de forma fiable.

Marca

Ocultar marca elimina la atribución de WebChatAgent cuando el plan actual lo permite. El panel muestra claramente si la marca está actualmente visible u oculta.

CSS personalizado

El CSS personalizado se inyecta en el widget y tiene prioridad sobre los estilos integrados sin necesidad de !important. El editor ofrece ajustes predefinidos iniciales y una lista de selectores .wca-* estables. También muestra el límite de caracteres y aplica los cambios a la vista previa en tiempo real.

Solo los selectores documentados constituyen un contrato estable. Consulte CSS personalizado para ver la tabla de selectores y ejemplos.

Test and publish

1. Utilice Prueba tu chatbot después de realizar cambios de contenido o comportamiento.
2. Revise el estado de bienvenida, una respuesta real, los orígenes, los botones de sugerencia, los formularios y la carga de archivos según corresponda.
3. Haga clic en Guardar cambios.
4. Abra el sitio web real en escritorio y móvil.
5. Utilice Comprobar instalación si el widget no aparece como no detectado.

La vista previa del panel es útil, pero el sitio real es determinante para el z-index, los avisos de cookies, las compensaciones adaptables, las fuentes y las reglas de visibilidad específicas de cada página.