Cum să personalizezi interfața și sigla BigBlueButton prin branding

Brandingul BigBlueButton poate însemna trei lucruri diferite: schimbarea logo-ului pe pagina web implicită a serverului, afișarea unui logo în interiorul unei întâlniri sau reproiectarea clientului de întâlnire. Alegeți cea mai mică modificare care îndeplinește obiectivul. Primele două sunt modificări documentate ale configurației sau ale resurselor; o schemă de culori, o textualitate sau un aspect al clientului reelaborat necesită, în general, construirea unui client HTML5 personalizat.

Acest ghid urmează documentația de administrare BigBlueButton 4.0 disponibilă pe 6 octombrie 2026. Căile și pachetele de implementare pot diferi în funcție de versiune sau de furnizorul de găzduire. Confirmați versiunea instalată pe server înainte de a modifica fișierele și faceți mai întâi o copie de rezervă.

Alege schimbarea de branding de care ai nevoie

Sigla paginii de destinație a serverului și sigla din cadrul întâlnirii sunt separate. Înlocuirea uneia nu o înlocuiește automat pe cealaltă.

Înainte de a edita serverul

Aveți nevoie de acces la shell cu permisiunea de a modifica serverul BigBlueButton și ar trebui să știți dacă gazda este întreținută de dvs. sau de un serviciu gestionat. Dacă un furnizor controlează serverul, întrebați dacă acesta acceptă branding personalizat și dacă va păstra modificările în timpul întreținerii.

• Verificați versiunea instalată și comparați-o cu ghidul de personalizare a serverului BigBlueButton corespunzător .
• Salvați o copie a logo-ului curent și a oricărui fișier de configurare pe care intenționați să îl editați.
• Pregătiți un fișier de logo curat, care să rămână ușor de recunoscut la dimensiunea afișată pe site sau la întâlnire. Documentația nu specifică o dimensiune universală a pixelilor, așadar verificați zona reală de afișare în loc să vă bazați pe o dimensiune presupusă.
• Folosește o adresă URL a imaginii la care participanții la întâlnire să poată ajunge fără a se conecta. Preferă HTTPS și verifică adresa URL din afara serverului înainte de a o utiliza.

Schimbarea siglei implicite a paginii web

Pentru BigBlueButton 4.0, ghidul de administrare identifică sigla implicită la /var/www/bigbluebutton-default/assets/images/logo.png. Aceasta afectează site-ul web implicit deservit de server. Nu setează sigla afișată în clientul de întâlnire HTML5.

1. Conectați-vă la server și confirmați că fișierul există la calea documentată. Dacă calea este diferită, întrerupeți procesul și verificați documentația pentru versiunea instalată în loc să copiați fișierul într-un director ghicit.
2. Faceți o copie de rezervă a elementului existent. De exemplu, un administrator îl poate copia într-un fișier de rezervă datat în același director înainte de a-l înlocui. Rețineți permisiunile și proprietatea originală atunci când instalați elementul de înlocuire.
3. Plasați noul logo în locația documentată folosind numele fișierului logo.png. Verificați dacă fișierul de imagine este de fapt format PNG și dacă are suficient contrast față de fundalul paginii.
4. Deschideți pagina publică de destinație BigBlueButton într-o fereastră privată a browserului sau goliți memoria cache a browserului. Confirmați că noul marcaj apare fără a fi întins, decupat sau neclar.

Ghidul oficial oferă locația elementului, dar nu promite că un înlocuitor local va persista la fiecare actualizare a pachetului. Păstrați fișierele originale și cele de înlocuire în înregistrările de implementare și verificați din nou pagina de destinație după actualizări. Dacă sigla dispare după o actualizare, comparați fișierul instalat cu elementul salvat și reaplicați modificarea numai după verificarea instrucțiunilor actuale de lansare.

Afișați un logo în cadrul întâlnirilor

Opțiunea de branding per întâlnire documentată de BigBlueButton plasează un logo în zona de branding de deasupra listei de participanți. Două lucruri trebuie să fie adevărate: setarea clientului HTML5 displayBrandingAreatrebuie să fie activată și întâlnirea trebuie creată cu o logoadresă URL a imaginii. Un parametru de logo în sine nu va face să apară o zonă de branding ascunsă.

