How to Set Up a Spin Wheel Widget in Streamlabs

How to Set Up a Spin Wheel Widget in Streamlabs


Hey, this is Dustin from Streamlabs. Today
I’m going to show you how to set up a spinning wheel widget in Streamlabs OBS. This is a
neat tool that can be used to generate hype for giveaways and other contests with random
selection. You’re going to want to open up Streamlabs
OBS and find “Spin Wheel” from the left side of your dashboard under “Widgets”. In this tutorial, we will make lots of little
changes and be checking how they look by testing in the preview, so in the upper right launch
the widget preview, and test by clicking “spin wheel”. This is how the default wheel looks
right now, but we’re going to show you how to customize it. In the first section you can organize your
categories. Let’s say I have some t-shirts and hoodies to give away from my merch store,
and one high ticket item like a mouse. Maybe our channel’s theme uses red and black colors
so let’s change those as well. Okay let’s save this and see how this looks
in our preview. The black text is a little hard to read right now but we’ll show you
how to fix that later. Next we’ll go to our section weights. Here
we can change the pattern, or order, they appear on the wheel and how large of a section
they will make of the wheel–increasing or decreasing the odds of landing on it. Maybe
we have a a lot of t-shirts to give away but are pretty limited on hoodies as they’re
more expensive, and only have one mouse to give away. Let’s set the mouse to ‘1’
so it will have a very small slice of the wheel, and hoodies to ‘2’, and t-shirts
to ‘3’. Let’s also make sure they alternate. Let’s save and preview again. Looking much
better but we still need to fix the font color. For the result, we can choose what message
we want to appear, something simple like “Congratulations, you won a hoodie” works, so let’s write
that and leave “result” in brackets to placehold whatever the item is. Next we can change the font, size, weight,
and color. Let’s make text color white so we can read it better, and the weight a little
heavier. Save and see if that looks better. The words are a little too stretched out making
them difficult to read still, so we can adjust the label text height and width to keep the
letters together. Let’s fix this by changing the label text width to 2. For the next section, if you have some knowledge
of HTML, CSS, and Javascript–or a designer friend who does–you can customize your chat
box even more by enabling custom code. We’ll leave this disabled and stick with the old
school theme we chose earlier. Now click Save Setting and preview. You can further stylize your wheel by playing
with the result color, border color and width, and speed at which the wheel spins. You can
also add suspense by upping the slowdown rate. We can also choose to hide the Spin Wheel
when it’s not in use, however many seconds after it finishes spinning. If we have this
set to 0, it will not be hidden at all. The ticker can also be modified, we can choose
the image, size, and sound as the wheel spins. Let’s pick a random image and leave the
rest as-is. Similarly, we can enable a custom image for
the center circle. Be sure to use an image that is 1:1 ratio (square or circle). Let’s
pick a fun image here, we don’t need to adjust the image border, color, or width for
this. Lastly, we can also enable HTML and CSS to really customize, but for now we’ll
leave this with the settings we chose. A lot of changes have been made, let’s save
and see how it looks now. Great! Now we just have to add this to our scene in Streamlabs
OBS. In the editor, under sources go to the plus
sign, add “Spin wheel” and press “add source”. Name it what you’d like. When
you get it just how you want it to look, move it over to where you want it on your scene. Once placed, you can test the wheel by going
to the tab and pressing “spin wheel”. If you aren’t using Streamlabs OBS, you
can place the widget by pasting the URL from the top as a browser source. Be sure to download Streamlabs OBS by visiting Streamlabs.com and hop into our Discord server at Discord.gg/stream for live community support Check out the links in the description below

About the Author: Michael Flood

23 Comments

  1. But… what do. if instead of wheel…CAPTCHA
    Just watch this video. https://youtu.be/UfOU10BSk0g. Yes. understand. The video is bad. and you need only 17
    (+ This is russia video… you have russia channel?)

  2. Sucks that we have to go into the dashbord to do this. If we could right click it in scenes and find an option 'spin' it would be super convenient.

  3. The Result Template text does not actually show up in the stream. How do I make it show up. The text only shows in the browser when you are testing it.

  4. Can I automatically populate the wheel with names of those who pay to enter the giveaway in the local chat bot?

  5. How tout use thé wheel With shortcut Keys / Comment utiliser la roue avec les touches raccourcis

  6. hey everyone! in case you're still trying to figure out what tab they're talking about – go to the LIVE tab in SLOBS, then the LIVE ACTIONS tab. scroll down a little bit and you'll see Wheel Spin there 🙂

  7. You guys really need to add the ability to embed the spin button into obs or stream deck or with chat commands

  8. Chicos a los que no les aparezca el resultado, solo tienen que cambiar la resolucion de la imagen donde Colocan el URL,
    esta por defecto en 800×600, deben cambiarlo almenos 800×1200

  9. I'd love to see the wheel used as a raffle type system. People can enter the draw to "be on the wheel" then we can pick a winner by spinning it. Also giving us the option to either add people multiple times and with the "chance to win" sliders depending on their channel ranks or tickets bought etc :p

  10. Mmmm result only shows in browser but not in OBS? The wheel is fine.. no result though? How do we fix this?

  11. Too bad it STILL looks terrible. Can't get the names to look good if you have drastically different lengths. One word vs 3, for example.

Leave a Reply

Your email address will not be published. Required fields are marked *