Twitch Polls & Predictions

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

Open your overlay

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

Add Twitch Umfragen

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

Choose what to show

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

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).

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

Setting	What it does
What should be displayed?	Polls or Predictions – must match what you start on Twitch.
Preview	Mock data in the editor. Turn off to see live events in the editor while testing.
Preview options	Number of mock choices for polls (1–10). Predictions always show 2 options.
Poll display	Build upward or Build downward – where the block is anchored inside the layer.
Hide while awaiting result	Predictions only. Show the layer while betting is open, hide it once the prediction locks, then bring it back with the result when it resolves. Useful for long-running predictions (e.g. a football match). Off by default – the layer stays visible the whole time.
Hide after end	Seconds to keep results visible after a poll/prediction ends, then fade out.
Fonts & colors	Question font, option font, container background, bar colors, corner radius, bar height.
Animations	Standard 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

Select the layer

In the overlay editor, select your Twitch Umfragen layer.

Open Advanced → Theme

In the layer panel, open Advanced → Theme.

Paste Custom CSS

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

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

Class	Description
`.twitch-poll`	Outermost wrapper of the poll UI inside the layer.
`.twitch-poll__container`	Card with background and padding; anchored to top or bottom of the layer.
`.twitch-poll__title`	Poll or prediction question text.
`.twitch-poll__choices`	Vertical stack of all options.

Options

Class	Description
`.twitch-poll__choice`	One answer/outcome row (label + bar).
`.twitch-poll__choice-header`	Row with option title and vote/points count.
`.twitch-poll__choice-label`	Option title text.
`.twitch-poll__choice-metric`	Numeric value (votes for polls, channel points for predictions).

State classes

Class	When it applies
`.twitch-poll__choice--leading`	Option with the highest votes or channel points (always on the top option).
`.twitch-poll__choice--leading-final`	Leading option during the fade-out after the poll/prediction ends.
`.twitch-poll__choice--winner`	Winning option after end (winner bar color from layer settings).
`.twitch-poll__choice--loser`	Non-winning options after end (default: 80% opacity, scale 0.8).

Progress bars

Class	Description
`.twitch-poll__bar`	Bar element (track + fill).
`.twitch-poll__bar-track`	Full-width track behind the fill.
`.twitch-poll__bar-fill`	Filled 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.

Guides

Overlays

Layers

Widgets

Chatbot

Events

Twitch Polls & Predictions

What is the Twitch Polls Layer?

Adding the Layer

Layer Settings

Recent polls

On Stream vs in the Editor

Styling

Where to add CSS

How selectors are scoped

DOM structure

CSS class reference

Root & container

Options

State classes

Progress bars

Example styles

Card with blur and border

Title emphasis

Bars and leading option (Twitch-style purple)

Loser options (after poll ends)

Letting Your Mods Help

​What is the Twitch Polls Layer?

​Adding the Layer

​Layer Settings

​Recent polls

​On Stream vs in the Editor

​Styling

​Where to add CSS

​How selectors are scoped

​DOM structure

​CSS class reference

​Root & container

​Options

​State classes

​Progress bars

​Example styles

​Card with blur and border

​Title emphasis

​Bars and leading option (Twitch-style purple)

​Loser options (after poll ends)

​Letting Your Mods Help

What is the Twitch Polls Layer?

Adding the Layer

Layer Settings

Recent polls

On Stream vs in the Editor

Styling

Where to add CSS

How selectors are scoped

DOM structure

CSS class reference

Root & container

Options

State classes

Progress bars

Example styles

Card with blur and border

Title emphasis

Bars and leading option (Twitch-style purple)

Loser options (after poll ends)

Letting Your Mods Help