Complete Guide to Setting Up a Transparent OBS Wheel for Twitch & YouTube Streams
A spinning wheel on stream gives viewers something to watch and a reason to take part. The Streamer Studio on this site produces a wheel as an OBS browser source with a transparent background, and it can fill itself from your chat. This guide takes you through the setup in OBS Studio, with notes for Streamlabs and Twitch Studio.
What you need
- OBS Studio, Streamlabs Desktop or Twitch Studio (any of them can show a browser source).
- A Twitch channel name, or a YouTube Live stream link and your own YouTube Data API key, if you want chat to add viewers.
- A few minutes to set up the entries and the look.
Step 1: Build the wheel in the Studio
Open the Streamer Studio. On the Wheel tab, type your entries, pick a theme and set the spin time. A longer spin builds suspense, and a shorter one keeps the stream moving. Turn on "remove winners automatically" if you want each winner to leave the wheel.
Step 2: Choose how the overlay gets its entries
There are two modes, and the choice matters:
- Standalone. The overlay connects to your chat by itself. It works in any OBS setup and on any machine, and needs nothing else running. If you use YouTube chat in this mode, your API key is part of the link, so keep the link private.
- Linked. The Studio page reads chat and controls the overlay through your browser. This only works when the Studio and the overlay run in the same browser or the same OBS (for example, the Studio as an OBS custom browser dock). The key never appears in the link.
Step 3: Add the browser source
- On the OBS overlay tab, choose the background. "Transparent" is right for OBS. Chroma-key green or blue is for software that cannot show transparency.
- Copy the Browser Source URL.
- In OBS, add a source, choose Browser and paste the URL.
- Set the width and height to match the area you want, for example 1080 by 1080 for a square wheel.
- Leave the custom CSS empty. The overlay already makes its own background transparent.
In Streamlabs Desktop, add a Browser Source in the same way. In Twitch Studio, use a Browser Source layer.
Step 4: Connect chat and test it
On the Chat tab, type your Twitch channel or paste the YouTube stream link and key, then choose your join and spin commands. By default viewers type !join to enter, and you or a moderator types !spin. Add &debug=1 to the overlay link to see a small status box in the corner that tells you whether chat is connected and how many entries there are.
Test with a second account or a friend before you go live. Check that a viewer who types the command twice is only added once, and that a spin command from a non-moderator does nothing.
Step 5: Spin on stream
You can spin from the Studio with the Space bar, from a moderator's chat command or by clicking the overlay in OBS Interact. The overlay shows the winner's name in a banner and then hides it. If you are running a giveaway, announce the rules first, and consider a verified draw so viewers can check the result.
Troubleshooting
- The wheel has a black background. Make sure the background is set to Transparent in the Studio and that no custom CSS is set in OBS.
- Viewers are not being added. Check the channel name, use the debug box and confirm the commands match what you told viewers.
- No sound. Browser sources need "Control audio via OBS" ticked to be heard on stream, and the Studio must not be muted.
- YouTube chat shows an error. The stream must be live with chat on, and the key must have the YouTube Data API v3 enabled.
- It runs out of quota. Every YouTube chat check uses some of your key's free daily allowance, so plan for a few hours of chat a day per key.
When you are ready for more, the same wheel can be reused for a regular segment: save your entries, change the theme for each stream and keep the commands the same so your community learns them.
Try the Wheels Mentioned in This Guide
Launch these free interactive spinners right in your browser.