Tu widget de Base de Conocimiento suele ser el primer punto de contacto que un usuario tiene con tu contenido de soporte. Un widget que encaje con la identidad visual de tu producto se siente nativo y fiable — uno que no lo haga puede parecer un pensamiento de última hora. Este artículo cubre todos los ajustes visuales disponibles para el widget y explica cuándo y por qué usarías cada uno.
Referencia de configuración de estilo
| Ambientación | Lo que controla |
|---|---|
| Color de widget | El tema y el color de fondo de los iconos |
| Icono de widget | El gráfico del botón que abre el widget |
| Posición del widget | Lado izquierdo o derecho de la pantalla, con control de espaciado |
| Mensaje de bienvenida | Un breve prompt mostrado encima del icono antes de que el usuario haga clic |
| Ocultar widget | Suprime el icono flotante (usado al activar mediante un botón personalizado) |
| Ocultar los artículos más buscados | Elimina los artículos de tendencia que se muestran cuando se abre el widget |
Cómo abrir la configuración de estilo de widgets
- En la barra de navegación de la izquierda, ve a Conexiones () > widget de la base de conocimientos.
- Pasa el cursor sobre el widget deseado y haz clic en el icono Editar ().
- En la pestaña Configurar & conectar , expande el acordeón del widget Estilo .
Los cambios se guardan automáticamente a medida que navegas entre pestañas. Haz clic en Guardar para solicitar explícitamente antes de salir de la página.
Cuándo configurar el estilo de widgets
- Durante la configuración inicial, alinear el widget con los colores y el icono de la marca de tu producto.
- Al reposicionar para evitar solapamientos con un widget de chat en vivo o un banner de cookies.
- Cuando uso un botón de disparo personalizado y quiero ocultar el icono flotante predeterminado.
- Al añadir un mensaje de bienvenida para nuevos usuarios.
Antes de que empieces
Debes tener un puesto de Propietario o Administrador del Proyecto.
Color de widget
Por qué es importante: Hacer coincidir el color de acento de tu widget con el color principal de la marca de tu producto hace que parezca una parte diseñada de tu interfaz, no una herramienta integrada. Esto es especialmente importante para productos SaaS donde la coherencia de la marca afecta a la calidad percibida.
Cómo configurarlo:
- Haz clic Cambiar color. La paleta de colores se abre.
- Selecciona un color desde el selector, o introduce directamente un valor hexadecimal, RGB o HSL.
- Haz clic en Guardar.
Resultado: El icono del widget y su barra de cabecera se actualizan inmediatamente en la vista previa y en tu sitio en directo tras la siguiente carga de la página.
Ejemplo: Si tu producto lo usa
#0057FFcomo azul principal, introducir ese valor hexadecimal hará que el icono del widget coincida perfectamente con la barra de navegación y los botones CTA.
Icono de widget
Por qué es importante: El icono por defecto es una burbuja de ayuda genérica. Sustituirlo por tu logotipo o un icono personalizado indica a los usuarios que este widget pertenece a tu producto, no a una herramienta de terceros, lo que aumenta la tasa de clics.
Cómo configurarlo:
- Haz clic en el icono de Cambiar.
- Elige en la pestaña de Conjunto de iconos para elegir un icono preconstruido, o haz clic en Insertar imagen para usar una imagen personalizada:
- De la URL: Pega el enlace de la imagen y haz clic en Insertar.
- Del dispositivo: Haz clic en Subir una imagen y selecciona tu archivo.
- Haz clic en Guardar.
- Para revertir, haz clic en Predeterminado.
Propina: Utiliza una imagen cuadrada con fondo transparente (PNG, recomendado 64×64px o mayor) para obtener el resultado más limpio en todos los tamaños de pantalla.
Posición del widget
Por qué es importante: La posición por defecto en la esquina inferior derecha funciona para la mayoría de los sitios, pero algunos diseños tienen barras de navegación fijas, banners de cookies o widgets de chat en esa esquina. Reposicionar evita solapamientos y garantiza que el widget siempre sea visible y accesible.
Cómo configurarlo:
- Selecciona Izquierda o Derecha para elegir en qué lado de la pantalla aparece el widget.
- Introduce valores en el espaciado lateral (distancia horizontal desde el borde) y el espaciado inferior (distancia vertical desde abajo) en píxeles.
- Haz clic en Guardar.
Ejemplo: Si tu widget de chat en vivo está en la parte inferior derecha con un margen de 20px, coloca tu widget de la Base de Conocimientos a la izquierda con el mismo espacio inferior para que ambos sean accesibles sin solapamiento.
Mensaje de bienvenida
Por qué es importante: La mayoría de los usuarios no notarán un icono flotante a menos que algo les llame la atención. Un mensaje de bienvenida aparece como una burbuja de chat sobre el icono y actúa como un suave empujón — especialmente útil durante los flujos de incorporación o tras el lanzamiento de una nueva función.
Cómo configurarlo:
- Introduce tu mensaje en el campo de Bienvenido (máximo 50 caracteres).
- Haz clic en Guardar.
Ejemplos de mensajes de bienvenida efectivos:
- "¿Necesitas ayuda? Empieza aquí."
- "¿Eres nuevo en esta función? Tenemos guías."
- "Busca en nuestra base de conocimientos."
Cuándo saltarla: Si tu widget está integrado en una interfaz muy enfocada en tareas (como un flujo de pago), un mensaje de bienvenida puede resultar intrusivo. Déjalo en blanco en esos contextos.
Ocultar widget
Por qué es importante: Si activas el widget mediante un botón personalizado (por ejemplo, un enlace de "Ayuda" en tu barra de navegación), no quieres que también aparezca el icono flotante predeterminado — eso crea dos puntos de entrada y un desorden visual. Ocultar el icono del widget te permite controlar exactamente dónde y cómo se lanza el widget.
Cómo configurarlo:
- Activa el interruptor de ocultar widget .
- Haz clic en Guardar.
Si has asignado el widget a un botón personalizado pero el icono flotante sigue apareciendo, comprueba que este interruptor esté activado.
Ocultar los artículos más buscados
Por qué es importante: La sección de "más buscados" muestra los artículos de tendencia cuando el widget se abre por primera vez. Esto es útil para bases de conocimiento de propósito general. Sin embargo, si tu widget está asignado a un área de producto o flujo de trabajo específico, mostrar artículos populares no relacionados puede confundir a los usuarios.
Cómo configurarlo:
- Activa el interruptor Ocultar artículos más buscados .
- Haz clic en Guardar.
Activar este interruptor también desactiva el mapeo de listas basado en URLs para el widget. Si dependes del mapeo de URL a listas de categorías de superficie en páginas específicas, mantén esta opción desactivada.
Mejores prácticas
- Haz coincidir el color del widget con el color principal de la CTA de tu producto para conseguir una sensación nativa.
- Si otro widget (por ejemplo, chat en vivo) ocupa la esquina inferior derecha, mueve el widget de la base de conocimiento a la izquierda con el espaciado inferior correspondiente.
- Utiliza un icono personalizado con fondo PNG transparente para obtener resultados coherentes con la marca.
- Deja el mensaje de bienvenida en blanco en las páginas de alta intención (préstamo, enviar formularios) donde las distracciones perjudican la conversión.