Tema y Apariencia
La página de Tema es donde le das a tu asistente su identidad visual: nombre, avatar, colores de la marca, y eliges los canales donde estará disponible. Todo se previsualiza en vivo en la misma página, para que puedas iterar sin salir del panel de control.
Haz que tu agente de IA se vea acorde a la marca · Tema + widget GDPR
→ Ruta de administración: Personalización → Tema (/admin/chatModel/{id}/settings/theme)
Lo que configuras
La página está organizada en tres pasos. Puedes avanzar y retroceder en cualquier momento; los cambios en el paso 2 se guardan cuando presionas Guardar y Siguiente.
Paso 1 — Identidad
- Nombre — el nombre público de tu asistente (por ejemplo, "Emma", "Bot de Soporte"). Visible en todas partes donde tu asistente interactúa con los usuarios.
- Avatar — la imagen que los usuarios ven en el encabezado del chat y en los globos de mensaje. Sube una imagen cuadrada; nosotros la redimensionamos y la servimos desde nuestro CDN.
El nombre es cómo tus usuarios se dirigen al bot. Elige algo acorde a la marca y fácil de escribir; se convierte en la identidad del asistente en todos los canales.
Paso 2 — Colores
Dos colores definen toda la paleta del widget:
| Color | Dónde se muestra |
|---|---|
Primario (brand.200) | Fondo del botón flotante, acentos de los globos de mensaje, estados de hover |
Secundario (brand.500) | Botón de enviar, enlaces dentro de la conversación, anillos de enfoque, estados activos |
Ambas entradas aceptan cualquier valor HEX. La vista previa en vivo en la parte inferior de la página refleja tus cambios en tiempo real, para que puedas elegir una pareja que se vea bien en tu sitio antes de guardar.
¿Por qué solo dos colores? Nuestro sistema de diseño deriva una paleta completa de 5 pasos (100/200/500/700/900) de estos dos anclajes. Tú estableces el tono; nosotros mantenemos el resto consistente.
Paso 3 — Integrar
Una vez que tu asistente se vea bien, salta directamente al canal de integración de tu elección:
- Widget Web — código de inserción para cualquier sitio web, con controles completos de botón y diseño
- WordPress — inyección automática a través del plugin de WordPress
- PrestaShop — inyección automática a través del módulo de PrestaShop
- Shopify — conecta tu tienda e inyecta el chatbot automáticamente
- Joomla — inyección automática a través del plugin de Joomla
Cada tarjeta te lleva a la página de integración dedicada donde ajustas el estilo del botón, la posición, el modo de retroalimentación, las características de voz y el comportamiento específico del canal.
Vista previa en vivo
Un widget de chat en vivo se renderiza en la misma página de Tema. Se vuelve a inyectar automáticamente cada vez que cambias un color, para que veas el renderizado exacto que obtendrán tus usuarios finales; no es necesario publicar ni abrir otra pestaña.
La vista previa utiliza el mismo paquete universal-chatbot.js que la producción, por lo que lo que ves es lo que verán tus visitantes.
Permisos
| Acción | Permiso requerido |
|---|---|
| Ver la página de Tema | THEME_READ |
| Cambiar colores / guardar tema | THEME_UPDATE |
| Renombrar al asistente | CHAT_MODEL_UPDATE |
Los miembros sin THEME_UPDATE ven la página en modo solo lectura (entradas deshabilitadas, sin botón de Guardar). Consulta Control de Acceso para saber cómo asignar estos permisos.
Consejos
- Prueba en tu fondo real. Abre tu sitio en una segunda pestaña mientras eliges colores; lo que se ve bien en el panel de control puede chocar con tu sección principal.
- Mantén el contraste. El color secundario también se utiliza para texto clicable en la conversación. Si los usuarios no pueden leerlo, no harán clic.
- Ajusta tu CTA, no tu logo. El widget es una superficie interactiva, así que ancla el color de acción de tu sitio (el tono de "Comprar ahora" / "Registrarse") en lugar del color de tu logo.
- El avatar importa más de lo que piensas. Una cara real o un personaje estilizado convierte mejor que un ícono de robot genérico; los usuarios abren el chat más cuando se ve humano.
Relacionado
- Biografía — define la personalidad y las reglas de decisión de tu asistente
- Integrando el Chatbot — insértalo en un sitio web
- Canales — conecta plataformas de mensajería
- Control de Acceso — gestiona quién puede editar el tema