Cómo personalizar la interfaz y el logotipo de BigBlueButton.

La personalización de la marca BigBlueButton puede significar tres cosas distintas: cambiar el logotipo en la página web predeterminada del servidor, mostrar un logotipo dentro de una reunión o rediseñar el cliente de la reunión. Elija el cambio más pequeño que cumpla con su objetivo. Los dos primeros son cambios documentados de configuración o recursos; un esquema de colores, texto o diseño del cliente modificados generalmente requieren la creación de un cliente HTML5 personalizado.

Esta guía se basa en la documentación de administración de BigBlueButton 4.0, disponible a partir del 6 de octubre de 2026. Las rutas y el empaquetado de la implementación pueden variar según la versión o el proveedor de alojamiento. Confirme la versión instalada en su servidor antes de modificar los archivos y realice una copia de seguridad previamente.

Elige el cambio de marca que necesitas

El logotipo de la página de inicio del servidor y el logotipo de la reunión son independientes. Reemplazar uno no reemplaza automáticamente al otro.

Antes de editar el servidor

Necesitas acceso a la consola con permisos para modificar el servidor BigBlueButton, y debes saber si el servidor lo administras tú o un proveedor externo. Si el servidor lo gestiona un proveedor, pregunta si admite personalización de marca y si conservará los cambios durante el mantenimiento.

• Compruebe la versión instalada y compárela con la guía de personalización del servidor BigBlueButton correspondiente .
• Guarda una copia del logotipo actual y de cualquier archivo de configuración que tengas previsto editar.
• Prepare un archivo de logotipo limpio que siga siendo reconocible en el tamaño que se muestra en su sitio web o reunión. La documentación no especifica un tamaño de píxel universal, así que revise el área de visualización real en lugar de basarse en una dimensión supuesta.
• Utilice una URL de imagen a la que los participantes de la reunión puedan acceder sin necesidad de iniciar sesión. Prefiera HTTPS y verifique la URL desde fuera del servidor antes de usarla.

Cambiar el logotipo predeterminado de la página web

Para BigBlueButton 4.0, la guía de administración identifica el logotipo predeterminado en /var/www/bigbluebutton-default/assets/images/logo.png. Esto afecta al sitio web predeterminado que sirve el servidor. No establece el logotipo que se muestra dentro del cliente de reuniones HTML5.

1. Conéctese al servidor y confirme que el archivo existe en la ruta documentada. Si la ruta es diferente, deténgase y consulte la documentación de la versión instalada en lugar de copiar el archivo en un directorio al azar.
2. Realice una copia de seguridad del recurso existente. Por ejemplo, un administrador puede copiarlo a un archivo de copia de seguridad con fecha en el mismo directorio antes de reemplazarlo. Tenga en cuenta los permisos y la propiedad originales al instalar el reemplazo.
3. Coloca tu nuevo logotipo en la ubicación documentada usando el nombre de archivo logo.png. Verifica que el archivo de imagen sea realmente datos PNG y que tenga suficiente contraste con el fondo de la página.
4. Abra la página pública de BigBlueButton en una ventana de navegación privada o borre la caché del navegador. Compruebe que el nuevo logotipo aparece sin estar estirado, recortado ni borroso.

La guía oficial indica la ubicación del archivo, pero no garantiza que la copia local se mantenga tras cada actualización del paquete. Conserve los archivos originales y de reemplazo en sus registros de implementación y revise la página de inicio después de las actualizaciones. Si el logotipo desaparece tras una actualización, compare el archivo instalado con el archivo guardado y vuelva a aplicar el cambio solo después de consultar las instrucciones de la versión actual.

Mostrar un logotipo dentro de las reuniones

La opción de personalización de marca documentada de BigBlueButton para cada reunión coloca un logotipo en el área de marca situada encima de la lista de participantes. Se deben cumplir dos condiciones: la displayBrandingAreaconfiguración del cliente HTML5 debe estar habilitada y la reunión debe crearse con una logoURL de imagen. Un parámetro de logotipo por sí solo no hará que aparezca un área de marca oculta.

