Como personalizar a interface e o logotipo do BigBlueButton

A personalização da marca BigBlueButton pode significar três coisas diferentes: alterar o logotipo na página web padrão do servidor, exibir um logotipo dentro de uma reunião ou redesenhar o próprio cliente de reunião. Escolha a menor alteração que atenda ao seu objetivo. As duas primeiras são alterações de configuração ou de recursos documentadas; um esquema de cores, texto ou layout do cliente reformulado geralmente requer a criação de um cliente HTML5 personalizado.

Este guia segue a documentação de administração do BigBlueButton 4.0, disponível em 6 de outubro de 2026. Os caminhos e os pacotes de implantação podem variar de acordo com a versão ou o provedor de hospedagem. Confirme a versão instalada em seu servidor antes de alterar os arquivos e faça um backup primeiro.

Escolha a mudança de marca que você precisa.

O logotipo da página inicial do servidor e o logotipo da reunião são distintos. Substituir um não substitui automaticamente o outro.

Antes de editar o servidor

Você precisa de acesso ao shell com permissão para alterar o servidor BigBlueButton e deve saber se a hospedagem é mantida por você ou por um serviço gerenciado. Se um provedor controla o servidor, pergunte se ele oferece suporte à personalização da marca e se preservará as alterações durante a manutenção.

• Verifique a versão instalada e compare-a com o guia de personalização do servidor BigBlueButton correspondente .
• Salve uma cópia do logotipo atual e de qualquer arquivo de configuração que você planeje editar.
• Prepare um arquivo de logotipo limpo que permaneça reconhecível no tamanho exibido em seu site ou reunião. A documentação não especifica um tamanho de pixel universal, portanto, verifique a área de exibição real em vez de confiar em uma dimensão presumida.
• Use um URL de imagem que os participantes da reunião possam acessar sem precisar fazer login. Dê preferência ao HTTPS e verifique o URL fora do servidor antes de usá-lo.

Alterar o logotipo padrão da página da web

Para o BigBlueButton 4.0, o guia de administração identifica o logotipo padrão em /var/www/bigbluebutton-default/assets/images/logo.png. Isso afeta o site padrão exibido pelo servidor. Não define o logotipo exibido no cliente de reunião HTML5.

1. Conecte-se ao servidor e confirme se o arquivo existe no caminho documentado. Se o caminho for diferente, aguarde e consulte a documentação da sua versão instalada em vez de copiar o arquivo para um diretório aleatório.
2. Faça backup do recurso existente. Por exemplo, um administrador pode copiá-lo para um arquivo de backup com data no mesmo diretório antes de substituí-lo. Lembre-se das permissões e da propriedade originais ao instalar o recurso de substituição.
3. Insira seu novo logotipo no local indicado, utilizando o nome do arquivo logo.png. Verifique se o arquivo de imagem está realmente em formato PNG e se possui contraste suficiente com o fundo da página.
4. Abra a página inicial pública do BigBlueButton em uma janela anônima do navegador ou limpe o cache do navegador. Confirme se a nova marca aparece sem estar esticada, cortada ou borrada.

O guia oficial indica a localização do recurso, mas não garante que uma substituição local persistirá após cada atualização do pacote. Mantenha seus arquivos originais e de substituição em seus registros de implantação e verifique novamente a página inicial após as atualizações. Se o logotipo desaparecer após uma atualização, compare o arquivo instalado com o recurso salvo e reaplique a alteração somente após verificar as instruções da versão atual.

Exibir um logotipo durante as reuniões

A opção de personalização de marca por reunião do BigBlueButton, documentada na documentação, insere um logotipo na área de marca acima da lista de participantes. Duas condições devem ser atendidas: a displayBrandingAreaconfiguração do cliente HTML5 deve estar habilitada e a reunião deve ter sido criada com um logoURL de imagem. Um parâmetro de logotipo por si só não fará com que uma área de marca oculta apareça.

