Description
This is an updated version of Lyfesaver74’s Spinning Prize Wheel. Changelogs can be found at the bottom.
The spinning wheel can be used for all sorts of things to choose costumes, games, people, prizes… literally anything! This import includes an easy method to import into OBS, and most configuration can be done by editing the URL parameters. The wheel can be populated either by an included text file or by utilizing Streamer.bot’s User Groups system, meaning this works multi-platform over Twitch, YouTube, and Kick.
The core of the extension is also a prime example of HTML/CSS/JS using:
- Bi-directional WebSocket communication, including variables
- URL parameters for variables
- Read from local file
- User Group management in Streamer.bot
Video Example
This video is from the original Spinning Prize Wheel for demonstration purposes, and does not reflect the current version.
Prerequisites
Import Code & Resources (Download)
spinningPrizeWheel-2.0.5.zip (85.2 KB)
Installation
- Download the file
spinningPrizeWheel.zipand extract the folderspinningPrizeWheel - Open File Explorer and navigate to where you extracted
spinningPrizeWheel - In Streamer.bot, click the
Importbutton in the top menu - Drag the .sb file found in the folder
spinningPrizeWheelinto theImport Stringfield.
- Click Import
Updating
If you have already installed this extension, you can update by simply downloading the new zip under Resources back toward the top of this page and then overwriting the old files with the new by unzipping on top of them. Re-import the .sb file following the steps above
Configuration
Enable Streamer.bot WebSocket Server
In Streamer.bot, ensure the the WebSocket Server is running and and enable “Auto Start”. If you have changed the address port
Streamer.bot Configuration
Configuration is done by editing the action Spinning Prize Wheel 1. Settings
| Variable Name | Description | Default Value |
|---|---|---|
| Variables for OBS Config - Easy Mode | — | — |
wsHost |
Streamer.bot WebSocket Server host address | 127.0.0.1 |
wsPort |
Streamer.bot WebSocket Server port | 8080 |
wsEndpoint |
Streamer.bot WebSocket Server endpoint | / |
img |
Provide a URL to an image to add that image to the center of the wheel | ./logo.png |
| User Group Names | Create the following User Groups in Streamer.bot > Settings > Groups |
— |
entriesGroupName |
User group name for entering users to be on the wheel | Prize Wheel Entries |
winningGroupName |
User group name for users that are selected by the wheel | Prize Wheel Winner |
| Send Message to Chat | — | — |
sendAsBot |
This determines if messages sent will be sent from the connected bot account | True |
sendFallback |
If bot fails to send message, send message as Broadcaster instead | True |
sendAllPlatforms |
True - Send messages to all platforms listed in %platforms%False - only send messages to to origin platform |
True |
platforms |
Comma-separated list of which platforms to send chat messages to Choices: twitch youtube kick |
twitch |
| OBS Settings | — | — |
obsConnection |
OBS Connection ID to connect to. Connection ID list is zero-indexed | 0 |
spinningWheelSceneName |
Name of nested scene to add wheel to | [NS] Spinning Prize Wheel |
spinningWheelSpinnerSourceName |
Name of browser source for the wheel spinner to use | Wheel Spinner |
spinningWheelWinnerSourceName |
Name of browser source for announcing the wheel winner | Wheel Winner |
OBS Configuration - Easy Mode (recommended)
Easy install is done by configuring the action 2. OBS Import, then running the action ‘Spinning Prize Wheel 2. OBS Import’. It will ask you to point where the spinner index.html file is located, and then it will automatically import a scene using the OBS plugin Source Copy.
- Ensure you have the latest version of the OBS Plugin Source Copy installed (currently 0.3.0 as of this writing)
- Restart OBS if needed
- Configure settings in the action
Prize Wheel 1. Settings, variables are explained in the table aboveYou only need to edit
wsHost/wsPort/wsEndpointif your Streamer.bot WebSocket Server settings are not the default values - Ensure your OBS is connected in
Streamer.bot > Stream Apps
- Go to the trigger
Prize Wheel 2. Import, right-click theCore > Test, and clickTest Trigger
- A dialog will open up and you will need to navigate to where you extracted the
spinningWheelFolder, select theindex.htmlfile, and selectOpen - A new scene will automatically be imported opened in OBS.
Example GIF
If a scene is created, but no sources are created, then run the action Prize Wheel 2. Import a second time.
OBS Configuration - Hard Mode - Manual Installation
Expand for manual instructions
- Populate Global Variables with default values
a. Select the actionSpinning Prize Wheel [Code]
b. Under triggers, right-click the triggerCore - Test
c. ClickTest Trigger
- Copy the spinningPrizeWheel directory path
a. Open File Explorer and navigate to where you extractedspinningPrizeWheel
b. Click in the address bar and select the whole path
c. Copy the directory path to your clipboard
- Set directory path to global variable
a. In Streamer.bot, open the Global Variables window
b. Edit the global variablespinningWheelFolderPathby double-clicking it
c. Paste the directory path into the value
d. ClickOK
- In OBS, create a new scene and name it
[NS] Spinning Prize Wheel - Copy the file URL for the Wheel Spinner file
a. Open File Explorer and navigate to your folderspinningPrizeWheel
b. Openindex.htmlin your web browser
c. Select the whole address, including the starting from the"file:///.." to the ending "../index.html"
d. Copy the URL to your clipboard
- In OBS and in the scene
[NS] Spinning Prize Wheel, add a browser source, name itWheel Spinner
a. EnsureLocal fileis disabled
b. Paste the URL you copied in step 3
c. Set size to be1920 x 1080
d. EnsureControl audio via OBSis enabled
e. (optional) EnableUse custom frame rateand set it to 60
f. Tick bothShutdown source when not visible&Refresh browser when scene becomes active
g. ClickOK
- In OBS and in the scene
[NS] Spinning Prize Wheel, add a browser source, name itWheel Winner
a. EnsureLocal fileis disabled
b. Set the URL toabout:blank
c. Set size to be1920 x 1080
d. (optional) EnableUse custom frame rateand set it to 60
e. Tick both “Shutdown source when not visible” & “Refresh browser when scene becomes active”
- Copy the file URL for the Wheel Winner file
a. Open File Explorer and navigate to your folderspinningPrizeWheel>Wheel Winner
b. Openindex.htmlin your web browser
c. Select the whole address, including the starting from the"file:///.." to the ending "../index.html"
d. Copy the URL to your clipboard
- Add a global variable for the Wheel Winner URL
a. In Streamer.bot, open the Global Variables window
b. Right-click andAdd Variable
b. Variable:spinningWheelWinnerUrl
c. Value: paste the wheel winner URL you copied in step 6
d. Add?name=to the end of the value
e. Click OK
- Feel free to adjust the transform sizes of the sources in the scene
[NS] Spinning Prize Wheel - Continue on to Usage
Advanced Configuration
Advanced configuration can be done by editing the script.js file in your spinningPrizeWheel folder using any text editor (VS Code, Notepad++, Notepad, etc).
- You can change the colors for each section if you want by changing the HSL values (Google if you need to find the HSL of your colors) by editing the values on (or around) lines 65-72 of
script.jsfile.
Changes made to script.js will not be officially supported.
Usage
You can have up to about 90 entries on the wheel before the wheel starts to visually glitch from having too many entries.
Technical Overview
- Triggering the wheel spin will show the spinner in OBS
- Once loaded, the wheel will connect to Streamer.bot via WebSocket server to retrieve the entry data (either from the text file or from the user group)
- Once entry is loaded, the wheel will begin spinning
- Once stopped, the winner data is sent back to Streamer.bot via WebSocket
In order to display the winner in OBS, the Wheel Winner browser source uses a URL parameter called name in order to dynamically display text. The sub-action Set Browser Source URL is used to update that URL parameter.
Wheel Winneroverlay is shown
a. Variable%winner%is sent over WebSocket from the Spinner to Streamer.bot. Example:kermitthepoggies
b. Chat message announces%winner%
c. Global variable~spinningWheelWinnerUrl~is retrieved. Example:file:///D:/stream/spinningPrizeWheel/Wheel Winner/index.html?name=
d. Wheel Winner browser source URL is updated with updated URL:~spinningWheelWinnerUrl~%winner%. Example:file:///D:/stream/spinningPrizeWheel/Wheel Winner/index.html?name=kermitthepoggies
e. Show OBS source forWheel Winner
f. Overlay appears with confetti andkermitthepoggiesdisplayedWheel SpinnerandWheel Winnersources are hidden after a delay- (optional) If spinning a user group, the winning user is added to the user group for entry winner and will receive special permission to run the chat command
!claim - (optional) The user who runs
!claimgets their user info added to thewinners.csv, which can be referred to later and opened in spreadsheet software
Custom Entry Spin
These types of spins use the file names.txt to fill the wheel slices. You can manually edit the file names.txt and add one entry per line, or use the following actions to be able to adjust the text file via action/chat command
| Action Name | Command Name | Description |
|---|---|---|
0. Spin (Custom) |
!spinCustom!customSpin!spinw!wspin |
This action will make the wheel visible, which will in turn start the wheel. |
Custom Entries Add |
!entryTextAdd!addTextEntry!addCustom!customAdd |
- This will take %rawInput% and add it to the file names.txt. You can use triggers Command Triggered or Reward Redemption- You have the option of enabling duplicate entries, which will create another slice of the same entry text. |
Custom Entries Remove |
!entryTextRemove!removeTextEntry!removeCustom!customRemove |
This will take %rawInput% and attempt to remove it from the file names.txt |
Custom Entries Clear |
!clearTextFile!clearCustom |
This will clear the entire file names.txt |
User Entry Spin
These types of spins require viewers from the platforms twitch, youtube, or kick to type a chat command !enter in order to be added to a user group, which then will populate the wheel slices. Each platform is accounted for when the user types the command.
| Action Name | Command Name | Description |
|---|---|---|
0. Spin (User Group) |
!userSpin!spinuser!uSpin!spinU |
This action will make the wheel visible, then the wheel will retrieve the list of users in the user group |
Clear Entries |
!clearUserEntries!clearUser |
Moderators only - Clear all users from the User Group %entriesGroupName% |
Clear Winners |
!clearUserWinners |
Moderators only - Clear all users from the User Group %winningGroupName% |
Command Add User to Group |
!enter |
The user who runs this command will be entered into the User Group to be part of the spin |
Command Remove User from Group |
!unEnter!removeEntry |
The user who runs this command will be removed from the User Group |
User Entries Close |
!closeEntries!entriesClose |
Moderators only - This will disable the commands to enter or remove entry from the User Group |
User Entries Open |
!openEntries!entriesOpen |
Moderators only - This will enable the commands to enter or remove entry from the User Group |
Winner Announce |
This action is automatically triggered if the wheel spin was for a user group and will add the user selected by the wheel to the User Group %winningGroupName% and send a message to the chat informing the winner to run the claim command |
|
Winner Claim |
!claim |
Winners can confirm and claim their prize. Their user information will be added to winners.csv to be reviewed by the broadcaster at a later time |
Changelog
2026-09-28 v2.0.5
New
- Added Kick Support
Update
- Exported for Streamer.bot v1.0.7
- Updated Streamer.bot Client to 2.0.1
Bug Fix
- Removed Trovo (RIP) for Streamer.bot v1.0.5+
2025-08-01 v2.0.4
New
- Added a Set Argument sub-action in the action ‘Spinning Prize Wheel Add Custom Entry’ to allow adding duplicates into the text file, this setting is disabled by default
Update
- Updated script.js to allow duplicate entries on the wheel
2025-07-31 2.0.3
Update
- WebSocket Broadcast includes ‘extensionName’ with contents ‘spinningPrizeWheel’ and updated script.js
- Packaged logo.png for full offline functionality
- Packaged streamer-bot for [email protected] for full offline functionality
2025-05-15 v2.0.2
Update
- Fixed import code including unrelated actions
Initial Changes
New
- Add easy import using Source Copy plugin (minimum version 0.2.4 required)
- Add a ticking sound while the wheel spins - attributed to door15studio
- Add new option to use User Groups instead of a text file to manage entries
- Add chat command actions for managing text file and user group entries
Update
- Switched JavaScript WebSocket code to use Streamer.bot Client library
- Moved all configuration to URL Parameters
Contributors
Lyfesaver74
Whipstickgostop
Rondhi
This extension was developed from a Codepen by Ryan Mulligan
