Skip to content
Craftium

Setup guide: Comic Slot Machine

About five minutes. You need a free StreamElements account and your personal files from our license page (link in your Etsy download, have your order number ready).

Before you start

  • A free StreamElements account, logged in with the channel you stream on.
  • The setup on the license page: after your order number and channel, it shows a copy button for every tab (HTML, CSS, JS, Fields). Your license key is already in the code. Everything is also there as a ZIP (backup).
  • A computer with Chrome, Edge or Firefox. The StreamElements editor does not work well on phones.

Set up the slot machine 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 slot machine 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: press the matching button on the license page (for example Copy HTML) or copy the file from the ZIP, 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 machine with title, card and goal bar. Then drag the box to its place.

    Any size works: the machine 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 prizes

    In the widget settings open Prizes: one prize per line, 2 to 12 prizes. Each prize gets its own comic symbol (cherry, 7, star, bell, crown, diamond and more).

    A bar and a number make a prize more or less likely: Giveaway | 0.5 comes half as often as the others, | 0 switches a prize off. Leave the example prizes and the machine shows them in the language you choose.

  8. Set the win chance

    Under Win chance the slider sets how often a pull wins (three matching symbols), from 1 to 100 %, default 35 %. Only on a win the prize is drawn, with your weights.

    Losing pulls never show three in a row. With Losing pulls often stop just short they often end with two matching and a late third reel. Add your own text for a losing pull, and switch on Show the win chance on the machine if your viewers should see it.

  9. Save and test

    Click Save. Then click Test: pull the lever, 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 pulls the lever

Triggers: under Play triggers choose new subs and resubs, gifted subs (one play per gift or per gifted sub, up to 10), bits and tips from a minimum, a channel point reward, a chat command (default !pull, only you and your mods, with a cooldown for viewers), follows and raids. Several plays 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 Pull the lever (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 !slot hide and !slot show (the machine leaves and comes back, plays wait meanwhile), !slot clear (drop waiting plays) and !slot reset (goal bar back to start, the celebration can come again). A hidden machine 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 sound switch on Control audio via OBS: the slot machine 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 slot machine 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 pulled the lever / Show the goal barShow or hide the title, the card with the name and the goal bar.
Machine visibleAlways on screen, or only while playing: the machine pops in and hides again.
Sound / VolumeReel ticks, a knock for every stop, a win sound per style and a sad two-tone for a miss, made in code. Volume 0 to 100 %.
Color themeClassic, night or pastel colors of your style.
Calm modeNo flashes, no flicker, no running lights, the reels still spin.

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 machine did not play

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

It never (or always) wins

That is the Win chance: at 35 % about one pull in three wins, but streaks happen, like with dice. 100 % makes every pull a win.

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, no running lights, the reels still spin.

Testing with Emulate

Emulate in the overlay editor sends test subs, tips and cheers (below your bits minimum nothing plays). 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