Set up a spin wheel in OBS

Step by step

// How it works

1. 01

   Set it up in the Config Hub

   Open the Config Hub, pick the Zufallsrad (the prize wheel), enter your Twitch channel and click Next. Tick the terms of use, choose a folder and save. The hub writes widget.html and config.js to the games/zufallsrad folder. It needs Chrome or Edge.

2. 02

   Add it as a browser source in OBS

   In OBS click the plus under Sources, then Browser. Tick Local file, choose the widget.html in the games/zufallsrad folder, width 1920, height 1080, OK. At the end the hub asks whether you went this way or pasted the address into the URL field, and gives you the finished file:/// address to copy for either. Out of the box the wheel only appears to spin and is invisible in between. !rad shows it for good, !rad aus hides it again. If any of these moves trips you up, the general guide to browser sources walks through them in detail.

3. 03

   Bring in your entries from a spreadsheet

   In the hub, on the Zufallsrad, go to Content from a spreadsheet, click Import, then get the template. It is an Excel file with the columns Entry, Weight, Wheel and Colour and two sample wheels. Entry is what shows on the wheel. Weight is empty or a number: 2 means twice the space on the wheel and twice as often. Colour is optional, as #rrggbb. Fill it in, save as .xlsx or .csv and pick it under Upload file. The hub shows which rows it recognised before anything is saved, then writes them to felder.js next to the overlay. Duplicate rows within one wheel are removed on the way, the same entry in two wheels stays in both. To make an entry come up more often, use the Weight column instead of a second row.

4. 04

   Several wheels in one source

   The Wheel column splits your entries into several wheels. Every name in that column becomes a wheel of its own, for example Next game and Forfeits. Rows without a name go to the wheel called My wheel. On stream you switch with !rad forfeits or in the control panel. The name does not have to be exact, !rad forf finds Forfeits too. There is no switching while a spin is running.

5. 05

   Spin from chat

   !drehen spins the active wheel, !drehen forfeits a particular one. Out of the box only you and your mods can use it, otherwise chat would spin it every second. Turn on Viewers can spin in the hub and anyone can, with a cooldown per viewer. The result stays large under the wheel for 8 seconds. With a bot that can write to chat, it can go to chat as a message too. If a mod types !drehen while the wheel is still turning, nothing happens. Who may spin and what the commands are called is set in the hub under All settings of this overlay, in the Commands block.

6. 06

   Run a giveaway with !mitmachen

   !verlosung 60 opens a giveaway for 60 seconds. The wheel shows the command and a clock. Every viewer who types !mitmachen in that time lands on the wheel once, a second !mitmachen does not count. Because the stream runs a few seconds behind chat, the wheel still takes late entries for 5 seconds after the clock runs out. Then it spins on its own and the winner appears large underneath. The winner comes off the wheel right away: while the name is still shown large under the wheel, another !drehen draws the next winner from the remaining names. After that the wheel you had selected before the giveaway is back, and a later draw works with !drehen giveaway. Channel points never spin the giveaway wheel: a redemption during the giveaway waits and then spins your selected wheel. !verlosung zu closes the giveaway at once, !verlosung abbrechen cancels it without a spin. If the wheel should not spin on its own after the clock, turn off Spin on its own afterwards in the hub.

7. 07

   Spin with channel points

   Viewers can spin themselves with Twitch channel points. That needs a bot connected to your Twitch account that passes the redemption on to the overlay: Streamer.bot, StreamElements or Firebot. An overlay in OBS cannot sign in to Twitch on its own. Create a reward in your Twitch dashboard, for example Spin the wheel. In the Config Hub pick your bot and enter the reward's title under Channel points, spelled exactly as on Twitch. It then spins the currently selected wheel. For several rewards, or one that spins a particular wheel, the config.js in the overlay's folder holds a ready-made channelPointsTriggers example to uncomment, along with channelPointsSource for your bot. There, command: '!drehen forfeits' makes a reward spin one particular wheel. Every redemption is one spin. If a spin is running, the redemption waits in a queue until its turn, none get lost. Twitch only offers channel points to affiliates and partners.

8. 08

   Add the control panel as an OBS dock

   The most comfortable way to spin needs no chat. The control panel is a second page next to the overlay, the host.html, and it goes into the OBS window as a dock instead of into a scene. Enter the path of your folder once in the OBS step of the hub, and the finished address for the control panel appears there. In OBS open Docks in the top menu bar, then Custom Browser Docks (up to OBS 29 under View), enter a name, paste the address, Apply. In the panel you spin, switch wheels, edit entries, open a giveaway and take a winner off the wheel. Do copy the address from the hub: the dock and the source only find each other when both addresses have the same form.

Frequently asked

// In short