Comment personnaliser l'interface et le logo de BigBlueButton

La personnalisation de BigBlueButton peut prendre trois formes : modifier le logo sur la page web par défaut du serveur, afficher un logo pendant une réunion ou repenser l’interface de réunion. Choisissez la modification la plus simple qui répond à votre objectif. Les deux premières concernent la configuration ou les ressources ; une refonte des couleurs, du texte ou de la mise en page nécessite généralement le développement d’un client HTML5 personnalisé.

Ce guide se base sur la documentation d'administration de BigBlueButton 4.0, disponible le 6 octobre 2026. Les chemins d'accès et le package de déploiement peuvent varier selon la version ou l'hébergeur. Avant toute modification de fichiers, vérifiez la version installée sur votre serveur et effectuez une sauvegarde au préalable.

Choisissez le changement de marque dont vous avez besoin

Le logo de la page d'accueil du serveur et le logo utilisé pendant la réunion sont distincts. Remplacer l'un n'entraîne pas automatiquement le remplacement de l'autre.

Avant de modifier le serveur

Vous devez disposer d'un accès shell avec les permissions nécessaires pour modifier le serveur BigBlueButton. Il est important de savoir si l'hébergement est géré par vos soins ou par un prestataire. Si un fournisseur gère le serveur, demandez-lui s'il prend en charge la personnalisation de la marque et s'il conservera les modifications lors des opérations de maintenance.

• Vérifiez votre version installée et comparez-la avec le guide de personnalisation du serveur BigBlueButton correspondant .
• Enregistrez une copie du logo actuel et de tout fichier de configuration que vous prévoyez de modifier.
• Préparez un fichier logo propre qui reste lisible à la taille affichée sur votre site ou lors de votre réunion. La documentation ne précise pas de taille en pixels standard ; vérifiez donc la zone d’affichage réelle plutôt que de vous fier à une dimension supposée.
• Utilisez une URL d'image accessible aux participants sans connexion. Privilégiez le protocole HTTPS et vérifiez l'URL depuis l'extérieur du serveur avant de l'utiliser.

Modifier le logo par défaut de la page Web

Pour BigBlueButton 4.0, le guide d'administration indique l' /var/www/bigbluebutton-default/assets/images/logo.pngemplacement du logo par défaut. Ce logo s'affiche sur le site web par défaut du serveur, mais pas dans le client de réunion HTML5.

1. Connectez-vous au serveur et vérifiez que le fichier se trouve bien à l'emplacement indiqué. Si le chemin est différent, consultez la documentation de votre version installée avant de copier le fichier dans un répertoire au hasard.
2. Sauvegardez le fichier existant. Par exemple, un administrateur peut le copier dans un fichier de sauvegarde daté, situé dans le même répertoire, avant de le remplacer. Lors de l'installation du fichier de remplacement, veillez à conserver les autorisations et le propriétaire d'origine.
3. Placez votre nouveau logo à l'emplacement indiqué en utilisant le nom de fichier logo.png. Vérifiez que le fichier image est bien au format PNG et qu'il présente un contraste suffisant avec le fond de la page.
4. Ouvrez la page d'accueil publique de BigBlueButton dans une fenêtre de navigation privée ou videz le cache de votre navigateur. Vérifiez que le nouveau logo s'affiche correctement, sans être étiré, rogné ni flou.

Le guide officiel indique l'emplacement de la ressource, mais ne garantit pas la persistance du remplacement local après chaque mise à jour du package. Conservez vos fichiers d'origine et de remplacement dans vos archives de déploiement et vérifiez la page d'accueil après chaque mise à niveau. Si le logo disparaît après une mise à jour, comparez le fichier installé avec votre ressource enregistrée et appliquez à nouveau la modification uniquement après avoir consulté les instructions de la version actuelle.

Afficher le logo à l'intérieur des réunions

L'option de personnalisation de réunion de BigBlueButton permet d'afficher un logo dans la zone de personnalisation située au-dessus de la liste des participants. Deux conditions doivent être remplies : le displayBrandingAreaparamètre correspondant dans le client HTML5 doit être activé et la réunion doit être créée avec une logoURL d'image. Un simple paramètre de logo ne suffit pas à faire apparaître la zone de personnalisation.

