Lower Thirds for OBS

DongleControl includes a built-in lower third overlay designed for live streaming. Add it as a browser source in OBS (or any streaming software) and it automatically displays live scripture references and worship lyrics as a transparent overlay on your stream.

How It Works

The lower third is a web page with a transparent background that connects to DongleControl over your network. When you go live with a Bible verse or worship song, it automatically appears as a polished overlay β€” no manual input needed.

It supports:

  • Scripture β€” verse reference, text, and translation
  • Bible Browser verses β€” live verses from the Bible Browser with verse numbers
  • Worship lyrics β€” song lyrics with section display
  • Auto-clear β€” overlay disappears when you clear or switch to non-text content

Setting Up in OBS

  1. In OBS, click + under Sources and choose Browser
  2. Set the URL to:
    http://<your-computer-ip>:7770/obs/lower-third
    
  3. Set the width and height to match your stream resolution (e.g., 1920x1080)
  4. The lower third will auto-discover your DongleControl instance

That’s it. The overlay connects automatically and shows content whenever you go live with scripture or lyrics.

Auto-Discovery

When the lower third page loads, it scans your network for a running DongleControl instance:

  • One server found β€” connects automatically
  • Multiple servers found β€” shows a picker so you can choose which one
  • No server found β€” shows a manual IP entry field as a fallback

Once connected, it caches the server for faster reconnection next time.

What It Looks Like

The overlay appears at the bottom of the frame with smooth fade-in/fade-out animations:

  • Scripture: Reference at the top, verse text below, translation label
  • Lyrics: Song lines displayed with configurable font and text shadow
  • Transparent background: Only the text is visible β€” perfect for overlaying on camera feeds

Tips

  • Position it: In OBS, you can move and resize the browser source to place the lower third exactly where you want it
  • Layer it: Put the browser source above your camera feed but below any other overlays
  • Multiple instances: You can add multiple lower third sources if needed (e.g., one for each scene)
  • Custom CSS: In OBS browser source settings, you can add custom CSS to override fonts, colors, or sizing

Supported Streaming Software

The lower third works in any software that supports browser sources:

  • OBS Studio (free)
  • Streamlabs
  • vMix
  • Wirecast
  • XSplit