Everything you need to go from zero to a live stream with pro overlays in OBS.
Head to 301 Broadcast and create a free account. Once approved you'll land in your dashboard.
Go to Dashboard → Twitch and click Connect with Twitch. This links your channel so alerts fire automatically when viewers follow, subscribe, or cheer.
In Overlays, click New Overlay. Give it a name and set the canvas size — use 1920 × 1080 for a standard stream.
Open the overlay and click + Add Widget. Pick a template from the library (alert box, follower goal, chat box, etc.) or start from a blank widget.
Drag widgets anywhere on the canvas. Grab the corner handle to resize. Positions save automatically.
Click a widget's name to open its editor. Use the </> Edit Code button to customize HTML, CSS, JS, or field definitions. Field values (colors, text, thresholds) can be changed in the sidebar without touching code.
On the Overlays list, click the copy button next to your overlay URL. It looks like https://301b.com/u/yourname/overlay-slug.
In OBS, add a new Browser Source. Paste the URL. Set width/height to match your canvas (e.g. 1920 × 1080). Check Refresh browser when scene becomes active for best results.
Start streaming. Follow/sub/cheer events from Twitch will trigger your alert widgets in real-time.
Check that all widgets on the canvas have Enabled ticked in their settings sidebar. Also confirm the browser source URL is correct and that OBS has an active internet connection.
If you recently edited a widget, try right-clicking the Browser Source in OBS and selecting Refresh.
Make sure Twitch is connected under Dashboard → Twitch. The webhook subscription needs an active connection to receive events.
You can use the Test Alert button in the Alerts section to verify your alert widget is wired up correctly without waiting for a real event.
Yes — just add the same Browser Source URL to as many scenes as you like. Each Browser Source is independent, so you may want to use Make Source Global in OBS to share a single instance instead of duplicating it.
Open the widget editor (click the widget name from the overlay canvas). The right sidebar shows Field Values — these are the configurable options defined for that widget (colors, font sizes, messages, etc.). Change them and click Save.
If a field you want doesn't exist yet, you can add it in Edit Code → Fields using the JSON field definition format.
Use 1920 × 1080 for 1080p streams. Set your OBS Browser Source to the same dimensions. If you stream at 720p you can use 1280 × 720 instead, but 1080p gives you more room to place widgets.
Yes — on the Overlays list there is a Duplicate button next to each overlay. It copies the overlay and all its widgets. Individual widget duplication is not yet supported; add a new widget from the template library as the next best option.
Go to Dashboard → Overlays → your overlay → Add Widget → Import from StreamElements. Paste your StreamElements widget URL or ID. The importer pulls the HTML, CSS, JS, and field definitions automatically.
Accounts are manually reviewed. Approval is typically done within 24 hours. If it has been longer, contact support at [email protected].
Create a free account and have your first overlay live in minutes.
Get Started Free Sign in