Saltar al contenido principal

​
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 Personalizar.
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 foreground (en Branding → Colores) es el color de los textos, íconos y otros elementos que se muestran sobre el color primario (en el header y el botón de envío). Por defecto es blanco y puedes cambiarlo con el selector de color. Si creaste el agente con la URL de tu sitio, el asistente de creación lo elige según la luminosidad del color primario detectado: oscuro si el primario es claro, blanco si es oscuro, para garantizar contraste.

​
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 — Default, Serif, Monoespaciada o Poppins.
  • Redondeo del panel — un slider de 0 a 24px para las esquinas del panel del widget.
  • Densidad de mensajes — Cómoda o Compacta, para controlar el espaciado entre mensajes.

​
Nombre del agente y mensaje de bienvenida

Estos campos viven en la sub-sección Textos (ver tabla más abajo), no en Interfaz:
  • Nombre del agente — el nombre del bot que aparece en el header del widget. 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 (Bot Avatar)

En Branding → Bot Avatar eliges la imagen que aparece junto a las burbujas de respuesta del bot. Tienes dos opciones:
  • Logo: usa el logo que subiste en Branding → Logo.
  • Custom: sube una imagen propia (PNG, JPG, SVG o WebP, de hasta 2 MB).
Puedes elegir si se muestra en Forma circular. Si no hay ninguna imagen, se muestra el ícono de chat sobre el color primario. El Bot Avatar solo afecta a las burbujas de respuesta: el header del widget usa siempre el Logo (sección Header Icon), y el botón flotante que abre el chat se configura aparte en Chat Button (imagen y tamaño).

​
Ocultar el botón con el chat abierto

En Branding → Chat Button, el interruptor Ocultar con el chat abierto hace que el botón flotante desaparezca mientras el chat está abierto: el panel del chat baja y ocupa su lugar, y el visitante lo cierra con la X del encabezado. Con el chat cerrado, el botón se ve como siempre. Viene apagado.

​
Foto y nombre del operador

Cuando una persona de tu equipo responde una conversación del widget, el visitante ve por defecto el ícono 🎧 y el nombre del bot. Si activas Mostrar foto y nombre del operador en Branding → Operador humano, el widget muestra la foto de perfil y el nombre de pila de quien responde. Viene apagado. Cada persona sube su foto en Mi cuenta → Perfil (ver Gestionar tu cuenta).

​
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 (hasta 6). Se configuran en Textos → Quick replies. Cada respuesta rápida puede llevar, opcionalmente, un ícono — hay un selector de emojis integrado para elegirlo sin salir del formulario.

​
Respuestas rápidas flotantes

También puedes mostrar las respuestas rápidas como botones sobre el ícono del chat cerrado, para que el visitante empiece a conversar sin abrir el widget primero. Al tocar una, se abre el chat y se envía esa pregunta (apenas el chat está listo, por ejemplo después de un Lead Form obligatorio). En Textos, activa Mostrar sobre el ícono del chat en escritorio y/o en móvil, y elige:
  • Comportamiento — mostrar una vez cada 24 horas por visitante, o en cada visita.
  • Duración del retraso — segundos desde que carga la página hasta que aparecen los botones (0 = inmediatamente).
Sobre el ícono se muestran solo las primeras 3 respuestas rápidas. Si el mensaje flotante también está activo, los botones aparecen debajo de él, con su mismo estilo y frecuencia, pero cada uno con su propia espera (por ejemplo, el mensaje a los 2 s y los botones a los 4 s). La × cierra los dos.

​
Texto de carga

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

​
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 Personalizar

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. La vista previa también muestra el chat cerrado, con el mensaje flotante y los botones flotantes (sin la espera, para que los veas al instante).
4

Guarda

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

​
Qué incluye Configurar

La sub-sección Configurar agrupa el resto de los toggles de comportamiento:

​
Mensaje flotante

El mensaje flotante aparece sobre el ícono del chat cerrado. Hacer clic en el mensaje abre el chat; la × solo lo cierra (y queda siempre visible, también en pantallas táctiles). Se configura en Configurar → Mensaje flotante:
Si la apertura automática abriría el chat antes de que aparezca el mensaje flotante (o los botones flotantes), la pestaña te muestra un aviso para que ajustes las esperas. La apertura automática ya no silencia el mensaje flotante para siempre: solo abrir el chat a mano o cerrarlo lo silencia por 24 horas.
Los campos de esta tabla no siguen necesariamente el mismo orden dentro de la pestaña Configurar 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. Se aceptan PNG, JPG, SVG o WebP de hasta 2 MB. Si activas Forma circular, el widget la recorta en círculo.
Sí, sin tocar código: desde Personalizar → Visibilidad → Ocultar en páginas específicas 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.