Skip to content
Craftium

Setup guide: Comic Spin Wheel

About five minutes. You need a free StreamElements account and the files from your Etsy download.

Before you start

  • A free StreamElements account, logged in with the channel you stream on.
  • Your Etsy download, unzipped. The wheel files are in the folder spin-wheel: four files html.txt, css.txt, js.txt and fields.txt in the folder of your style, or in spin-wheel/bundle for the bundle with the style switch.
  • A computer with Chrome, Edge or Firefox. The StreamElements editor does not work well on phones.

Set up the wheel in StreamElements

  1. Open Overlays

    Log in at streamelements.com and click Overlays in the menu on the left. Already using our Comic Chat? Put the wheel into the same overlay and go on with step 3.

  2. Create a new overlay

    Click New overlay, choose 1080p (1920 × 1080) and click Start. Close the intro tour and give the overlay a name.

  3. Add a custom widget

    Click Add widget (the + button), then Static / Custom and Custom widget. A small box appears in the top left corner.

  4. Open the code editor

    With the new widget selected, click Open editor on the left. You see five tabs: HTML CSS JS Fields Data.

  5. Replace all four tabs

    For HTML, CSS, JS and Fields: open the matching file (for example html.txt), copy everything, click into the tab, select all with Ctrl + A (Mac: Cmd + A), delete and paste. Leave Data as it is and click Done.

    Replace all four, even if a tab looks fine. StreamElements fills CSS and JS with an example widget.

  6. Set the size

    A new custom widget is only 290 × 180 pixels. Open Position, size and style and set the width to 600 and the height to 890 for the full wheel with title, card and goal bar. Then drag the box to its place.

    Any size works: the wheel always fits and is never cut off. A small corner over your webcam: about 390 × 460 with title and goal bar switched off.

  7. Write your fields

    In the widget settings open Wheel fields: one field per line, 2 to 12 fields. The wheel divides itself.

    A bar and a number make a field more or less likely: Giveaway | 0.5 comes half as often, Spin again! | 2 twice as often, | 0 switches a field off. Leave the example fields and the wheel shows them in the language you choose.

  8. Save and test

    Click Save. Then click Test: spin the wheel, Test: a new sub and Test: goal +1.

    Test buttons work after the first save and only in the editor. To see them in OBS, switch on Test buttons also work in OBS.

What makes the wheel spin

Triggers: under Spin triggers choose new subs and resubs, gifted subs (one spin per gift or per gifted sub, up to 10), bits and tips from a minimum, a channel point reward, a chat command (default !spin, only you and your mods, with a cooldown for viewers), follows and raids. Several spins wait in line and run one after the other.

Channel point reward: in the Twitch Creator Dashboard open Viewer Rewards → Channel Points → Manage Rewards & Challenges and click Add New Custom Reward. Give it exactly the name in Name of that reward on Twitch, by default Spin the wheel (capital letters do not matter). Channel points need Twitch Affiliate or Partner.

Goal bar: under Goal bar choose what counts (subs, follows, bits or tips) and your goal. The count comes from your StreamElements session, the same one the StreamElements goals use, so it survives a restart of OBS. Add to the count adds a fixed number, for example subs from before.

Mod commands: you and your mods type !wheel hide and !wheel show (the wheel leaves and comes back, spins wait meanwhile), !wheel clear (drop waiting spins) and !wheel reset (goal bar back to start, the celebration can come again). A hidden wheel and a reset survive an OBS restart. Change the word in Command word for you and your mods, empty = off.

Add the overlay to OBS

  1. In your list of overlays on StreamElements open the menu … of the overlay and click Copy URL. Keep this link private: it contains a key to your account.
  2. In OBS Studio click + under Sources and choose Browser. Paste the link as URL and set Width 1920 and Height 1080.
  3. For the tick and win sound switch on Control audio via OBS: the wheel then gets its own slider in the audio mixer.
  4. Leave Shutdown source when not visible and Refresh browser when scene becomes active switched off, otherwise the wheel reloads at every scene switch.

Streamlabs Desktop: Add Source → Browser Source, same link and the same settings.

More settings

Click the widget in the StreamElements overlay editor; the settings appear on the left. Click Save after changes.

SettingWhat it does
Comic styleBundle only: Pop Art, Manga or Neon. Switch anytime.
Language of the labelsTitle, cards and result in English, Deutsch, Español, Português or Français.
Size inside the widget box50 to 100 %: smaller inside the box, never cut off.
Own title / Own goal labelYour own words. Empty = the label of your language.
Show the title / Show who triggered the spin / Show the goal barShow or hide the title, the card with the name and the goal bar.
Wheel visibleAlways on screen, or only while spinning: the wheel pops in and hides again.
Sound / VolumePointer ticks and a win sound per style, made in code. Volume 0 to 100 %.
Color themeClassic, night or pastel colors of your style.
Calm modeNo flashes, no flicker, the wheel still spins.

Help

Nothing shows up
  • All four tabs replaced and Save clicked?
  • Box bigger than 290 × 180?
  • OBS browser source at 1920 × 1080 with the link of the right overlay?
  • In OBS open the source and click Refresh cache of current page.
A sub came in, but the wheel did not spin

Check Spin on new subs and resubs. For bits and tips check the minimum. Several spins wait in line; the next one starts after the result.

The channel point reward does nothing

The reward name must match the field exactly (capital letters do not matter). The reward lives on Twitch, not in StreamElements, and needs Affiliate or Partner.

The command does nothing

By default only you and your mods may use it, and viewers wait for the cooldown. Change Who may use the command. The command must be the first word of the message.

No sound

Sound plays in OBS. In the editor your browser may block it until you click into the page. In OBS switch on Control audio via OBS and check the mixer.

The goal number is wrong

The count is your StreamElements session and resets with your session settings in StreamElements. Use Add to the count for subs from before.

Too much flashing for my viewers

Switch on Calm mode: no flashes, no flicker, the wheel still spins.

Testing with Emulate

Emulate in the overlay editor sends test subs, tips and cheers (below your bits minimum nothing spins). They count on the goal bar until the overlay reloads; StreamElements does not add them to your session. Channel points cannot be emulated, test them with a real redemption. Careful: “Preview LIVE on stream” is preselected.

Still stuck?

Write to us via Etsy messages or at craftium.berlin@gmail.com. Tell us your style, your streaming software and what you see; a screenshot of the editor helps. Never send us your overlay link.

Updates

Updates for version 1.x install themselves when the overlay loads, and your settings stay. Only if the editor shows an update note:

  1. Open the overlay in StreamElements, click the widget and then Open editor.
  2. Replace HTML, CSS, JS and Fields with the new files, exactly as in step 5.
  3. Don’t touch Data: your settings live there.
  4. Click Done and Save.

Current version: 1.0.0