The GoodGrad Output Page
GoodGrad provides an HTML5 webpage with a transparent background that displays your lower third graphics. This page is designed to be used as a browser source in your production software.
Transparent Background
Overlays perfectly on your video feed
Real-time Updates
Changes instantly when you press GO
1080p Ready
Designed for HD broadcast output
How GoodGrad Connects Everything
GoodGrad uses WebSockets to create real-time connections between all your devices. This means instant updates without refreshing or polling.
The Key Thing to Know
The computer running the HTML5 output page and the phone running the GoodGrad app don't need to be on the same network. They just both need internet access. The phone can be on cellular, the computer can be on venue WiFi — as long as both can reach the internet, they'll stay in sync.
Reliable Internet is Required
Everything — the scanner app, the controller app, and the output page — needs reliable internet to work properly. This is non-negotiable for the cloud-based system.
Concerned about venue internet? We get it. Stadium WiFi can be sketchy. Contact us — we have on-prem solutions for venues where internet reliability is a concern.
Scanner View
Last scanned
Sarah Johnson
Scans QR codes → adds to queue
Controller View
Now Showing
Michael Chen
Business
Up Next (3)
GO
Emily Rodriguez
Tap GO → updates lower third instantly
Broadcast Output
Michael Chen
Business Administration
HTML5 page with transparent background
Platform Setup Guides
OBS Studio
Free, open-source streaming software
Step-by-Step Setup
- 1
Add a Browser Source
In OBS, click the
+button in Sources and select "Browser" - 2
Enter the GoodGrad URL
Paste your graduation output URL into the URL field
https://goodgrad.live/output/[your-graduation-id] - 3
Set the Resolution
Set Width to 1920 and Height to 1080
- 4
Enable Transparency
Scroll down and check the box for "Shutdown source when not visible" (optional but recommended)
- 5
Position the Layer
Make sure the Browser source is above your camera/video source in the Sources list so it overlays on top
Pro Tip
If the background isn't transparent, right-click the browser source, go to Properties, and make sure "Custom CSS" is empty. OBS handles transparency automatically from the webpage.
vMix
Professional live production software
Step-by-Step Setup
- 1
Add Input
Click "Add Input" at the bottom left of vMix
- 2
Select Web Browser
Choose "More" → "Web Browser" from the menu
- 3
Enter the URL
Paste your GoodGrad output URL
https://goodgrad.live/output/[your-graduation-id] - 4
Set Resolution
Set Width to 1920 and Height to 1080
- 5
Use as Overlay
Add the browser input as an Overlay on your main output (Overlay 1-4 buttons)
Pro Tip
vMix automatically handles transparency for web browser inputs — no extra settings needed. Just make sure the input is set as an overlay, not the main program. You can right-click the input and select "Position" → "Full Screen" to ensure it covers the entire output area.
Vizrt TriCaster
Professional broadcast production system
Step-by-Step Setup
- 1
Open DDR or Buffer
Navigate to one of your DDR channels or a buffer input
- 2
Add Web Page Source
Click "Add" and select "Web" or "HTML" as the source type
- 3
Enter the URL
Paste your GoodGrad output URL
https://goodgrad.live/output/[your-graduation-id] - 4
Configure Alpha Channel
Enable "Alpha Channel" or "Key" mode to preserve transparency
- 5
Assign to DSK
Assign the web source to a DSK (Downstream Key) layer for easy overlay control
- 6
Enable the DSK
Toggle the DSK on when you want the lower third to appear on your program output
Pro Tip
TriCaster models vary in their web source capabilities. On newer models (TC1, TC2, 2 Elite), use the built-in web browser source. On older models, you may need to use NDI output from a separate computer running a browser.
Frequently Asked Questions
Why isn't the background transparent?
Make sure your production software has transparency/alpha channel support enabled for the browser source. In vMix, check "Transparent Background". In OBS, it should work automatically. Also ensure you're using the correct output URL — the page itself has a transparent background by default.
What resolution should I use?
We recommend 1920x1080 (Full HD) for most broadcasts. The lower third is designed to position itself correctly at the bottom of a 1080p frame. If you're broadcasting in 4K, you can use 3840x2160, but the lower third will scale proportionally.
How fast do updates appear?
Updates are real-time. When you press GO on the controller app, the lower third updates within milliseconds. There's no need to refresh the browser source — it updates automatically via a live connection.
Won't this introduce delay or lag?
Yes, technically there's some latency — but it's not noticeable in practice. As long as both the phone and the output computer have reliable internet, you're looking at milliseconds of delay. WebSockets are magic. The name reader says the name, you tap GO, and it appears on screen before the graduate has taken two steps.
Can I customize the lower third design?
Yes! In the GoodGrad admin panel, you can customize colors, fonts, layout, add your school logo, and configure which fields appear (name, major, honors, etc.). Changes are reflected immediately on the output page.
What if I lose internet during the ceremony?
The output page requires an internet connection to receive updates. We recommend a stable, wired ethernet connection for your production computer. If connection is lost, the last displayed graduate will remain on screen until connection is restored.
Can I use GoodGrad with other software?
Yes! Any software that supports browser sources or HTML overlays can use GoodGrad. This includes Wirecast, XSplit, Streamlabs, CasparCG, and more. The setup process is similar — add a browser/web source and enter your output URL.
Contact Us
Our US-based support team is here to help you get set up. Fill out the form below and we'll get back to you shortly.
NDI® and TriCaster® are registered trademarks of Vizrt Group. OBS Studio is a trademark of the OBS Project. vMix is a trademark of StudioCoast Pty Ltd. All other trademarks are the property of their respective owners. GoodGrad is not affiliated with or endorsed by any of these companies.