1. En la configuración del cliente HTML5, habilite displayBrandingArea. En las instalaciones documentadas actuales, /etc/bigbluebutton/bbb-html5.ymles el archivo de anulación local recomendado; las entradas de configuración allí anulan la configuración del cliente empaquetado correspondiente. Conserve los demás valores YAML existentes al editar el archivo.
2. Reinicie BigBlueButton para que el cambio de configuración surta efecto. sudo bbb-conf --restartPrograme esto durante una ventana de mantenimiento adecuada, ya que un reinicio puede interrumpir las reuniones activas.
3. Cuando tu aplicación o cliente API cree la reunión, incluye un parámetro personalizado en el formulario logo=https://your-domain.example/brand.png. La ubicación exacta para ingresar un parámetro personalizado depende de la integración que envía la /createsolicitud de BigBlueButton. Sigue las instrucciones de esa integración y no expongas la clave secreta compartida de tu servidor en el código del cliente.
4. Crea una nueva reunión de prueba y únete a ella. Confirma que el logotipo aparece encima de la lista de participantes y que la imagen se carga para un participante que no ha iniciado sesión en el servidor de imágenes.

Consulte la referencia del archivo de configuración oficial para conocer las ubicaciones de anulación recomendadas y la referencia de la API para los parámetros de creación de reuniones. Si su versión del servidor no es la 4.0, utilice la documentación correspondiente.

Cuando necesites un cambio de imagen completo de la interfaz.

Un logotipo en la sección de marca de la reunión no es lo mismo que una aplicación de reuniones de marca blanca. Si necesita reemplazar los colores de la interfaz, las etiquetas u otros elementos integrados del cliente, las preguntas frecuentes de BigBlueButton indican a los administradores cómo configurar el entorno de desarrollo y crear su propia versión del cliente HTML5. Las preguntas frecuentes sobre la marca y la guía de desarrollo del proyecto son el punto de partida.

Esta ruta requiere desarrollo e implementación. No es una configuración de servidor rápida, y los cambios pueden requerir mantenimiento a medida que BigBlueButton evoluciona. Antes de invertir en una configuración personalizada, anote con precisión qué pantallas o elementos deben modificarse y verifique si las opciones integradas de página de inicio o logotipo de reunión son suficientes. Si decide continuar, mantenga la personalización en el control de versiones, documente cómo recompilarla y pruebe las actualizaciones en un entorno de prueba antes de actualizar el entorno de producción.

Verifique el resultado y solucione el problema según el síntoma.

• El logotipo de la página de inicio no ha cambiado: confirme que ha reemplazado el archivo en el bigbluebutton-defaultdirectorio de recursos del servidor activo y, a continuación, ignore la caché del navegador. Si un proxy o un portal independiente sirve la página pública, compruebe qué sistema es el propietario de dicha página.
• El logotipo de la reunión no aparece: verifique que la configuración del área de marca esté habilitada, que el servidor se haya reiniciado, que la nueva reunión se haya creado con el logoparámetro y que la URL de la imagen funcione para un navegador no autenticado.
• El logotipo aparece, pero se ve mal: compruebe las proporciones, las áreas transparentes y el contraste de la imagen original. Ajuste la imagen original en lugar de estirarla en la interfaz.
• Algunos participantes ven un área en blanco: prueben la URL de la imagen desde otra red y dispositivo. Un cortafuegos, una restricción de acceso, un certificado TLS no válido o una URL caducada pueden impedir que los navegadores de los participantes la carguen.
• Los colores y el texto permanecen sin cambios: reemplazar el logotipo del servidor no modifica la apariencia del cliente de la reunión. Si es necesario cambiar estos elementos de la interfaz, utilice el método de desarrollo de cliente personalizado.

El éxito se evalúa según la ubicación y la coherencia del resultado: la página de inicio muestra la marca de reemplazo; una reunión de prueba recién creada muestra el logotipo de la reunión en el área de marca documentada; y, si se creó un cliente personalizado, los cambios de interfaz solicitados permanecen presentes durante todo el proceso de unión y reunión. Una pequeña reunión de prueba es un punto de validación más seguro que revisar solo una pestaña del navegador en caché.

Las opciones de personalización de BigBlueButton están limitadas intencionadamente a nivel de configuración. Las rutas de logotipo integradas cubren las necesidades de identidad más comunes, mientras que un rediseño completo de la interfaz requiere la adquisición de un cliente personalizado y su mantenimiento continuo.