1. Dans la configuration du client HTML5, activez cette option displayBrandingArea. Sur les installations documentées actuelles, /etc/bigbluebutton/bbb-html5.ymlil s'agit du fichier de configuration local recommandé ; les entrées de configuration qu'il contient remplacent les paramètres clients fournis avec le package. Conservez les autres valeurs YAML existantes lors de la modification du fichier.
2. Redémarrez BigBlueButton pour que la modification de configuration soit prise en compte : sudo bbb-conf --restart. Planifiez cette opération pendant une fenêtre de maintenance appropriée, car un redémarrage peut interrompre les réunions en cours.
3. Lors de la création de la réunion par votre application ou client API, incluez un paramètre personnalisé logo=https://your-domain.example/brand.png. L'emplacement exact de ce paramètre dépend de l'intégration qui envoie la /createrequête BigBlueButton. Suivez les instructions de cette intégration et ne divulguez jamais le secret partagé de votre serveur dans le code côté client.
4. Créez une nouvelle réunion de test et rejoignez-la. Vérifiez que le logo apparaît bien au-dessus de la liste des participants et que l'image se charge correctement pour un participant non connecté à l'hôte d'images.

Consultez le fichier de configuration officiel pour connaître les emplacements de remplacement recommandés et la documentation de l'API pour les paramètres de création des réunions. Si votre version de serveur n'est pas la 4.0, utilisez la documentation correspondante.

Lorsque vous avez besoin d'une refonte complète de votre interface utilisateur

Un logo dans la zone de personnalisation de la réunion ne signifie pas la même chose qu'une application de réunion en marque blanche. Si vous devez modifier les couleurs de l'interface, les étiquettes ou d'autres éléments intégrés du client, la FAQ de BigBlueButton indique aux administrateurs comment configurer l'environnement de développement et créer leur propre version du client HTML5. La FAQ relative à la personnalisation et le guide de développement du projet constituent les points de départ.

Cette configuration nécessite un travail de développement et de déploiement. Il ne s'agit pas d'une configuration serveur rapide, et des modifications peuvent nécessiter une maintenance au fur et à mesure de l'évolution de BigBlueButton. Avant d'investir dans une configuration personnalisée, notez précisément les écrans ou éléments à modifier et vérifiez si les options intégrées de page d'accueil ou de logo de réunion sont suffisantes. Si vous décidez de procéder, conservez la personnalisation dans un système de gestion de versions, documentez la procédure de reconstruction et testez les mises à jour dans un environnement de test avant de les déployer en production.

Vérifiez le résultat et résolvez le problème en fonction des symptômes.

• Le logo de la page d'accueil n'a pas changé : vérifiez que vous avez bien remplacé le fichier dans le bigbluebutton-defaultrépertoire des ressources du serveur actif, puis désactivez la mise en cache du navigateur. Si la page publique est diffusée par un proxy ou un portail distinct, vérifiez quel système en est propriétaire.
• Le logo de la réunion n'apparaît pas : vérifiez que le paramètre de zone de marque est activé, que le serveur a été redémarré, que la nouvelle réunion a été créée avec le logoparamètre et que l'URL de l'image fonctionne pour un navigateur non authentifié.
• Le logo s'affiche mais son apparence est incorrecte : vérifiez les proportions, les zones transparentes et le contraste de l'image source. Ajustez l'image source plutôt que de l'étirer dans l'interface.
• Certains participants voient une zone vide : testez l’URL de l’image depuis un autre réseau et un autre appareil. Un pare-feu, une restriction d’accès, un certificat TLS invalide ou une URL expirée peuvent empêcher le chargement de l’image par le navigateur des participants.
• Les couleurs et le texte restent inchangés : le remplacement du logo du serveur ne modifie pas l’interface du client de réunion. Utilisez le développement d’un client personnalisé si ces éléments d’interface doivent être modifiés.

Pour évaluer le succès, il faut se fier à l'emplacement et à la cohérence du résultat : la page d'accueil affiche le logo de remplacement ; une réunion test nouvellement créée affiche le logo de la réunion dans la zone de marque prévue ; et, si vous avez développé un client personnalisé, les modifications d'interface demandées restent présentes tout au long du processus de connexion et de réunion. Une petite réunion test constitue un point de validation plus fiable que la simple vérification d'un onglet de navigateur en cache.

Les options de personnalisation de BigBlueButton sont volontairement limitées au niveau de la configuration. Les chemins d'accès aux logos intégrés couvrent les besoins d'identité visuelle courants, tandis qu'une refonte complète de l'interface nécessite la création et la maintenance d'un client personnalisé.