Personalización del widget
Haga que el widget de chat coincida con su marca y se comporte exactamente como usted desea. Toda la personalización se realiza en su panel — los cambios se aplican a su sitio web automáticamente, sin tocar el código de inserción.
Encontrará la configuración en Dashboard → Chatbots → seleccione su chatbot:
- La pestaña Widget controla la apariencia (posición, colores, tamaño, textos)
- La pestaña Behavior controla cómo interactúa el widget con los visitantes
Haga clic en Save Changes en la parte superior de la página para aplicar sus ediciones.
Pestaña Widget: Apariencia
Posición
Elija dónde aparece el widget en su sitio web:
| Posición | Descripción |
|---|---|
| Bottom Right | Burbuja de chat flotante en la esquina inferior derecha (predeterminado) |
| Bottom Left | Burbuja de chat flotante en la esquina inferior izquierda |
| Inline (Embedded) | El widget se incrusta directamente en la página en lugar de flotar |
Con la posición Inline, el chat se incrusta en el punto donde se coloca el script de inserción y permanece siempre abierto — sin burbuja, sin botón de cierre. Ideal para páginas dedicadas de chat o soporte. Vea Widget Embedding para más detalles.
Tema de color
Elija uno de tres ajustes preestablecidos de color:
| Preajuste | Descripción |
|---|---|
| Default | El esquema de colores estándar de ChatReact |
| Brand | Los colores de la marca de su empresa desde Company Settings |
| Custom | Elija sus propios colores |
El preajuste Brand solo está disponible una vez que se hayan establecido los colores de la marca. Vaya a Company Settings para extraer los colores de su sitio web.
Con Custom seleccionado, puede establecer cuatro colores base:
- Primary — burbuja, degradado del encabezado, botones y mensajes del visitante
- Secondary — segundo color del degradado del encabezado
- Background — fondo de la ventana de chat
- Text — color del texto de los mensajes
Configuración avanzada de colores
¿Necesita más control? Con el preajuste Custom seleccionado, expanda Advanced Color Settings para anular los colores calculados automáticamente:
- Visitor Messages — color de fondo y texto de las burbujas de mensajes del visitante
- Bot Messages — color de fondo y texto de las burbujas de mensajes del bot
- Header Text Color — color del título y subtítulo en el encabezado del widget
Todo lo que deje sin tocar se calcula automáticamente para obtener buen contraste. Cada anulación tiene un botón Reset to automatic para volver al color calculado.
Tamaño y estilo
| Configuración | Rango | Predeterminado |
|---|---|---|
| Border Radius | 0–32 px | 24 px |
| Width | 300–500 px | 380 px |
| Height | 400–700 px | 600 px |
En pantallas móviles pequeñas, el widget cambia automáticamente a un diseño de ancho completo, independientemente de estas dimensiones.
Logotipo
Active Use company logo in widget header para mostrar el logotipo de su empresa en el encabezado del chat. El logotipo se sube en Company Settings — recomendado: cuadrado, al menos 200×200 px (JPG, PNG, GIF, WebP o SVG, máx. 5 MB).
Esta opción está disponible en el plan Professional y superiores, y en todos los planes Agency.
Título del encabezado, subtítulo y texto de la burbuja
| Campo | Descripción | Predeterminado |
|---|---|---|
| Header Title | Título que se muestra en el encabezado de la ventana de chat | "Chat with us" |
| Header Subtitle | Línea más pequeña debajo del título | "We typically reply within minutes" |
| Bubble Text | Texto mostrado junto a la burbuja de chat cuando el widget está cerrado | None |
Si nunca configura un título o subtítulo, el widget muestra el texto predeterminado — localizado automáticamente al idioma de cada visitante.
Cómo funciona el subtítulo del encabezado: Mientras no haya configurado un subtítulo, el widget mostrará el predeterminado localizado, y el formulario de configuración rellenará este valor predeterminado para que pueda ver y editar lo que recibirán los visitantes. Para ocultar completamente el subtítulo, borre el campo y guarde — un subtítulo intencionalmente vacío permanecerá oculto.
El texto de la burbuja aparece como una etiqueta pequeña junto a la burbuja de chat cerrada (por ejemplo, "Got questions?"). Déjelo vacío para mostrar solo la burbuja redonda.
Traducciones del widget
Si su chatbot admite varios idiomas, aparecerá una tarjeta Widget Translations debajo de la configuración de apariencia. Allí puede traducir el mensaje de bienvenida, el mensaje de fallback, el título del encabezado, el subtítulo del encabezado y el texto de la burbuja para cada idioma habilitado.
Los mensajes de bienvenida y de fallback en sí se configuran en la pestaña Persona de la configuración de su chatbot.
Vista previa en vivo
La columna derecha de la pestaña Widget muestra una Live Preview de su widget que se actualiza a medida que cambia la configuración. Es interactiva: cierre la ventana de chat con la X para ver la burbuja cerrada (incluido su texto de burbuja), y haga clic en la burbuja para abrirla de nuevo.
Pestaña Behavior: Interacción
Configuración de comportamiento
| Configuración | Descripción | Predeterminado |
|---|---|---|
| Proactive Greeting | El bot saluda automáticamente a los visitantes después de un retraso (1–10 segundos) | On, 3 s |
| Auto-Open | El widget se abre automáticamente para los visitantes después de un retraso (1–15 segundos) | Off, 5 s |
| Sound Enabled | Reproducir sonidos para notificaciones | On |
| Typing Indicator | Mostrar una animación mientras el bot escribe | On |
| Pre-Chat Form | Capturar información del visitante antes de que comience el chat | Off |
| Show on Mobile | Mostrar el widget en dispositivos móviles | On |
Longitud máxima de mensaje
Limite cuántos caracteres pueden introducir los visitantes por mensaje (100–10,000 caracteres, predeterminado 2,000). Esto ayuda a prevenir un uso excesivo por entradas muy largas. Borre el campo o haga clic en Remove limit para permitir mensajes de cualquier longitud.
Formulario previo al chat
Cuando el formulario previo al chat está habilitado, los visitantes completan un breve formulario antes de que comience la conversación. Usted configura los campos:
- Tipos de campo: Text, Email, Phone, Textarea
- Cada campo tiene una label, un placeholder opcional y un interruptor required
- Reordene los campos con los botones mover arriba/abajo, o elimínelos
Si su chatbot admite varios idiomas, aparecerá una sección de traducciones debajo del editor de campos. Ingrese las traducciones para cada idioma manualmente, o haga clic en Translate with AI para traducir todas las etiquetas y placeholders automáticamente.
Chat en vivo
La pestaña Behavior también contiene la tarjeta Live Chat Settings. Habilite el chat en vivo para permitir que los visitantes hablen con sus agentes humanos y elija un modo:
| Modo | Descripción |
|---|---|
| Handoff Only | Chat en vivo solo cuando el bot no puede ayudar |
| Standalone | Los visitantes pueden chatear directamente con los agentes |
| Both | Disponible tanto el traspaso como el chat en vivo directo |
Live Chat está disponible en el plan Professional y superiores, y en todos los planes Agency. Vea Live Chat para saber cómo gestionar las conversaciones entrantes.
Branding
En los planes que incluyen white-label, aparece una tarjeta Branding en la parte inferior de la pestaña Behavior. La marca ChatReact está oculta por defecto en estos planes — active Show "Powered by ChatReact" si desea mostrarla en el pie del widget.
Fase de aprendizaje
Mientras un nuevo chatbot está en su fase de aprendizaje, puede controlar cuán cautelosamente responde — Cautious, Balanced (recomendado) o Confident — en la pestaña Confidence de la misma página de configuración. Esta pestaña aparece en los planes que incluyen el Improvement Agent. Consulte la guía del Improvement Agent para más detalles.