--- title: "Estilización y creación de marca del widget de la base de conocimiento" slug: "styling-and-branding-the-knowledge-base-widget" updated: 2026-08-17T08:54:55Z published: 2026-08-17T08:54:55Z canonical: "docs.document360.com/styling-and-branding-the-knowledge-base-widget" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.document360.com/llms.txt > Use this file to discover all available pages before exploring further. # Estilización y creación de marca del widget de la base de conocimiento 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 | --- ## Acceder a la configuración de estilo de widgets 1. En la barra de navegación de la izquierda, ve a **Conexiones** () > **widget de la base de conocimientos**. 2. Pasa el cursor sobre el widget deseado y haz clic en el icono **Editar** (). 3. En la pestaña **de Instalación y Configuración** , amplía la sección **de Apariencia** . ![Document360 interface showing knowledge base widget options and edit functionality.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/appearance%20widget.png) NOTA 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:** 1. Haz **clic Cambiar color**. La paleta de colores se abre. 2. Selecciona un color desde el selector, o introduce directamente un valor hexadecimal, RGB o HSL. 3. 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 `#0057FF` como 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:** 1. Haz clic **en el icono de Cambiar**. 2. 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. 3. Haz clic **en Guardar**. 4. 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:** 1. Selecciona **Izquierda** o **Derecha** para elegir en qué lado de la pantalla aparece el widget. 2. Introduce valores en **el espaciado lateral** (distancia horizontal desde el borde) y el **espaciado inferior** (distancia vertical desde abajo) en píxeles. 3. 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:** 1. Introduce tu mensaje en el campo **de Bienvenido** (máximo 50 caracteres). 2. 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:** 1. Activa el interruptor **de ocultar widget** . 2. Haz clic **en Guardar**. NOTA 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:** 1. Activa el interruptor **Ocultar artículos más buscados** . 2. Haz clic **en Guardar**. NOTA 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.