Marca y personalización del Helpcenter
Personaliza el aspecto de tu Helpcenter de Bugalou. Define los colores de marca, sube logotipos, añade CSS personalizado y configura la marca por dominio.
Resumen
La página de Marca te permite personalizar el aspecto visual de tu Helpcenter para que coincida con la identidad de marca de tu empresa. Cada dominio puede tener su propia marca.
Mira cómo configurar tu propio centro de ayuda
Pasos y transcripción en la página del vídeo →
Requisito previo
Necesitas al menos un dominio configurado antes de poder editar la marca. Si no hay ningún dominio, verás un mensaje: "Todavía no hay dominios configurados" con un enlace a la página de ajustes de Dominios.
Acceder a la Marca
Ve a Centro de ayuda → Marca desde la barra lateral.
Seleccionar un dominio
Si tienes varios dominios, usa el desplegable de selección de dominio de la parte superior de la página para elegir la marca de qué dominio quieres editar. La marca se guarda por dominio, así que cada dominio puede tener un aspecto distinto.
Ajustes de marca
El formulario de marca está organizado en tres secciones:
1. Colores
Define cinco valores de color con el selector de color o escribiendo directamente los códigos hexadecimales:
| Color | Finalidad |
|---|---|
| Color principal | Color principal de la marca: se usa en cabeceras, botones y acentos |
| Color secundario | Color de apoyo: se usa en fondos y elementos secundarios |
| Color de acento | Color de resalte: se usa en enlaces, elementos de llamada a la acción y estados al pasar el ratón |
| Color del texto | Color principal del texto: se usa en el cuerpo del texto y los títulos |
| Color del texto claro | Color de texto más claro: se usa en descripciones, pies de imagen y texto secundario |
Cada campo de color tiene una muestra visual junto a la entrada hexadecimal, así que ves tu color elegido al instante.
2. Imágenes
| Campo | Descripción |
|---|---|
| URL del logo | Pega la URL del logotipo de tu empresa. Aparece en la cabecera de tu Helpcenter. Usa la URL de una imagen alojada (p. ej., en Cloudinary, AWS S3 o tu sitio web). |
| URL del favicon | Pega la URL de tu favicon. Aparece en la pestaña del navegador cuando los visitantes ven tu Helpcenter. |
3. Contenido
| Campo | Descripción |
|---|---|
| Texto del pie de página | Texto personalizado que se muestra en el pie de página de tu Helpcenter. Por ejemplo: "© 2026 Tu Empresa. Todos los derechos reservados." |
| CSS personalizado | Avanzado: añade reglas CSS personalizadas para personalizar aún más el aspecto más allá de los ajustes básicos de color. Usa la sintaxis CSS estándar. |
Guardar la marca
- Rellena los ajustes que quieras
- Haz clic en "Guardar marca" (botón azul)
- Aparece un mensaje de éxito en verde: "¡Marca actualizada correctamente!"
- Los cambios se aplican de inmediato a tu Helpcenter
El mensaje de éxito desaparece automáticamente a los 3 segundos.
Consejos de CSS personalizado
El campo de CSS personalizado acepta CSS estándar. Algunos ejemplos:
- Cambiar fuentes:
body { font-family: 'Inter', sans-serif; } - Ajustar el espaciado:
.article-content { padding: 2rem; } - Ocultar elementos:
.footer-links { display: none; } - Efectos personalizados al pasar el ratón:
a:hover { text-decoration: underline; }
Buenas prácticas
- Usa los colores exactos de tu marca para una experiencia de cliente coherente
- Aloja los logotipos y favicons en una CDN fiable para que carguen rápido
- Usa logotipos con fondo transparente (PNG o SVG) para el mejor resultado
- Mantén el texto del pie de página conciso: basta con el aviso de copyright y el nombre de la empresa
- Si puedes, prueba antes los cambios de CSS personalizado en un dominio de pruebas
- Recuerda que la marca es por dominio: configura cada dominio por separado si hace falta