Skip to main content

​
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 sección de configuración del widget.
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
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

Buscá la sección Widget

Desplazate hacia abajo en la página del agente hasta encontrar la sección de configuración del widget con las opciones de personalización.
3

Realizá los cambios

Modificá los campos que necesites. Si el wizard está disponible, 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 del chat

El lead form es un formulario opcional que aparece antes de que el visitante pueda escribir. Cuando está activado, el visitante debe completar sus datos de contacto antes de iniciar la conversación. Para activarlo:
  1. Entrá al detalle del agente.
  2. En la sección de configuración del widget, activá la opción Capturar leads antes del chat.
  3. Elegí qué campos mostrar: nombre, email y/o teléfono.
  4. Guardá los cambios.
Los datos quedan registrados automáticamente en la sección Leads del portal.
El lead form es especialmente útil cuando querés identificar a los visitantes desde el primer mensaje. Si preferís que el visitante chatee de forma anónima y luego decida compartir sus datos, dejalo desactivado.

​
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 necesitás apariencias distintas para diferentes sitios, podés 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.
El widget aparece en todas las páginas donde está instalado el snippet. Si necesitás ocultarlo en páginas específicas, podés condicionar la carga del script con JavaScript en tu sitio. Por ejemplo:
<script>
  if (!window.location.pathname.startsWith('/admin')) {
    // cargar el snippet aquí
  }
</script>