Changes preview immediately. Save when ready for OBS.
Streaming guide
Build and control a transparent wheel overlay without showing your editor on stream. SpinWheelify gives you one public, wheel-only URL for OBS and a separate private link for editing. The overlay removes page navigation, ads, and unnecessary account features so your Browser Source stays focused on the wheel.
Create the wheel first, publish the overlay second, and configure OBS last. This keeps private editing controls out of the broadcast.
Add names, choose your colors, and set the winner behavior in the studio above. The live preview updates while you work.
Select Create OBS link, then copy the Public OBS URL. This is the only URL that belongs in your Browser Source.
In OBS, open your scene, select the plus button in Sources, and choose Browser.
Paste the Public OBS URL and set the Browser Source dimensions to match the space reserved for the wheel.
Right-click the Browser Source, choose Interact, then click the wheel or press Ctrl/Cmd+Enter.
OBS Browser Sources default to an 800 × 600 viewport and 30 FPS. SpinWheelify responds to the viewport you choose, so there is no single required resolution.
| Setting | Recommendation | Why it matters |
|---|---|---|
| URL | Public OBS URL | Never paste the private editor link into OBS. |
| Width and height | 800 × 800 for a standalone wheel | A square Browser Source gives the wheel a predictable viewport that is easy to position and resize in OBS. |
| Frame rate | 30 FPS to start | Enable a custom 60 FPS rate only when your stream setup has enough performance headroom. |
| Custom CSS | No custom CSS required | SpinWheelify already renders a transparent, margin-free overlay. OBS's default transparent CSS is fully compatible. |
| Control audio via OBS | Enable for mixer control | Sends wheel audio to the OBS Audio Mixer so you can monitor, mute, and adjust its volume. |
| Shutdown when not visible | Leave off for continuity | Enabling it unloads the page when the source is hidden and can reset temporary wheel state. |
| Refresh when scene becomes active | Leave off unless needed | Turn it on only when you intentionally want the overlay to reload each time the scene becomes active. |
For the complete explanation of these options, see the official OBS Browser Source documentation.
The public overlay and the private editor serve different jobs. Keeping them separate prevents a stream URL from becoming an editing credential.
Paste this URL into OBS. It displays only the published wheel and does not grant permission to save, replace, or delete the overlay. It is safe to use as a Browser Source and can remain stable across wheel updates.
Treat this link like a password. It restores editing access in another browser, so do not paste it into OBS, show it on stream, or publish it in chat. A browser without the valid editor key can preview the wheel but cannot save changes.
Preview changes appear immediately in the studio, but the OBS overlay changes only after a successful save. Each save also extends the link expiration for another 183 days.
The main OBS preview only selects and transforms the source. To spin, select the Browser Source and choose Interact, then click the wheel or press Ctrl+Enter on Windows or Cmd+Enter on macOS. Winner display, sound, confetti, and automatic winner removal follow the settings saved with the overlay.
The wheel remains square, stays centered horizontally, and scales from the shortest viewport edge. A small top inset protects the pointer and wheel edge from clipping. Use OBS Transform controls to resize, center, or crop the Browser Source inside your scene.
Learn about positioning sources in OBSMost setup problems come from a stale Browser Source, the wrong link, or source dimensions that do not match the intended layout.
Confirm that the Browser Source uses the Public OBS URL, that the source is visible in the Sources list, and that its width and height are greater than zero. Then use Refresh cache of current page in the Browser Source properties.
Set the Browser Source dimensions again, then use OBS Transform controls to fit or center the source. The overlay keeps the wheel square, centers it horizontally, and scales it from the shortest viewport edge.
Make sure Save changes completed successfully in the studio. Refresh the Browser Source in OBS after saving so it loads the latest wheel revision.
The normal OBS canvas is not an interactive browser. Right-click the source, choose Interact, and click inside the interaction window before using the wheel or keyboard shortcut.
Start at 30 FPS and use a source resolution appropriate for your layout. Custom 60 FPS can look smoother, but it also asks more from the system running OBS.
Use the studio above, or return to the main wheel for the full editing experience.