Estilo y marca
El widget de chat es totalmente personalizable. Los ajustes están en dos lugares:
- Widget → Estilo — colores, fuentes, burbujas de mensajes, tamaño del widget, enlaces fijos y pie.
- Widget → Contenido — nombre del bot, saludo, avatar, idioma y texto de marca.
Cada cambio se muestra al instante en la Vista previa en vivo a la derecha, y la mayoría de los ajustes se guardan automáticamente mientras editas.
Tema
Elige Claro u Oscuro. Esto define el esquema de color base de todo el widget — fondo, texto, bordes y campos de entrada.
Elegir Oscuro no afecta el tema de tu propio sitio — solo al widget.
La cabecera conserva el color de tu marca en ambos temas, igual que la burbuja de lanzamiento. El tema es tu elección, no la del visitante: el widget está en tu sitio, y el modo oscuro del sistema de un visitante no dice nada sobre la página en la que se pegó.
Color del widget
El color de acento principal usado para la barra del encabezado, el botón de enviar y las burbujas del usuario. Haz clic en la muestra de color para abrir el selector, o escribe un valor hex directamente — por ejemplo #1a56db.
Color e icono de la burbuja de lanzamiento
El botón flotante que los visitantes pulsan para abrir el chat.
- Color — por defecto el color del widget si no se establece por separado.
- Icono — el icono de chat predeterminado, un emoji personalizado o una imagen PNG/SVG pequeña subida (recomendado: 40×40px).
Avatar del bot
Se muestra junto a cada mensaje del bot. Opciones:
- Emoji — cualquier carácter emoji. Simple y legible en tamaño pequeño.
- Imagen — sube un PNG o JPG. Se recorta en círculo. Tamaño recomendado: 80×80px.
Encabezado del chat
En el bloque Estilo → Encabezado del chat puedes establecer:
- Subtítulo — texto pequeño bajo el nombre del bot (p. ej. «Asistente IA» o el rol del bot).
- Color del nombre y Color del subtítulo — sobrescriben los colores del texto del encabezado.
- Tooltip de reinicio — la etiqueta del botón «Nueva conversación».
El nombre del bot y el mensaje de bienvenida (el primer mensaje que ven los visitantes) se establecen en Widget → Contenido. Mantén el saludo amistoso y orientado a la acción:
¡Hola! 👋 Soy tu asistente de soporte. Pregúntame lo que quieras sobre nuestros productos o servicios.
Burbujas de mensajes
En el bloque Estilo → Mensajes:
- Placeholder del campo — texto de ayuda en el campo (por defecto «Escribe un mensaje…»).
- Tamaño de fuente — tamaño base de la conversación.
- Burbuja del usuario — color de fondo y texto de los mensajes del visitante (activa Sobrescribir para fijar un fondo propio).
- Burbuja del bot — color de fondo y texto de las respuestas del bot.
Tamaño del widget
En Estilo → Tamaño del widget, arrastra los controles deslizantes para fijar las dimensiones de la ventana de chat:
- Ancho — de 240 a 520 px
- Alto — de 360 a 800 px
El tamaño que fijas aquí se aplica al widget incrustado en tu sitio, no solo a la vista previa del panel. En móvil el widget siempre se expande a pantalla completa.
Idioma del widget
Por defecto el widget detecta el idioma del visitante desde su navegador y localiza todas las etiquetas integradas (botones, campos de formulario, placeholders). Para forzar un idioma concreto, elígelo del desplegable Idioma en la pestaña Estilo (inglés, ucraniano, polaco, alemán, español, francés, italiano).
Esto controla solo las etiquetas de la interfaz del widget. El bot siempre responde en el idioma en que escribe el visitante.
Enlaces fijos
En Estilo → Enlaces fijos puedes fijar hasta 6 enlaces que aparecen con las respuestas del bot — útiles para una página de contacto, precios o una llamada a la acción «Reservar demo».
Para cada enlace fija una Etiqueta y una URL (solo http/https). También puedes controlar:
- Fondo / color de texto / tamaño — para que coincidan con tu marca.
- Ubicación — Bajo cada mensaje (debajo de cada respuesta) o Al final del chat (una barra fija sobre el campo de entrada).
HTML personalizado del pie
En Estilo → Pie del chat puedes añadir tu propio HTML bajo la conversación — un descargo, un enlace a la política de privacidad o el horario.
Por seguridad, solo se permiten estas etiquetas: <a>, <span>, <strong>, <em>, <b>, <i>, <br>. Los enlaces se abren automáticamente en una pestaña nueva.
El pie personalizado está disponible en el plan Business y superiores.
Marca
Por defecto aparece un pequeño enlace «Powered by BotChata» al final del widget.
Para reemplazarlo por tu propia marca, ve a Widget → Contenido:
- Nombre de marca personalizado — el nombre de tu empresa.
- URL de marca personalizada — enlaza el texto de marca a tu propio sitio.
Para ocultar la marca por completo, tu cuenta necesita un plan que incluya white-label (Enterprise/Agency). Consulta Planes y facturación.
Entrada de voz
Cuando el navegador del visitante admite reconocimiento de voz (Chrome, Edge, Safari), aparece automáticamente un icono de micrófono en el campo de entrada — sin configuración. El visitante puede dictar un mensaje, revisar la transcripción y editarla antes de enviar. En navegadores sin soporte (p. ej. Firefox) el micrófono se oculta silenciosamente.
Menú de acciones
Todo lo que el bot puede hacer vive en un solo menú: reservas, tu enlace de contacto, hablar con un agente y los formularios personalizados o widgets del constructor que expongas. Añade un elemento activando «Mostrar en el menú del widget» en un formulario personalizado (Formularios personalizados) o un widget del constructor (Constructor de widgets). Las reservas, el enlace de contacto y la transferencia aparecen solos cuando están activados, y el menú se oculta cuando no hay nada que mostrar.
El enlace de contacto se define en Widget → Contenido → Contact URL: mailto:support@yoursite.com, tel:+1234567890 o una página de tu sitio.
Estilo → Menú de acciones decide dónde se sitúa ese menú. Los tres diseños contienen los mismos elementos:
- Detrás de un + en el campo (por defecto) — un ＋ dentro del campo de mensaje abre la lista, y bajo el campo no hay nada.
- Botón Menú bajo el campo — un pequeño chip Menú bajo el campo abre la misma lista.
- Botones bajo el campo — las acciones mismas, como una fila de botones: un toque en lugar de dos. Solo con 1–3 acciones; por encima el widget vuelve solo al diseño del ＋, y regresa cuando de nuevo tengas pocas.