1. În configurația clientului HTML5, activați displayBrandingArea. În instalările documentate actuale, /etc/bigbluebutton/bbb-html5.ymleste fișierul de suprascriere local recomandat; intrările de configurare de acolo suprascriu setările clientului pachet corespunzătoare. Păstrați alte valori YAML existente la editarea fișierului.
2. Reporniți BigBlueButton pentru ca modificarea configurației să aibă efect: sudo bbb-conf --restart. Programați acest lucru într-o fereastră de mentenanță adecvată, deoarece o repornire poate întrerupe întâlnirile active.
3. Când aplicația sau clientul API creează întâlnirea, includeți un parametru personalizat în formularul logo=https://your-domain.example/brand.png. Locul exact de introducere a unui parametru personalizat depinde de integrarea care trimite /createsolicitarea BigBlueButton. Utilizați instrucțiunile pentru integrarea respectivă și nu expuneți secretul partajat al serverului în codul client-side.
4. Creați o nouă întâlnire de test și alăturați-vă acesteia. Confirmați că sigla apare deasupra listei de participanți și că imaginea se încarcă pentru un participant care nu este conectat la gazda de imagini.

Consultați referința oficială a fișierului de configurare pentru locațiile recomandate pentru suprascriere și referința API pentru parametrii de creare a întâlnirilor. Folosiți documentația corespunzătoare versiunii serverului dvs. dacă aceasta nu este 4.0.

Când ai nevoie de o rebranding completă a interfeței

Un logo în zona de branding a întâlnirii nu este același lucru cu o aplicație de întâlnire white-label. Dacă trebuie să înlocuiți culorile interfeței, etichetele sau alte elemente client încorporate, Întrebările frecvente ale BigBlueButton îi îndrumă pe administratori să configureze mediul de dezvoltare și să își creeze propria versiune a clientului HTML5. Întrebările frecvente despre branding și ghidul de dezvoltare al proiectului sunt punctele de plecare.

Această rută necesită dezvoltare și implementare. Nu este o setare rapidă a serverului, iar modificările pot necesita întreținere pe măsură ce BigBlueButton evoluează. Înainte de a investi într-o versiune personalizată, notați exact ce ecrane sau elemente trebuie modificate și verificați dacă opțiunile încorporate pentru pagina de destinație sau logo-ul întâlnirii sunt suficiente. Dacă continuați, păstrați personalizarea în controlul sursei, documentați cum să o reconstruiți și testați actualizările într-un mediu de testare înainte de a actualiza producția.

Verificați rezultatul și depanați în funcție de simptom

• Sigla paginii de destinație nu s-a modificat: confirmați că ați înlocuit fișierul în bigbluebutton-defaultdirectorul de active al serverului activ, apoi ocoliți memoria cache a browserului. Dacă un proxy sau un portal separat deservește pagina publică, verificați ce sistem deține pagina respectivă.
• Sigla întâlnirii nu apare: verificați dacă setarea zonei de branding este activată, dacă serverul a fost repornit, dacă noua întâlnire a fost creată cu logoparametrul și dacă adresa URL a imaginii funcționează pentru un browser neautentificat.
• Logoul apare, dar arată greșit: verificați proporțiile imaginii sursă, zonele transparente și contrastul. Ajustați grafica sursă în loc să o întindeți în interfață.
• Unii participanți văd o zonă goală: testați adresa URL a imaginii dintr-o altă rețea și de pe un alt dispozitiv. Un firewall, o restricție de acces, un certificat TLS nevalid sau o adresă URL expirată pot împiedica browserele participanților să o încarce.
• Culorile sau textul rămân neschimbate: înlocuirea logo-ului serverului nu modifică aspectul clientului de întâlnire. Folosiți ruta de dezvoltare a clientului personalizat dacă aceste elemente de interfață trebuie să se modifice.

Evaluează succesul după locația și consecvența rezultatului: pagina de destinație afișează marca de înlocuire; o întâlnire de test nou creată afișează sigla întâlnirii în zona de branding documentată; și, dacă ai construit un client personalizat, modificările solicitate ale interfeței rămân prezente pe parcursul întregului flux de alăturare și întâlnire. O întâlnire de test de mici dimensiuni este un punct de validare mai sigur decât verificarea unei singure file din browserul stocate în cache.

Opțiunile de branding BigBlueButton sunt limitate intenționat la nivel de configurare. Căile de creare a logo-ului încorporate acoperă nevoile comune de identitate, în timp ce o reproiectare completă a interfeței necesită deținerea unui client personalizat și întreținerea acestuia continuă.