Los ajustes de apariencia controlan cómo se ve el widget de chat de tu chatbot para los visitantes en tu sitio web: el encabezado, los colores y las fuentes de los mensajes, el icono de inicio, la pantalla de bienvenida, el tamaño del widget y más. Aquí es donde haces que el widget se adapte a tu marca.
Necesitas un chatbot antes de poder personalizar su estilo. Si aún no has creado uno, comienza con Cómo crear tu primer chatbot.
Dónde encontrar los ajustes de apariencia
Selecciona tu chatbot y ve a Settings > Appearance (Ajustes > Apariencia). Desde la página principal de ChatLab, haz clic en Chatbots, abre tu chatbot, ve a la pestaña Settings (Ajustes) y luego elige Appearance (Apariencia) en el menú de la izquierda.
Aparecerá una vista previa en directo de tu widget en el lado derecho de la página, la cual se actualiza a medida que cambias la configuración.
Encabezado del chat (Chat Header)
Configura el aspecto de la sección superior del widget de chat:
- Chatbot name (Nombre del chatbot): el nombre visible que se muestra en el encabezado del chat (máx. 60 caracteres)
- Tagline (Subtítulo): subtítulo opcional que se muestra debajo del nombre del chatbot (máx. 60 caracteres)
- Avatar: sube una imagen personalizada que los clientes verán mientras interactúan con el chatbot. Usa el botón Remove (Eliminar), resaltado abajo, para borrar la imagen actual.
- Background (Fondo): color de fondo del área del encabezado
- Name color (Color del nombre): color del texto del nombre del chatbot
- Tagline color (Color del subtítulo): color del texto del subtítulo
- Reset conversation tooltip (Información sobre herramientas para reiniciar conversación): texto de ayuda que se muestra cuando los visitantes pasan el cursor sobre el botón de reiniciar conversación en el encabezado del widget (máx. 40 caracteres, por defecto "Reset conversation")
Mensajes (Message)
Personaliza el campo de entrada de texto y el aspecto de los mensajes de la conversación:
- Input placeholder (Texto de marcador de posición): texto de marcador de posición que se muestra en el campo para escribir un nuevo mensaje en la parte inferior del widget (máx. 50 caracteres, por defecto "Type a message..."). Úsalo para animar a los visitantes a empezar a escribir.
- User background (Fondo del usuario): color de fondo de los mensajes enviados por el visitante
- User text (Texto del usuario): color del texto de los mensajes del visitante
- Resp. background (Fondo de respuesta): color de fondo de las respuestas del chatbot
- Response text (Texto de respuesta): color del texto de las respuestas del chatbot
El tamaño del texto de los mensajes se define en la sección Tipografía, junto con la fuente del widget.
Preguntas sugeridas (Suggested Questions)
Las preguntas sugeridas son indicaciones listas para usar que el visitante puede pulsar para iniciar una conversación. Las preguntas en sí se redactan en Settings > Chat Conversation (Ajustes > Conversación del chat); aquí defines el aspecto visual de los botones:
- Background (Fondo): color de fondo de los botones de preguntas sugeridas
- Text (Texto): color del texto de los botones de preguntas sugeridas
- Stack (Apilar): al activarlo, las preguntas sugeridas más largas se apilan verticalmente en lugar de mostrar una barra de desplazamiento horizontal
El tamaño del texto de las preguntas sugeridas se define en la sección Tipografía.
Ajustes del modo minimizado
Controla cómo se muestra el widget de chat cuando está minimizado (antes de que el visitante abra el chat):
- Minimized display mode (Modo de visualización minimizado) - elige entre:
- Icon (Icono) - icono circular estándar para iniciar el chat (predeterminado)
- Minified chat bar (Barra de chat reducida) - barra compacta de entrada de texto que se muestra en la parte inferior de la página
- Icon with text (Icono con texto) - un iniciador más ancho con forma de píldora: el icono junto con un breve texto de dos líneas
- Icon color / Mini bar color (Color del icono / Color de la minibarra) - color del icono de inicio o del fondo de la minibarra
- Custom chat icon (Icono de chat personalizado; solo en modo icono) - actívalo para subir iconos personalizados de apertura y cierre del chat
- Position on screen (Posición en pantalla) - sitúa el widget a la izquierda o a la derecha de la pantalla
- Move up chat icon/bar by (Subir icono/barra de chat) - desplazamiento vertical en píxeles desde el borde inferior
- Move icon/bar left/right by (Mover icono/barra a la izquierda/derecha) - desplazamiento horizontal en píxeles desde el borde más cercano de la pantalla
Icon with text (Icono con texto)
El modo Icon with text añade un breve texto al iniciador, de modo que los visitantes puedan entender para qué sirve el chat antes de abrirlo. Resulta útil cuando un simple icono no es suficientemente evidente - por ejemplo, "Escríbenos / Respondemos al instante" o "¿Necesitas ayuda? / Pregunta a nuestro asistente".
Al elegir este modo se añaden cuatro ajustes:
- Label line 1 (Línea de texto 1) - la primera línea del texto, más destacada (máximo 60 caracteres)
- Label line 2 (Línea de texto 2) - la segunda línea, más suave (máximo 60 caracteres). Déjala vacía si prefieres un iniciador de una sola línea
- Text color (Color del texto) - color del texto descriptivo. Si no lo modificas, ChatLab elige automáticamente blanco o negro según lo claro u oscuro que sea el color de tu iniciador
- Show close cross (Mostrar cruz de cierre) - añade una pequeña cruz al iniciador para que los visitantes puedan ocultarlo
Ambas líneas se acortan con puntos suspensivos si no caben, por lo que el iniciador nunca superará el ancho de la pantalla. El iniciador vuelve a reducirse a un círculo mientras el chat permanece abierto.
Si la opción de soporte multilingüe está activada, ambas líneas de texto se traducen igual que el resto de los textos visibles para los visitantes.
Show close cross está desactivado por defecto y solo está disponible en este modo. Si se activa, el visitante que pulse la cruz ocultará el iniciador durante el resto de su sesión de navegación: permanecerá oculto al cambiar de página y volverá a mostrarse en su siguiente visita o en una nueva pestaña. Si el chatbot está configurado para abrirse automáticamente, respetará esa elección y no volverá a abrirse después de que el visitante lo haya cerrado.
Apertura automática del widget tras cargar la página (Auto Open Chat Widget After Page Load)
Configura el chat para que se despliegue automáticamente cuando los visitantes carguen la página:
- Auto open on mobile (Abrir automáticamente en móvil): abre automáticamente el chat en dispositivos móviles
- Auto open on desktop (Abrir automáticamente en escritorio): abre automáticamente el chat en pantallas de escritorio
- Open chat with delay (Abrir chat con retraso): añade un retraso antes de la apertura automática (solo disponible cuando la apertura automática está activada)
- Delay by (Retrasar por): número de segundos de espera antes de abrir (0-60 segundos)
Mensajería humanizada (Human-Like Messaging)
Simula la escritura humana dividiendo las respuestas en varios globos de mensaje, que se muestran gradualmente frase por frase:
- Human-Like Messaging: interruptor para activar/desactivar la función
- Delay Between Bubbles (Retraso entre globos): tiempo en segundos entre la aparición de cada globo de mensaje (0-200 segundos)
Globo con mensaje de bienvenida (Welcome Message Bubble)
Muestra el mensaje de bienvenida en un globo sobre el icono de inicio del chat para ayudar a que los visitantes lo noten. Esta función solo está disponible en el modo de icono y no funciona en el modo iframe ni cuando la apertura automática está habilitada.
- Show on desktop (Mostrar en escritorio): muestra el globo de mensaje de bienvenida en el ordenador
- Show on mobile (Mostrar en móvil): muestra el globo de mensaje de bienvenida en dispositivos móviles
- Delay (Retraso): número de segundos tras la carga de la página antes de mostrar el globo (0-60 segundos)
Si tienes varios mensajes de bienvenida, aparecerán apilados sobre el icono de chat.
La entrada por voz (el botón del micrófono en el área de entrada del chat) se configura en Settings > Chat Conversation, no aquí en Appearance.
Pantalla de bienvenida (Welcome Screen)
Cambia el widget a un diseño inicial especial que recibe a los nuevos visitantes con un mensaje de bienvenida grande y las preguntas sugeridas apiladas en una tarjeta blanca centrada. La pantalla de bienvenida solo aparece al comienzo de una nueva sesión y cambia a la vista estándar de chat en cuanto el visitante envía su primer mensaje.
- Special Welcome Screen (Pantalla de bienvenida especial): activa o desactiva el modo de pantalla de bienvenida (desactivado por defecto)
- Suggested questions intro (Introducción a las preguntas sugeridas): breve texto visible encima de la tarjeta de preguntas sugeridas en la pantalla de bienvenida (por ejemplo, "Selecciona una opción o escribe un mensaje"). Déjalo vacío para ocultar el texto. Requiere que las preguntas sugeridas estén configuradas en Settings > Chat Conversation.
- Hide Human Contact Form (Ocultar formulario de contacto humano): oculta la opción del formulario de contacto en el encabezado mientras se muestra la pantalla de bienvenida
- Hide Live Chat (Ocultar Live Chat): oculta la acción de chat en vivo en el encabezado mientras se muestra la pantalla de bienvenida
La pantalla de bienvenida también se integra con la captación de leads y el consentimiento de la política de privacidad; si alguno de los dos se requiere al inicio de la conversación, el formulario o la solicitud de consentimiento se mostrarán en la tarjeta de bienvenida en lugar de las preguntas sugeridas.
Para consultar todos los detalles, variantes de diseño y capturas de pantalla de la vista del visitante, consulta Pantalla de bienvenida.
Acciones del encabezado (Header Actions)
Controla cómo se ofrecen Live Chat y el formulario de contacto humano (Human Contact Form) en el encabezado del widget de chat.
- Separate icons (Iconos independientes): cada acción tiene su propio icono en el encabezado, junto al botón de cierre
- Menu (dropdown) (Menú desplegable): ambas acciones pasan al menú del encabezado (el icono de los tres puntos), junto a opciones como "Reiniciar conversación" y el selector de idioma cuando están activados
Los chatbots nuevos usan el menú, lo que mantiene el encabezado ordenado a medida que se añaden más acciones. Los chatbots creados antes del 2 de septiembre de 2026 mantienen los iconos independientes, de modo que nada cambia para sus visitantes. Puedes cambiarlo en cualquier momento: el ajuste solo afecta a la presentación, no a la función de las acciones.
Tipografía (Typography)
Establece la tipografía y los tamaños de texto utilizados en todo el widget: mensajes, preguntas sugeridas, encabezado, formularios y el texto del botón de inicio.
- Widget font (Fuente del widget): una de ocho fuentes tipográficas: System default (Predeterminada del sistema), Inter, Nunito, Lato, Montserrat, Poppins, Source Serif y JetBrains Mono
- Message font size (Tamaño de fuente de mensajes): tamaño del texto de los mensajes (12-24 px)
- Suggested questions font size (Tamaño de fuente de preguntas sugeridas): tamaño de los botones de preguntas sugeridas (12-24 px)
Inter es la opción predeterminada y coincide con el aspecto que tenía cada chatbot antes de que existiera este ajuste, por lo que nada cambiará hasta que elijas otra fuente.
System default no descarga ningún archivo: el widget utiliza la fuente que ya está instalada en el dispositivo del visitante. Eso la convierte en la opción más rápida e integrada en sitios web que ya utilizan la tipografía del sistema, aunque el chat se verá ligeramente diferente en Windows, macOS y Android. Las otras siete son fuentes de Google Fonts, que el navegador del visitante descarga una sola vez. Cada una cuenta con una alternativa de respaldo (fallback), de modo que si la red del visitante bloquea Google Fonts, el texto seguirá siendo legible y el diseño no se romperá.
El archivo de fuente se carga dentro de la propia ventana del chat. Solo se añade a tu propia página cuando el widget muestra texto fuera de la ventana del chat: en el botón de inicio con modo Icon with text, en la barra de chat reducida o en los globos de mensajes de bienvenida. Un chatbot que utilice únicamente el icono básico no genera ninguna petición adicional en tu página.
Tamaño del widget (Widget Size)
Ajusta las dimensiones del widget de chat abierto en dispositivos de escritorio y móviles. Cada control deslizante cuenta con un botón Default (Predeterminado) que restablece el tamaño integrado.
- Desktop width (Ancho en escritorio) - anchura del widget en navegadores de escritorio, en píxeles (330-800, valor predeterminado: 448)
- Desktop height (Altura en escritorio) - altura del widget en navegadores de escritorio, en píxeles (300-770, valor predeterminado: 660)
- Mobile size (Tamaño en móvil) - tamaño del widget en dispositivos móviles, como porcentaje de la pantalla (60-100%, valor predeterminado: 100%)
Con el valor predeterminado, el widget utiliza el dimensionamiento adaptable integrado de ChatLab. Cualquier otro valor aplica un tamaño fijo.
En dispositivos móviles, el valor predeterminado (100%) hace que el chat abierto cubra toda la pantalla. Si eliges un porcentaje menor, el widget se reduce a esa proporción de la pantalla y se centra en la ventana de visualización, lo que permite a los visitantes seguir viendo la página alrededor del chat.
Junto a los controles deslizantes encontrarás dos botones Save & Preview (Guardar y previsualizar, resaltados abajo): uno para las filas de escritorio y otro para la fila de móvil. Al hacer clic en un botón, se guardan los cambios pendientes y se abre el chat en una ventana de vista previa con tu configuración actual:
- El botón de escritorio abre una ventana de navegador normal para que puedas ver el tamaño exacto en una pantalla de escritorio.
- El botón de móvil abre una ventana emergente compacta (400 x 700) para que el widget se muestre con su diseño móvil, lo cual resulta muy útil si ajustas el control deslizante Mobile size desde un ordenador de sobremesa.
Botón de maximizar o modo panel lateral (Maximise Button / Drawer Mode)
El modo panel lateral (Drawer mode) permite al visitante cambiar el chat de una ventana flotante a un panel de altura completa anclado al borde de la pantalla, manteniendo tu página visible al lado. Resulta ideal para conversaciones que el visitante consulta mientras lee la página: respuestas extensas, comparativas de productos, formularios o cualquier contenido con mucho texto.
Activa Maximise button (Botón de maximizar) dentro de Widget Size y aparecerá un botón en el encabezado del chat; el visitante decide si desea utilizarlo. Su elección se recuerda durante el resto de la sesión de navegación.
- El panel ocupa la mitad del ancho de la ventana del navegador, hasta un máximo de 720 px, y siempre abarca toda la altura. Se ancla al mismo lado que tu iniciador, por lo que un widget ubicado a la izquierda abrirá el panel lateral a la izquierda.
- Desktop width y Desktop height no se aplican aquí; solo definen las dimensiones de la ventana flotante normal.
- El botón solo se muestra en pantallas de escritorio de al menos 1.200 px de ancho con ratón. En teléfonos y tabletas nunca aparece, ya que allí el chat ya ocupa toda la pantalla. Si un visitante reduce el ancho del navegador por debajo de esa medida, el panel vuelve a plegarse a la ventana normal.
- El iniciador permanece oculto mientras el panel lateral está abierto; el visitante lo cierra desde el encabezado o sale del modo panel lateral con el mismo botón.
El modo panel lateral viene desactivado de forma predeterminada, por lo que nada cambiará para tus visitantes hasta que lo actives.
Otros ajustes de apariencia (Other Appearance Settings)
- Widget Shadow (Sombra del widget): activa o desactiva una sombra alrededor del contenedor del widget de chat
- Open links in (Abrir enlaces en): elige si los enlaces dentro de los mensajes del chat se abren en una new tab (nueva pestaña) o en la same tab (misma pestaña)
También se muestra un botón de cierre (X) en el encabezado del chat en ordenadores de escritorio, para que los visitantes puedan replegar el chat de vuelta al botón de inicio sin recargar la página. El botón de cierre permanece oculto cuando el chat está incrustado mediante iframe o en modo pantalla completa.
Pie de chat personalizado (Custom Chat Footer)
Añade texto personalizado que se muestra en la parte inferior del widget de chat (máx. 250 caracteres). Es compatible con Markdown para insertar enlaces. Un uso habitual es enlazar a tu política de privacidad o a tus términos y condiciones.
Ejemplo de Markdown:
By chatting you accept our [Privacy Policy](https://www.example.com)
CSS personalizado (Custom CSS)
Añade estilos CSS personalizados para adaptar aún más el aspecto de tu widget de chat (máx. 5000 caracteres):
Artículos relacionados
Los cambios se guardan automáticamente. Espera a que aparezca Saved (Guardado), luego revisa Overview (Información general) y el widget integrado tanto en ordenador como en móvil. La vista previa de la configuración muestra la ventana de chat; la ubicación del activador y el comportamiento de apertura automática a nivel de página también deben comprobarse en el widget insertado en tu web.
- Cómo crear tu primer chatbot
- Ajustes de conversación - escribe el mensaje de bienvenida y las preguntas sugeridas
- Pantalla de bienvenida - el diseño de apertura a pantalla completa y sus variantes para los visitantes
- Formularios personalizados - recopila datos de los visitantes dentro del chat
- Captación de leads