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
