Come personalizzare l'interfaccia e il logo di BigBlueButton con il proprio marchio.

Personalizzare BigBlueButton può significare tre cose diverse: cambiare il logo sulla pagina web predefinita del server, mostrare un logo all'interno di una riunione o riprogettare il client di riunione stesso. Scegli la modifica più semplice che soddisfi il tuo obiettivo. Le prime due opzioni riguardano modifiche documentate alla configurazione o alle risorse; una rielaborazione della combinazione di colori, della formulazione o del layout del client richiede generalmente la creazione di un client HTML5 personalizzato.

Questa guida si basa sulla documentazione di amministrazione di BigBlueButton 4.0 disponibile il 6 ottobre 2026. I percorsi e i pacchetti di distribuzione possono variare a seconda della versione o del provider di hosting. Prima di modificare i file, verificare la versione installata sul server ed effettuare un backup.

Scegli il cambiamento di branding di cui hai bisogno

Il logo della pagina iniziale del server e il logo visualizzato durante la riunione sono separati. La sostituzione di uno non comporta automaticamente la sostituzione dell'altro.

Prima di modificare il server

Per modificare il server BigBlueButton è necessario accedere alla shell con i permessi necessari ed è importante sapere se l'hosting è gestito direttamente da voi o da un fornitore di servizi. Se il server è gestito da un provider, chiedete se supporta la personalizzazione del marchio e se manterrà le modifiche durante la manutenzione.

• Verifica la versione installata e confrontala con la guida alla personalizzazione del server BigBlueButton corrispondente .
• Salva una copia del logo attuale e di qualsiasi file di configurazione che intendi modificare.
• Prepara un file del logo pulito che rimanga riconoscibile nelle dimensioni visualizzate sul tuo sito o durante la riunione. La documentazione non specifica una dimensione universale in pixel, quindi controlla l'area di visualizzazione effettiva anziché basarti su una dimensione presunta.
• Utilizza un URL per l'immagine che i partecipanti alla riunione possano raggiungere senza effettuare l'accesso. Preferisci il protocollo HTTPS e verifica l'URL dall'esterno del server prima di utilizzarlo.

Modifica il logo predefinito della pagina web

Per BigBlueButton 4.0, la guida di amministrazione identifica il logo predefinito all'indirizzo /var/www/bigbluebutton-default/assets/images/logo.png. Questo influisce sul sito web predefinito servito dal server. Non imposta il logo visualizzato all'interno del client di riunione HTML5.

1. Connettiti al server e verifica che il file esista nel percorso documentato. Se il percorso è diverso, fermati e consulta la documentazione della versione installata anziché copiare il file in una directory a caso.
2. Eseguire un backup della risorsa esistente. Ad esempio, un amministratore può copiarla in un file di backup datato nella stessa directory prima di sostituirla. Durante l'installazione della risorsa sostitutiva, tenere presente le autorizzazioni e la proprietà originali.
3. Inserisci il nuovo logo nella posizione indicata, utilizzando il nome del file logo.png. Verifica che il file immagine sia effettivamente in formato PNG e che abbia un contrasto sufficiente con lo sfondo della pagina.
4. Apri la pagina di destinazione pubblica di BigBlueButton in una finestra di navigazione in incognito oppure cancella la cache del browser. Verifica che il nuovo logo venga visualizzato correttamente, senza distorsioni, ritagli o sfocature.

La guida ufficiale indica la posizione del file, ma non garantisce che la sostituzione locale persista dopo ogni aggiornamento del pacchetto. Conserva i file originali e quelli di sostituzione nei tuoi registri di distribuzione e ricontrolla la pagina di destinazione dopo gli aggiornamenti. Se il logo scompare dopo un aggiornamento, confronta il file installato con il file salvato e riapplica la modifica solo dopo aver verificato le istruzioni della versione corrente.

Mostra un logo durante le riunioni

L'opzione di personalizzazione per riunione documentata da BigBlueButton consente di inserire un logo nell'area dedicata al branding sopra l'elenco dei partecipanti. Sono necessarie due condizioni: l' displayBrandingAreaimpostazione del client HTML5 deve essere abilitata e la riunione deve essere creata con un logoURL di immagine. Il solo parametro del logo non è sufficiente a visualizzare un'area di branding nascosta.

