Giveaway Widget
Display an open giveaway in an OBS browser source.
Quick setup
Section titled “Quick setup”- Create a giveaway with an entry command in the Synchra Dashboard, then open it.
- Go to Widgets and create a Giveaway widget.
- Under Giveaway → Show, choose Newest open giveaway to follow new giveaways automatically, or choose a giveaway by name to keep the widget tied to it. Closing entries does not switch the selected giveaway.
- Choose which entry details to display: the entry trigger, entry count, recent participants, and time until entries close. You can show up to 10 recent participants and add an image.
- Edit the title and entry instruction. Clear either field to hide it.
- Add the Widget URL to OBS as a Browser Source.
Choose the dark Default theme or the transparent Minimal theme. You can edit either, create a theme, or customize a single widget’s colors, size, typography, and CSS.
Under Giveaway → Visible Stages, choose whether this widget shows Entry details, Draw animation, and Winner. All are enabled by default. Entry details includes the command, entry count, countdown, and recent participants while entries are open or closed, until a winner is picked. To place the draw somewhere else, create a second widget for the same giveaway selection, enable only Draw animation, and choose its anchor and styling independently. Hidden stages still follow the normal giveaway timing: hiding the draw does not show the winner early, and hiding the winner does not bring entry details back early. With Entry details disabled, the widget listens for giveaway events without fetching entry snapshots or subscribing to entry and stream updates.
Set entry and exit animations under Animation, using the same options as Activity Alerts. Choose an Anchor under Size to position the widget at a corner, edge, or center of its browser-source canvas. The anchor stays fixed as the entry, draw, and winner views change size, and canvas scaling uses the same anchor.
In the editor, open Test below the preview. Choose Draw animation and click Preview event to play the draw, winner reveal, and exit sequence. Choose Winner to keep the winner visible while adjusting colors, typography, or CSS. Reset returns to sample entries. These controls are also available when editing a theme and do not affect a real giveaway.
The widget appears while the selected giveaway is open. If the command has an end date, you can show a countdown. That deadline stops entries, not the giveaway display: the widget keeps the entry count and recent names visible, replaces entry instructions with “Entries closed”, and waits for you to draw a winner. Entry-command availability does not switch latest selection to an older giveaway.
The entry count and recent names update live.
When a winner is drawn, the widget plays a five-second draw animation using the finalized entry count, shows the winner for 30 seconds, then plays its exit animation. It then shows the newest open giveaway, or disappears if none is open. Drawing again restarts the animation, even after the previous winner has disappeared. Reopening the giveaway clears its winner and returns the widget to the entry display.
The built-in widget and custom widgets use the same lifecycle. By default, fetching the next giveaway waits until the winner and its exit animation finish. Custom code can configure the draw, winner, exit, and next-giveaway timing through synchra.useGiveaway options.
Custom CSS
Section titled “Custom CSS”Custom CSS loads after the built-in styles. The regular view has this structure:
Optional elements are omitted when hidden or when their data is unavailable. Each recent entry contains .giveaway-widget__platform and .giveaway-widget__username.
During a draw, .giveaway-widget--winner contains .giveaway-widget__winner and the shared .giveaway-winner__heading-stage, .giveaway-winner__reveal, .giveaway-winner__draw, .giveaway-winner__result, and .giveaway-winner__name elements. The root also gets widget-animation--<entry>, plus widget-animation--exiting widget-animation--exit-<exit> when leaving.
The header, trigger, count, countdown, and recent entries are direct children of .giveaway-widget, so you can rearrange them with grid or flexbox.
The regular view follows the configured minimum and maximum widths. Its title or command can make it wider; recent usernames do not change its width. The winner view has its own width in em.
Style labels and values separately with .giveaway-widget__trigger-label, .giveaway-widget__trigger-command, .giveaway-widget__entries-label, .giveaway-widget__entries-count, and .giveaway-widget__time-left.
| Variable | Controls |
|---|---|
--giveaway-widget-font-family | Widget font. |
--giveaway-widget-font-size | Base text size. |
--giveaway-widget-text-color | Primary text. |
--giveaway-widget-muted-color | Secondary text and labels. |
--giveaway-widget-accent-color | Entry command, draw wheel, and winner name. |
--giveaway-widget-entries-color | Entry count color. |
--giveaway-widget-time-left-color | Countdown color. |
--giveaway-widget-background-color | Background. |
--giveaway-widget-border-color | Border and divider. |
--giveaway-widget-border-width | Outer border width. |
--giveaway-widget-border-radius | Outer corner radius. |
--giveaway-widget-padding | Inner spacing. |
--giveaway-widget-canvas-padding | Space around the top-left widget, default 4rem (set on .giveaway-widget__canvas). |
--giveaway-widget-winner-width | Draw/winner panel width, constrained by the widget’s minimum and maximum widths. |
--giveaway-widget-min-width | Minimum widget width (280px by default). |
--giveaway-widget-max-width | Maximum width of the regular view. |
For example, to make a transparent lower-third overlay:
Draw animation and winner display
Section titled “Draw animation and winner display”The draw and winner replace the entry display inside the same widget. Both use .giveaway-widget--winner on the root and .giveaway-widget__winner as their content container. The title, entry instruction, entry count, countdown, and recent-entry list are omitted during this presentation.
| Selector | Controls |
|---|---|
.giveaway-widget--winner | Draw/winner panel background, border, padding, and width. |
.giveaway-widget__winner | Shared draw/winner colors and layout. |
.giveaway-winner__heading-stage | The “Picking a winner” and “Congratulations” headings. |
.giveaway-winner__reveal | Container for the draw and winner layers. |
.giveaway-winner__draw | Spinning wheel, countdown digits, and finalized entry count. |
.giveaway-winner__entry-count | Finalized entry count beneath the wheel. |
.giveaway-winner__result | Winner reveal layer. |
.giveaway-winner__name | Provider icon and winner display name. |
.giveaway-winner__chance | Winning probability and entry total shown after the draw. |
.giveaway-winner__chance-value | The percentage within the winning-chance text. |
The draw and result layers remain mounted during the reveal. Their aria-hidden attributes indicate which is visible: .giveaway-winner__draw[aria-hidden="false"] during the draw and .giveaway-winner__result[aria-hidden="false"] after it. Leave their visibility, transforms, and transitions intact when changing colors or typography.
Set the following variables on .giveaway-widget__winner, where the built-in styles define them:
| Variable | Controls |
|---|---|
--giveaway-winner-accent | Wheel pointer, countdown digits, and winner name. Defaults to the widget accent color. |
--giveaway-winner-accent-light | Wheel sweep trail and countdown glow, derived from the widget accent color. |
--giveaway-winner-wheel-ink | Wheel ticks and neutral rings, using the Secondary text color. |
--giveaway-winner-wheel-border | Countdown hub border, derived from the widget muted color. |
--giveaway-winner-wheel-background | Countdown hub background. Defaults to the widget background. |
--giveaway-winner-heading-color | Presentation headings, using the widget text color. |
--giveaway-winner-wheel-size | Draw wheel diameter, default 12.25rem. |
--giveaway-winner-hub-size | Countdown hub diameter, default 7rem. |
For example, style the draw independently from the entry display:
The draw/winner panel’s border switches to the widget accent color. Override its border explicitly to keep the regular border color. The Default theme also has an outer shadow; changing the border color does not remove that shadow.
Use these stable class names rather than generated CSS-module class names. Entry and exit animation settings control how the whole panel enters and leaves; they do not change the five-second draw or 30-second winner duration. Countdown, wheel, and confetti motion respect the browser’s reduced-motion preference.