Skip to main content

​
What is the Twitch Polls Layer?

The Twitch Umfragen layer displays channel polls and predictions from Twitch directly on your stream overlay. When you start a poll or prediction on Twitch, the question and options appear in the layer and update live as viewers vote. You can switch the layer between:
  • Polls – standard channel polls (multiple options, vote counts).
  • Predictions – channel point predictions (always two outcomes, channel points per option).

​
Adding the Layer

1

Open your overlay

In Vision, open the overlay you use in OBS (or create a new one).
2

Add Twitch Umfragen

Click Add layer and choose Twitch Umfragen (or Twitch Polls).
3

Choose what to show

In the layer settings, set What should be displayed? to Polls or Predictions depending on what you run on stream.
4

Position and size

Drag the layer where you want it. The block grows from the bottom or top edge of the layer box (see Poll display).
5

Save and refresh OBS

Save the overlay and reload your browser source in OBS if it is already open.
Use a separate layer for polls and one for predictions if you want both on stream at different times. Each layer only reacts to the mode you selected.

​
Layer Settings

SettingWhat it does
What should be displayed?Polls or Predictions – must match what you start on Twitch.
PreviewMock data in the editor. Turn off to see live events in the editor while testing.
Preview optionsNumber of mock choices for polls (1–10). Predictions always show 2 options.
Poll displayBuild upward or Build downward – where the block is anchored inside the layer.
Hide after endSeconds to keep results visible after a poll/prediction ends, then fade out.
Fonts & colorsQuestion font, option font, container background, bar colors, corner radius, bar height.
AnimationsStandard layer in/out animations when a poll begins and ends.

​
Recent polls

When the layer is set to Polls, the layer card can show a short list of your last completed polls (title, winner, time). This is for reference in the editor only.

​
On Stream vs in the Editor

  • OBS / browser source: Live Twitch events appear automatically when the overlay is open.
  • Editor with preview on: You see sample options to design the layout.
  • Editor with preview off: Live events appear in the canvas the same way as on stream.
For local development or testing without a public webhook URL, use the production overlay URL in OBS; Twitch sends events to Vision’s servers, not to localhost.

​
Styling

Fonts, colors, corner radius, bar height, and animations are configured in the layer card. For finer control, use Advanced → Theme → Custom CSS on the layer. With custom CSS you can style the question/title and option labels, change progress bars (track, fill, leading color), highlight the leading option, and add borders, shadows, or glass effects on the container. Basic CSS knowledge (selectors, colors, spacing) is enough.

​
Where to add CSS

1

Select the layer

In the overlay editor, select your Twitch Umfragen layer.
2

Open Advanced → Theme

In the layer panel, open Advanced → Theme.
3

Paste Custom CSS

Add your rules under Custom CSS. Changes apply on the overlay when saved.
4

Check in OBS

Reload the browser source or use live sync to verify on stream.

​
How selectors are scoped

Vision automatically scopes your CSS to the selected layer so it does not affect other layers.
  • Your layer’s HTML id is derived from the layer name (spaces become hyphens), e.g. a layer named Twitch Polls → #Twitch-Polls.
  • You can use the placeholder #layer in selectors; Vision replaces it with that id.
  • If you omit #layer, selectors are prefixed with your layer id automatically.
Example: 
#layer .twitch-poll__title {
  font-size: 28px;
  text-transform: uppercase;
}

​
DOM structure

Rough hierarchy rendered on stream: 
.twitch-poll
  └── .twitch-poll__container
        ├── .twitch-poll__title
        └── .twitch-poll__choices
              └── .twitch-poll__choice (× n)
                    ├── .twitch-poll__choice-header
                    │     ├── .twitch-poll__choice-label
                    │     └── .twitch-poll__choice-metric
                    └── .twitch-poll__bar.twitch-poll__bar-track
                          └── .twitch-poll__bar-fill

​
CSS class reference

​
Root & container

ClassDescription
.twitch-pollOutermost wrapper of the poll UI inside the layer.
.twitch-poll__containerCard with background and padding; anchored to top or bottom of the layer.
.twitch-poll__titlePoll or prediction question text.
.twitch-poll__choicesVertical stack of all options.

​
Options

ClassDescription
.twitch-poll__choiceOne answer/outcome row (label + bar).
.twitch-poll__choice-headerRow with option title and vote/points count.
.twitch-poll__choice-labelOption title text.
.twitch-poll__choice-metricNumeric value (votes for polls, channel points for predictions).

​
State classes

ClassWhen it applies
.twitch-poll__choice--leadingOption with the highest votes or channel points (always on the top option).
.twitch-poll__choice--leading-finalLeading option during the fade-out after the poll/prediction ends.
.twitch-poll__choice--winnerWinning option after end (winner bar color from layer settings).
.twitch-poll__choice--loserNon-winning options after end (default: 80% opacity, scale 0.8).

​
Progress bars

ClassDescription
.twitch-poll__barBar element (track + fill).
.twitch-poll__bar-trackFull-width track behind the fill.
.twitch-poll__bar-fillFilled portion; width reflects share of total.
Colors, fonts, bar height, and corner radius from the layer settings are applied as inline styles. Use equal or higher specificity in Custom CSS (e.g. #layer .twitch-poll__bar-fill) to override them.
Polls and predictions use the same classes. The only difference on stream is the metric (vote count vs channel points) and that predictions always have two options.

​
Example styles

​
Card with blur and border

#layer .twitch-poll__container {
  background: rgba(10, 10, 20, 0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 20px;
}

​
Title emphasis

#layer .twitch-poll__title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

​
Bars and leading option (Twitch-style purple)

#layer .twitch-poll__bar-track {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
}

#layer .twitch-poll__bar-fill {
  background: #3b82f6;
  border-radius: 10px;
}

#layer .twitch-poll__choice--leading .twitch-poll__bar-fill {
  background: #9146ff;
}

#layer .twitch-poll__choice--leading .twitch-poll__choice-label {
  font-weight: 700;
}

#layer .twitch-poll__choice--winner .twitch-poll__bar-fill {
  background: #9146ff;
}

​
Loser options (after poll ends)

#layer .twitch-poll__choice--loser .twitch-poll__choice-label {
  opacity: 0.85;
}

#layer .twitch-poll__choice-metric {
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}

​
Letting Your Mods Help

Grant moderators overlay edit access if they should adjust layout or colors. Only the channel owner’s Twitch connection is used for live data; mods edit the overlay design like any other layer.