Skip to main content

​
Personalizar el widget

El widget de ChatNorris es completamente personalizable. Puedes 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.
TODO: captura del widget flotante personalizado sobre un sitio web

​
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
Puedes 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.

​
Fondo del chat

Además del color primario, puedes personalizar el fondo del panel de conversación: color sólido o degradado (dos colores). Se configura desde Branding → Fondo del chat.

​
Apariencia avanzada

Dentro de Branding → Apariencia avanzada puedes ajustar, más allá de los colores:
  • Tipografía — por defecto, serif, mono o redondeada.
  • Redondeo del panel — un slider de 0 a 24px para las esquinas del panel del widget.
  • Densidad de mensajes — cómodo o compacto, para controlar el espaciado entre mensajes.

​
Título del header, nombre del agente y mensaje de bienvenida

Estos tres campos viven en la sub-sección Texts (ver tabla más abajo), no en Interface:
  • 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?".
  • 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".
  • Mensaje de bienvenida — el primer mensaje que el agente envía automáticamente al abrir el widget. Ejemplos: "¡Hola! ¿En qué puedo ayudarte hoy?", "Hola 👋 Estoy aquí para responder tus dudas sobre nuestros productos."

​
Avatar del agente

La imagen de perfil circular que aparece junto a los mensajes del agente. Tienes dos opciones:
  • Sin imagen: se muestra la inicial del nombre del agente sobre un fondo de color.
  • Imagen personalizada: sube un archivo PNG o JPG. Recomendamos una imagen cuadrada de al menos 100×100 px.

​
Quick replies (respuestas rápidas)

Botones de sugerencia que aparecen debajo del mensaje de bienvenida para que el visitante inicie la conversación con un clic. Se configuran en Texts → Quick replies. Cada respuesta rápida puede llevar, opcionalmente, un ícono — hay un selector de emojis integrado para elegirlo sin salir del formulario.

​
Texto de carga

El texto que se muestra mientras el agente está generando una respuesta (por defecto algo como “Escribiendo…”). Personalizable desde Texts → Texto de carga, hasta 60 caracteres. Texto libre en el pie del widget, configurable desde Texts → Footer text.

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

1

Ve al detalle del agente

En el menú lateral, haz clic en Agentes y luego en el agente que quieres modificar.
2

Entra a la pestaña Customize

Ahí vas a encontrar cinco sub-secciones:
3

Realiza los cambios

Modifica los campos que necesites. Los cambios se reflejan en la preview en tiempo real.
4

Guarda

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

​
Qué incluye Configure

La sub-sección Configure agrupa el resto de los toggles de comportamiento:
Los campos de esta tabla no siguen necesariamente el mismo orden dentro de la pestaña Configure del portal — están agrupados en bloques (branding/marca, calificación de respuestas, y “Otras configuraciones” que junta archivos adjuntos, fuentes de IA y Google Analytics).
No necesitas volver a instalar el snippet en tu sitio cuando cambias la personalización. El widget carga su configuración de forma dinámica desde los servidores de ChatNorris.
En el widget web, los enlaces que el agente comparte en sus respuestas ([texto](URL)) se muestran como hipervínculos reales, clicables y que abren en una pestaña nueva — y el texto en **negrita** se muestra en negrita. El agente decide cuándo usar este formato; no es algo que configures manualmente. Este formato solo se renderiza en el widget web: en WhatsApp, Instagram y Telegram las respuestas se envían como texto plano.
Si el visitante recarga la página mientras tiene una conversación abierta, el widget restaura automáticamente el historial de mensajes (y cualquier formulario de Lead Form pendiente) al volver a cargar — no hace falta que el visitante retome la conversación desde cero.

​
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 Agentes → [tu agente] → Acciones → Lead Form, donde puedes 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

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.
Actualmente, cada agente tiene una única configuración de widget. Si necesitas apariencias distintas para diferentes sitios, puedes crear agentes separados con configuraciones visuales diferentes y usar el snippet correspondiente a cada uno.
Recomendamos una imagen cuadrada de al menos 100×100 px en formato PNG o JPG. El widget la recorta en forma circular automáticamente.
Sí, sin tocar código: desde Customize → Visibility → Hide on specific pages puedes indicar en qué páginas de tu sitio el widget no debe mostrarse. También puedes definir un horario de visibilidad desde la misma sección.