Giveaway Widget

Display an open giveaway in an OBS browser source.

Quick setup

Create a giveaway with an entry command in the Synchra Dashboard, then open it.
Go to Widgets and create a Giveaway widget.
Choose Latest to follow the newest open giveaway, or Specific to select one giveaway. The entry deadline and command availability do not change which open giveaway is selected.
Choose whether to show the entry command, entry count, recent entries, and countdown. You can show up to 10 recent entries (default: 3) and add an image.
Edit the title (default: “Giveaway”) and entry instruction (default: “Type to enter”). 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.

Set entry and exit animations under Animation. They use the same options as Activity Alerts.

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

The widget stays visible and subscribed after its countdown ends, including after reloading the browser source. Explicitly closing or deleting a giveaway still removes it from latest selection; opening a newer giveaway selects that one. Latest widgets also show live draws from any giveaway on the channel, including redraws of closed giveaways that are no longer selected. Specific widgets only show draws for their configured giveaway, even when it is closed. Reconnecting refreshes the current state without replaying draws that happened while disconnected.

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

Custom CSS loads after the built-in styles. The regular view has this structure:

<section class="giveaway-widget">
  <div class="giveaway-widget__header">
    <img class="giveaway-widget__image" alt="">
    <h2 class="giveaway-widget__title">Giveaway</h2>
  </div>
  <div class="giveaway-widget__trigger">
    <span class="giveaway-widget__trigger-label">Type to enter</span>
    <strong class="giveaway-widget__trigger-command">!trigger</strong>
  </div>
  <div class="giveaway-widget__count">
    <span class="giveaway-widget__entries-label">Entries</span>
    <strong class="giveaway-widget__entries-count">128</strong>
  </div>
  <strong class="giveaway-widget__time-left">1h 15m</strong>
  <div class="giveaway-widget__recent">
    <span class="giveaway-widget__recent-label">Recent entries</span>
    <ul class="giveaway-widget__entry-list">
      <li class="giveaway-widget__entry">...</li>
    </ul>
  </div>
</section>

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.

By default, the regular view is at least 280px wide. Its title or command can make it wider, up to the configured maximum; 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 widget (set on `.giveaway-widget__canvas`).
`--giveaway-widget-winner-width`	Winner view width (default `18em`).
`--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:

.giveaway-widget {
  --giveaway-widget-background-color: transparent;
  --giveaway-widget-border-width: 0px;
  --giveaway-widget-padding: 0px;
  --giveaway-widget-entries-color: #4ade80;
  --giveaway-widget-time-left-color: #ffd166;
  text-shadow: 0 2px 4px #000;
}

.giveaway-widget__trigger {
  background: #000a;
}

.giveaway-widget__entries-label {
  color: #fff;
}