1. Na configuração do cliente HTML5, habilite a opção `--help` displayBrandingArea. Nas instalações documentadas atuais, /etc/bigbluebutton/bbb-html5.ymleste é o arquivo de configuração local recomendado; as entradas de configuração nele substituem as configurações correspondentes do cliente. Preserve os demais valores YAML existentes ao editar o arquivo.
2. Reinicie o BigBlueButton para que a alteração de configuração entre em vigor sudo bbb-conf --restart. Agende essa ação durante uma janela de manutenção adequada, pois a reinicialização pode interromper reuniões em andamento.
3. Quando seu aplicativo ou cliente de API criar a reunião, inclua um parâmetro personalizado no formulário logo=https://your-domain.example/brand.png. O local exato para inserir um parâmetro personalizado depende da integração que envia a /createsolicitação do BigBlueButton. Use as instruções dessa integração e não exponha o segredo compartilhado do seu servidor no código do lado do cliente.
4. Crie uma nova reunião de teste e participe dela. Confirme se o logotipo aparece acima da lista de participantes e se a imagem é carregada para um participante que não está conectado ao servidor de imagens.

Consulte o arquivo de configuração oficial para obter informações sobre os locais de sobrescrita recomendados e a referência da API para os parâmetros de criação de reuniões. Use a documentação correspondente à versão do seu servidor, caso não seja a 4.0.

Quando você precisa de uma reformulação completa da interface do usuário.

Um logotipo na área de personalização da reunião não é o mesmo que um aplicativo de reunião de marca branca. Se você precisar substituir cores da interface, rótulos ou outros elementos integrados do cliente, as perguntas frequentes (FAQ) do BigBlueButton orientam os administradores a configurar o ambiente de desenvolvimento e criar sua própria versão do cliente HTML5. As perguntas frequentes sobre personalização e o guia de desenvolvimento do projeto são os pontos de partida.

Essa rota exige desenvolvimento e implantação. Não se trata de uma configuração rápida de servidor, e as alterações podem precisar de manutenção à medida que o BigBlueButton evolui. Antes de investir em uma versão personalizada, anote exatamente quais telas ou elementos precisam ser alterados e verifique se as opções de página inicial ou logotipo de reunião integradas são suficientes. Se prosseguir, mantenha a personalização no controle de versão, documente como recompilá-la e teste as atualizações em um ambiente de homologação antes de atualizar a produção.

Verifique o resultado e solucione o problema com base nos sintomas.

• O logotipo da página inicial não foi alterado: confirme se você substituiu o arquivo no bigbluebutton-defaultdiretório de ativos do servidor ativo e, em seguida, ignore o cache do navegador. Se um proxy ou portal separado estiver servindo a página pública, verifique qual sistema é o proprietário dessa página.
• O logotipo da reunião não aparece: verifique se a configuração da área de marca está ativada, se o servidor foi reiniciado, se a nova reunião foi criada com o logoparâmetro e se o URL da imagem funciona para um navegador não autenticado.
• O logotipo aparece, mas está incorreto: verifique as proporções, as áreas transparentes e o contraste da imagem original. Ajuste a imagem original em vez de esticá-la na interface.
• Alguns participantes veem uma área em branco: teste o URL da imagem a partir de outra rede e dispositivo. Um firewall, restrição de acesso, certificado TLS inválido ou URL expirado podem impedir que os navegadores dos participantes carreguem a imagem.
• As cores e a redação permanecem inalteradas: a substituição do logotipo do servidor não altera a aparência do cliente de reunião. Use o método de desenvolvimento de cliente personalizado se esses elementos da interface precisarem ser modificados.

Avalie o sucesso pela localização e consistência do resultado: a página inicial exibe a marca de substituição; uma reunião de teste recém-criada mostra o logotipo da reunião na área de identidade visual documentada; e, se você criou um cliente personalizado, as alterações de interface solicitadas permanecem presentes durante todo o fluxo de inscrição e reunião. Uma pequena reunião de teste é um ponto de validação mais seguro do que verificar apenas uma aba do navegador em cache.

As opções de personalização da marca BigBlueButton são intencionalmente limitadas no nível de configuração. Os caminhos de logotipo integrados atendem às necessidades comuns de identidade visual, enquanto uma reformulação completa da interface exige a aquisição de um cliente personalizado e sua manutenção contínua.