How to update Greenlight landing page

Here is a step-by-step process to customize Greenlight, starting from text and images on the landing page to signup page and adding additional tabs in the user account for new features.
30 Dec, 2021

If you have been a BigBlueButton administrator for a while, and have used Greenlight as the front-end to access BigBlueButton, you most likely want to change the default landing page of the Greenlight.

Typically changes that we have seen being asked are:

  1. How to replace default BBB logo by my own logo
  2. How to change some text, or
  3. How to complete change the landing page with my own text, images and layout

Well, if that sounds like you, read on.

Here is a step-by-step process to change Greenlight landing page:

  1. Clone the Greenlight : git clone https://github.com/bigbluebutton/greenlight.git
  2. Open app/views/main/index.html.erb
  3. This is a ruby on rails  html.erb file, You need to not worry about that. You can use regular html. We have included a sample index.html.erb that you can use as a reference.
  4. Once you change the index.html.erb you need to create a new docker image. To create a new docker image please follow the below steps.
    – Create new docker image: docker build -t <new image name> <Dockerfile path>
    Note: Dockerfile path: <greenlight path>/Dockerfile
  5. Once the image is created reference this image in docker-compose.yml
    Change image: bigbluebutton/greenlight:v2 to image:<new image name>
  6. Finally restart the Greenlight: docker-compose down && docker-compose up -d
Sample index.html.erb
<div class="background">
 <div class="container pt-9 pb-8">
   <div class="row">
     <div class="col-md-12 col-sm-12 text-center">
       <h1 id="main-text" class="display-4 mb-6">Welcome to my cool meeting. </h1>
     </div>
   </div>
 </div>
</div>
<!-- If you want to remove “Greenlight Features” section, Delete the below line -–>
<%= render "main/components/features" %>

Do you want to know what all you can customize in Greenlight?

Header-over to our website and create a trial account (free) on a customized Greenlight. You would notice a handful of customizations including:

  1. A different landing page
  2. A different Signup page – a new field for mobile number (including country flags!)
  3. Additional tabs for new features – streaming and monitoring, and
  4. Subscription, which is a Stripe integration

Does any of these customizations interest you? Feel free to schedule a call to talk more.

You may also like …

BigBlueButton WordPress Help

Discover the BigBlueButton WordPress Plugin, a versatile tool for both online classrooms and corporate meetings. Seamlessly integrate with BigBlueButton servers, create unlimited classes, initiate sessions with a click, and enjoy extensive customization. Experience effortless hosting with enhanced security, personalized branding, and no impact on site performance. Elevate your virtual engagement effortlessly.

Save 40% on BigBlueButton Hosting

Enjoy a 40% reduction in your hosting expenses compared to AWS, Digital Ocean, and other hosting providers, enabling you to invest more in your core business. Embrace a 100% uptime, experts-managed online classroom experience today.