1. Nella configurazione del client HTML5, abilita displayBrandingArea. Nelle installazioni documentate correnti, /etc/bigbluebutton/bbb-html5.ymlè il file di override locale consigliato; le voci di configurazione in esso contenute sovrascrivono le corrispondenti impostazioni del client incluso nel pacchetto. Mantieni gli altri valori YAML esistenti durante la modifica del file.
2. Riavvia BigBlueButton affinché la modifica della configurazione abbia effetto: sudo bbb-conf --restart. Pianifica questa operazione durante un'apposita finestra di manutenzione, poiché un riavvio potrebbe interrompere le riunioni in corso.
3. Quando la tua applicazione o il tuo client API crea la riunione, includi un parametro personalizzato nel modulo logo=https://your-domain.example/brand.png. La posizione esatta in cui inserire un parametro personalizzato dipende dall'integrazione che invia la /createrichiesta BigBlueButton. Segui le istruzioni per tale integrazione e non esporre il segreto condiviso del tuo server nel codice lato client.
4. Crea una nuova riunione di prova e partecipa. Verifica che il logo appaia sopra l'elenco dei partecipanti e che l'immagine venga caricata correttamente anche per i partecipanti che non hanno effettuato l'accesso al servizio di hosting delle immagini.

Consultare la documentazione ufficiale relativa ai file di configurazione per individuare le posizioni consigliate per le sovrascritture e la documentazione API per i parametri di creazione delle riunioni. Se la versione del server in uso non è la 4.0, utilizzare la documentazione corrispondente.

Quando hai bisogno di un rebranding completo dell'interfaccia

Un logo nell'area di personalizzazione della riunione non equivale a un'applicazione per riunioni white label. Se è necessario sostituire i colori dell'interfaccia, le etichette o altri elementi client predefiniti, le FAQ di BigBlueButton indicano agli amministratori come configurare l'ambiente di sviluppo e creare una propria versione del client HTML5. Le FAQ sulla personalizzazione del progetto e la guida allo sviluppo sono i punti di partenza.

Questo percorso richiede lavoro di sviluppo e implementazione. Non si tratta di una configurazione server immediata e le modifiche potrebbero richiedere manutenzione man mano che BigBlueButton si evolve. Prima di investire in una creazione personalizzata, elenca con precisione quali schermate o elementi devono essere modificati e verifica se le opzioni predefinite per la landing page o il logo della riunione siano sufficienti. Se procedi, mantieni la personalizzazione sotto controllo di versione, documenta come ricostruirla e testa gli aggiornamenti in un ambiente di staging prima di implementarla in produzione.

Verificare il risultato e risolvere i problemi in base ai sintomi.

• Il logo della landing page non è cambiato: verifica di aver sostituito il file nella bigbluebutton-defaultdirectory degli asset del server attivo, quindi ignora la cache del browser. Se la pagina pubblica viene servita da un proxy o da un portale separato, controlla quale sistema ne è il proprietario.
• Il logo della riunione non viene visualizzato: verificare che l'impostazione dell'area di branding sia abilitata, che il server sia stato riavviato, che la nuova riunione sia stata creata con il logoparametro e che l'URL dell'immagine funzioni per un browser non autenticato.
• Il logo viene visualizzato ma ha un aspetto errato: controlla le proporzioni dell'immagine originale, le aree trasparenti e il contrasto. Modifica l'immagine originale anziché allungarla nell'interfaccia.
• Alcuni partecipanti visualizzano un'area vuota: provate ad accedere all'URL dell'immagine da un'altra rete e da un altro dispositivo. Un firewall, una restrizione di accesso, un certificato TLS non valido o un URL in scadenza possono impedire ai browser dei partecipanti di caricarlo.
• I colori o il testo rimangono invariati: la sostituzione del logo del server non modifica l'aspetto del client di riunione. Se è necessario modificare questi elementi dell'interfaccia, utilizzare la procedura di sviluppo di un client personalizzato.

Il successo va valutato in base alla posizione e alla coerenza del risultato: la pagina di destinazione mostra il marchio sostitutivo; una riunione di prova appena creata mostra il logo della riunione nell'area del marchio documentata; e, se è stato creato un client personalizzato, le modifiche all'interfaccia richieste rimangono presenti durante l'intero flusso di partecipazione e di svolgimento della riunione. Una piccola riunione di prova è un punto di convalida più sicuro rispetto al controllo di una sola scheda del browser memorizzata nella cache.

Le opzioni di personalizzazione del marchio BigBlueButton sono volutamente limitate a livello di configurazione. I percorsi del logo integrati coprono le esigenze di identità visiva più comuni, mentre una riprogettazione completa dell'interfaccia richiede la creazione di un client personalizzato e la sua manutenzione continua.