Cómo personalizar e insertar un widget de chatbot con IA
Una guía detallada para principiantes con vista previa de marca real, respuesta basada en fuentes y código de inserción listo para producción en widget flotante.
Al personalizar un widget de chatbot con IA, los objetivos de marca y conversión deben mantener la accesibilidad, la facilidad de uso en móviles y unas expectativas claras para el visitante.
Un widget de chat útil debe integrarse visualmente en el sitio web, explicar lo que puede hacer y no obstaculizar los controles esenciales de la página. Widget Integration divide estas opciones en Appearance, Images, Content & Behavior, Positioning, Triggers, Action Bar y Advanced.
Esta guía se basa en la interfaz actual en inglés Light Mode y en un ejemplo concreto denominado Tutorial Lab. El widget utiliza un encabezado azul oscuro, una burbuja azul para el visitante, un botón de sugerencia directa y una respuesta real sobre el horario de atención respaldada por fuentes. Cada ajuste visible está conectado con la experiencia del visitante a la que afecta.
Utiliza los controles integrados antes de recurrir a Custom CSS. Son más fáciles de entender, más seguros ante futuras actualizaciones del widget y suficientes para la mayoría de sistemas de marca. Haz una vista previa en el panel de control y luego repite la prueba completa en una página de prueba (staging) tanto en escritorio como en móviles antes de pasar a producción.
Reproductor en dos clics que protege la privacidad
Cómo personalizar un widget de chatbot con IA (Diseño e inserción)
Personaliza tu widget de chatbot: colores, tipografía, mensaje inicial, modo móvil, botones de sugerencia, accesibilidad y código embed.
El reproductor de YouTube permanece bloqueado hasta que pulsa Reproducir. Al cargarlo, su navegador se conecta a YouTube y puede transmitir datos técnicos a Google.
Abrir directamente en YouTubeQué obtendrá al final
- Un tema legible y alineado con la marca con roles de color definidos
- Imágenes optimizadas para el avatar, el botón de apertura y la bienvenida
- Un flujo de bienvenida claro con un botón de sugerencia útil
- Márgenes independientes para escritorio y móvil que evitan controles críticos
- Una respuesta real respaldada por fuentes verificada en el widget del visitante
- Un código de inserción flotante completo instalado una sola vez y actualizado desde el panel
Antes de empezar
- Los códigos hexadecimales exactos de los colores de la marca
- Un contraste mínimo de 4.5:1 para texto normal
- Imágenes opcionales y optimizadas para avatar, botón de apertura y bienvenida
- Una página de prueba (staging) y su nombre de host exacto en la lista de permitidos
- Un dato real respaldado por las fuentes y una pregunta no cubierta a propósito
Diseña la estructura, guía la primera acción y comprueba la respuesta
Appearance e Images definen el reconocimiento visual. Content & Behavior configura la primera interacción, mientras que Positioning mantiene el botón de apertura y el panel desplegado lejos de la navegación, el proceso de compra y los avisos de consentimiento.
El widget flotante lee su configuración guardada a través del identificador del chatbot. Inserta el código una sola vez y publica los cambios visuales o funcionales posteriores directamente desde el panel sin modificar el fragmento HTML.
01–06
Configuración paso a paso
Define tamaño, tema, tipografía y cada rol de color
Crea un sistema visual legible en lugar de elegir colores de forma aislada.
Abre tu asistente y dirígete a Widget Integration → Appearance. Comienza definiendo Widget Width y la altura opcional Height, luego elige Theme, Font Family y Chat Title. Tutorial Lab utiliza el tema Modern y el título “Tutorial Lab”; dejar la altura opcional permite que el widget use su valor adaptable predeterminado.
Asigna los colores según su función: fondo y texto del encabezado, fondo y texto de la burbuja del bot, fondo y texto de la burbuja del visitante, así como fondo e icono del botón de apertura. El ejemplo usa un encabezado azul marino oscuro con texto blanco y una burbuja de visitante en azul intenso. Comprueba cada combinación de fondo y texto en la vista previa renderizada, no solo en el selector de color. El texto normal debe alcanzar al menos un contraste de 4.5:1.
- Título de ejemplo: Tutorial Lab
- Tema: Modern
- Burbuja del visitante: azul de marca con texto legible
- Comprobación: encabezado, ambos tipos de burbuja, botones y estado de foco
Selecciona la imagen adecuada para avatar, botón de apertura y bienvenida
Cada elemento gráfico cumple una función y tiene requisitos de tamaño específicos.
Accede a Images. Avatar Image se muestra junto a los mensajes del asistente, Chat Button Image sustituye el icono predeterminado del botón de apertura y Welcome Image aparece en la pantalla inicial vacía. Evita subir un logotipo apaisado en todos los campos; recorta un recurso específico para cada ubicación.
Usa archivos PNG o WebP optimizados con una silueta nítida. Mantén el avatar y el botón de apertura en formato cuadrado, comprueba la transparencia sobre fondos claros y oscuros, y evita incluir texto diminuto dentro de los iconos. El ejemplo capturado deja las imágenes opcionales en blanco, lo cual es totalmente válido si el icono predeterminado WebChatAgent resulta más claro que una imagen personalizada poco definida.
- Avatar: reconocible al tamaño de visualización en el mensaje
- Botón de apertura: silueta clara sin texto pequeño
- Bienvenida: contexto útil, no solo un adorno
Configura el comportamiento de apertura, visibilidad y sugerencias
Cada opción modifica la primera interacción del visitante.
Abre Content & Behavior. Elige si el widget debe estar desactivado en el sitio web, abierto de inicio, oculto en móviles o si debe mostrar las fuentes de información. Revisa también el uso de micrófono, la traducción automática, la burbuja de llamada a la acción y las exclusiones de rutas. Modifica un comportamiento a la vez y comprueba el resultado visual.
Redacta un texto de bienvenida breve que aclare la función del asistente. Los botones de sugerencia no se configuran en esta pestaña: se gestionan en Buttons & forms, dentro de la sección Quick actions. Añade dos o tres opciones con una intención clara. “Which plan is right for me?” aporta más contexto útil que “Learn more.” Evita abrir automáticamente un panel grande en cada página; utiliza Triggers solo tras haber probado los tiempos, las páginas asignadas, el cierre manual y la frecuencia en una sesión limpia.
- Sugerencia: Which plan is right for me?
- Fuentes: actívalas únicamente si aportan valor a los visitantes
- Auto Translate: prueba el comportamiento según el idioma del visitante
- Rutas excluidas: pasarelas de pago, área de cuenta y flujos sensibles si corresponde
Configura los márgenes de escritorio y móvil de forma independiente
Evita que el botón de apertura y el panel desplegado tapen elementos clave.
Abre Positioning. Desktop Offsets y Mobile Offsets son distancias independientes respecto a la esquina seleccionada. Tutorial Lab usa 20 píxeles desde la derecha y desde abajo en ambas disposiciones como punto de partida neutral.
No te limites a probar el botón cerrado. Abre el widget completo en el ancho de pantalla más estrecho que admitas, con el banner de cookies visible, la barra de navegación del navegador móvil expandida y cualquier menú fijo, carrito o botón de compra en pantalla. Aumenta la distancia necesaria hasta que el botón y el panel abierto sigan siendo accesibles sin ocultar las acciones principales.
- Margen base en escritorio: derecha 20 px · abajo 20 px
- Margen base en móvil: derecha 20 px · abajo 20 px
- Prueba: botón de apertura cerrado y panel abierto completo
Comprueba el widget real del visitante con una respuesta basada en fuentes
Una vista previa atractiva no basta si la conversación falla.
Haz clic en Test Your Chatbot para abrir la vista previa autenticada del visitante. Revisa el título, la burbuja azul del usuario, la legibilidad de las respuestas del asistente, los botones de sugerencia, el campo de texto, el botón de cierre y la marca. Pruébalo tanto con el ratón como con el teclado: el indicador de foco debe ser siempre visible y volver al punto correcto tras cerrar la ventana.
El ejemplo validado consulta “What are the support hours?” El widget real responde que el horario de atención de Northstar Services es de lunes a viernes, de 8:00 AM a 6:00 PM hora central europea (CET). Esto confirma tanto el diseño guardado como una respuesta respaldada por la base de conocimiento. Haz una prueba adicional con una pregunta no documentada para comprobar que los mensajes de respuesta predeterminados sigan siendo legibles.
- Pregunta exacta: What are the support hours?
- Respuesta obtenida: Monday–Friday, 8:00 AM–6:00 PM CET
- Verificación: diseño guardado junto con respuesta real respaldada en fuentes
Copia e inserta el código completo del widget flotante
Se requiere un script asíncrono y una etiqueta HTML específica del chatbot.
Baja hasta el bloque de código en Widget Integration y copia todo el fragmento HTML, no únicamente el ID del chatbot. El bloque carga el script WebChatAgent de forma asíncrona y crea el elemento personalizado `web-chat-agent` con el identificador de este asistente. Pégalo justo antes de la etiqueta de cierre `body` o en la sección de código personalizado global de tu CMS.
Añade los dominios exactos de pruebas y producción en Allowed Websites antes de comenzar las pruebas. Si tu política de cookies bloquea widgets de terceros no esenciales, carga el script solo tras recibir el consentimiento adecuado; si consideras el widget un servicio esencial de soporte, documenta ese criterio y el flujo de datos. Comprueba que no existan scripts duplicados, errores en la consola ni bloqueos por Content Security Policy (CSP).
Los cambios guardados en el widget se aplican directamente en el elemento web existente. No es necesario reinstalar el código de inserción tras modificar colores, sugerencias o márgenes. Solo deberás sustituirlo si cambias intencionadamente de ID de chatbot o de tipo de integración.
- Instalación única: script asíncrono + elemento web-chat-agent
- Seguridad: dominios exactos en Allowed Websites
- Privacidad: aplica la política de consentimiento documentada
- Control de calidad: sin scripts duplicados, errores de consola ni bloqueos de CSP
Ejemplo y resultado
Vea la prueba práctica y su resultado
Cada tutorial incluye un caso de entrada definido, el resultado previsto y un registro transparente de las comprobaciones realizadas.
Ejemplo práctico: Personalizar un widget de chatbot con IA: guía completa de diseño, comportamiento e inserción
Este escenario exacto se completó con la cuenta temporal del tutorial.
Entrada exacta de la prueba
Change the title to “Tutorial Lab”, use a blue user bubble, copy the floating embed and open the live preview.
Resultado previsto
El widget en vivo refleja el diseño, el código contiene el ID de chatbot correcto y una pregunta real recibe una respuesta legible.
Qué se comprobó realmente
La vista previa guardada mostró Tutorial Lab, el color azul en los mensajes del usuario y una respuesta basada en fuentes; el script asíncrono completo y el elemento web-chat-agent se verificaron en Widget Integration.
Consejos útiles
Consiga una configuración fiable
Pruebe con ejemplos realistas, guarde su punto de partida y modifique un solo ajuste cada vez para evaluar las mejoras con claridad.
Empieza por los controles integrados
Recurre a Custom CSS solo para ajustes específicos; los colores y márgenes predeterminados son más estables frente a futuras actualizaciones.
Los botones de sugerencia deben reflejar una intención clara
“Compare plans” es más específico que “Learn more” y ofrece al chatbot un contexto útil de inmediato.
Verifica el contenido antes de perfeccionar el aspecto visual
Un diseño impecable no compensa la falta de respuestas adecuadas. Comprueba primero las respuestas clave y define después el texto de bienvenida, las sugerencias y los recursos visuales.
Elige el modelo según la conversación, no por la estética
Utiliza un modelo rápido y económico para la atención habitual y evalúa un modelo superior solo si las preguntas de prueba fijas muestran una mejora de calidad demostrable.
Si algo no funciona
Resolución de problemas
Revise el estado, los permisos y los datos de prueba de forma sistemática antes de cambiar el modelo o la instrucción.
El widget no se muestra en el sitio web
Revisa que el dominio exacto esté añadido en Allowed Websites, comprueba que el script completo y el elemento personalizado estén insertados una sola vez, y revisa posibles bloqueos de consentimiento, directivas de Content Security Policy (CSP) o errores en la consola del navegador.
El widget se superpone al aviso de cookies o al botón de compra
Abre Positioning, ajusta por separado los márgenes inferior y derecho para escritorio y móvil, y vuelve a probar el panel abierto completo en la resolución de pantalla más pequeña que admitas.
Los colores guardados dificultan la lectura de los mensajes
Revisa el color de texto asignado al encabezado o a la burbuja correspondiente, mide el contraste entre el texto y el fondo renderizado y asegúrate de mantener una relación de al menos 4.5:1 para texto normal.
Listo para una prueba tipo producción
Publica el diseño en un entorno de pruebas (staging) y documenta una lista de comprobación que cubra escritorio, móvil, navegación por teclado, interacción táctil, consentimiento, respuestas conocidas, consultas sin respuesta y textos extensos. Repite estas comprobaciones tras cualquier cambio relevante en el widget o en el diseño del sitio web.