Personalizar el widget

Cómo ajustar los colores, avatar, textos y apariencia general del widget de ChatNorris.

Personalizar el widget

El widget de ChatNorris es completamente personalizable. Podés ajustar su apariencia para que combine con la identidad visual de tu empresa.

La personalización está disponible en dos momentos:

• Durante la creación del agente — en el paso 6 del wizard, con preview en tiempo real.
• En cualquier momento — desde el detalle del agente, en la pestaña Customize.

Opciones de personalización

Color primario

El color principal del widget. Se usa en:

• El fondo del header (barra superior del chat)
• El botón flotante que abre el widget
• El botón de envío de mensajes

Podés ingresar cualquier código de color hexadecimal (#RRGGBB) o usar el selector de color visual.

Si creaste el agente con la URL de tu sitio, ChatNorris detecta automáticamente el color primario de tu marca y lo aplica como valor inicial.

Color del texto

El color de los íconos y el texto que se superpone sobre el color primario (en el header y el botón de envío). ChatNorris lo calcula automáticamente según la luminosidad del color primario:

• Si el color primario es claro, el texto se vuelve oscuro para garantizar contraste.
• Si el color primario es oscuro, el texto se vuelve blanco.

Esto asegura accesibilidad sin que tengas que configurarlo manualmente.

Título del header

El texto principal que aparece en la barra superior del widget, visible desde que el visitante abre el chat.

Ejemplos: "Asistente de soporte", "Hola, ¿en qué te ayudamos?", "Atención al cliente 24/7"

Nombre del agente

El nombre del bot que aparece debajo del título en el header y como firma en cada mensaje del agente.

Ejemplos: "Sofía", "Asistente IA", "Bot de Empresa XYZ"

Avatar del agente

La imagen de perfil circular que aparece junto a los mensajes del agente. Tenés dos opciones:

• Sin imagen: se muestra la inicial del nombre del agente sobre un fondo de color.
• Imagen personalizada: subí un archivo PNG o JPG. Recomendamos una imagen cuadrada de al menos 100×100 px.

Mensaje de bienvenida

El primer mensaje que el agente envía automáticamente cuando el visitante abre el widget. Es lo primero que ve el usuario antes de escribir.

Ejemplos:

• "¡Hola! ¿En qué puedo ayudarte hoy?"
• "Bienvenido a [empresa]. Soy tu asistente virtual — preguntame lo que necesitás."
• "Hola 👋 Estoy aquí para responder tus dudas sobre nuestros productos."

Cómo editar la personalización después de la creación

1. Ve al detalle del agente

   En el menú lateral, hacé clic en Agentes y luego en el agente que querés modificar.

2. Entrá a la pestaña Customize

   Ahí vas a encontrar cuatro sub-secciones:

   Sub-sección	Qué incluye
   Branding	Logo, colores (primario y del texto), icono del header, avatar del bot.
   Configure	Ocultar el texto “Powered by ChatNorris”, calificación de respuestas de IA, descarga de la transcripción del chat, entrada de voz, adjuntar archivos, mostrar fuentes en las respuestas de IA, mensaje flotante (“hovering message”) y apertura automática del chat.
   Interface	Título del header, nombre del agente, mensaje de bienvenida y posición del widget en la pantalla.
   Visibility	Mostrar/ocultar el widget, definir un horario de visibilidad y ocultarlo en páginas específicas de tu sitio.

3. Realizá los cambios

   Modificá los campos que necesites. Los cambios se reflejan en la preview en tiempo real.

4. Guardá

   Hacé clic en Guardar. Los cambios se aplican de inmediato en el widget instalado en tu sitio.

No necesitás volver a instalar el snippet en tu sitio cuando cambiás la personalización. El widget carga su configuración de forma dinámica desde los servidores de ChatNorris.

Lead form — solicitar datos antes o durante el chat

El lead form ya no se configura desde la personalización del widget: ahora es una acción del agente. Se configura desde Chatbots → [tu agente] → Acciones → Lead Form, donde podés definir si es obligatorio, qué campos pedir, cuándo debe mostrarse y los textos del formulario.

Ver la guía completa en Acciones del agente.

Los datos quedan registrados automáticamente en la sección Leads del portal.

Preguntas frecuentes

¿Los cambios en el widget se aplican de inmediato?

Sí. Al guardar los cambios, el widget se actualiza en tu sitio web sin necesidad de reinstalar el código ni modificar nada en el HTML. Los visitantes que abran el widget por primera vez después del cambio verán la nueva configuración.

¿Puedo usar el mismo widget en varios sitios con apariencias distintas?

Actualmente, cada agente tiene una única configuración de widget. Si necesitás apariencias distintas para diferentes sitios, podés crear agentes separados con configuraciones visuales diferentes y usar el snippet correspondiente a cada uno.

¿Qué tamaño y formato debe tener el avatar?

Recomendamos una imagen cuadrada de al menos 100×100 px en formato PNG o JPG. El widget la recorta en forma circular automáticamente.

¿Puedo ocultar el widget en ciertas páginas?

Sí, sin tocar código: desde Customize → Visibility → Hide on specific pages podés indicar en qué páginas de tu sitio el widget no debe mostrarse. También podés definir un horario de visibilidad desde la misma sección.