Goal

Goal shows a live progress bar in OBS and other tools that support browser sources. Use it for sub goals, donation goals, follower goals, bit goals or mixed goals where several activity types should count together towards a common goal.

You define how much each activity type adds to the goal. Other currencies will be converted into your preferred one using today’s rates. You can add multiple goals to the same widget and it will switch to the next goal when the current one is reached.

Quick setup

1. Open the Synchra Dashboard.
2. Go to Widgets.
3. Create a Goal widget.
4. Add a goal with an amount and title.
5. Pick Points or Currency display.
6. Set the base amount and start date.
7. Select which sources should count toward the goal.
8. Click Widget URL and copy the URL.
9. Add it to OBS as a Browser Source.

Goal queue

Add more goals when you want the widget to continue automatically after one goal is completed.

Each goal has its own additional amount and title. The widget keeps a cumulative progress total and calculates the active target by adding the amounts of the current and previous goals.

For example, goals with amounts of 100, 200 and 50 have cumulative targets of 100, 300 and 350. If the total reaches 125, the widget switches to the second goal and shows 125 / 300. Progress is never reset or discarded when the active goal changes.

Customization

You can customize the goal queue, base amount, default activity value, display mode, unit, currency, dates, sources, multipliers, colors, font, size, padding, border and visibility settings.

Custom CSS

Goal can be styled using custom CSS. Start with the built-in settings first. Use custom CSS when you need a specific layout, glow, shadow, background or animation detail.

CSS order: built-in CSS, Theme CSS, then Widget CSS. Later rules win at equal specificity.

HTML structure

Simplified generated markup; optional elements are marked.

<section
  class="goal-widget"
  data-display-mode="points"
  data-complete="false"
  style="--goal-widget-progress: 42%"
>
  <div class="goal-widget__title">Community upgrade</div>
  <div class="goal-widget__value">420 / 1,000</div> <!-- Optional -->
  <div class="goal-widget__bar">
    <div class="goal-widget__fill"></div>
  </div>
  <div class="goal-widget__deadline">2 days left</div> <!-- Optional -->
</section>

Layout: wrapping flex row; title and value first, then the full-width bar and optional deadline.

CSS classes

Class	Description
.goal-widget	Root container. It is a wrapping flex row and owns the widget theme variables.
.goal-widget--disabled	Added when disabled. The built-in CSS hides the widget.
.goal-widget__title	Goal title. It wraps long words and shares the first row with the value.
.goal-widget__value	Optional current value, target value or both. Numeric text stays on one line.
.goal-widget__bar	Full-width progress track and clipping container.
.goal-widget__fill	Live progress fill inside the track. Its width transitions when progress changes.
.goal-widget__deadline	Optional time-left text below the bar.

Data attributes

All attributes below are on .goal-widget.

Attribute	Description
data-display-mode="points"	Goal values are formatted as points.
data-display-mode="currency"	Goal values are formatted as currency.
data-complete="false"	The active goal has not reached its target.
data-complete="true"	The active goal has reached its target.

CSS variables

Variable	Value type	Controls
--goal-widget-title-color	CSS color	Goal title color.
--goal-widget-secondary-text-color	CSS color	Deadline color.
--goal-widget-background-color	CSS color	Root background. Alpha colors keep the OBS canvas visible.
--goal-widget-border-color	CSS color	Root border color.
--goal-widget-progress-track-color	CSS color	Empty progress track.
--goal-widget-progress-fill-color	CSS color	Active progress fill.
--goal-widget-goal-amount-color	CSS color	Current and target value text.
--goal-widget-completed-fill-color	CSS color	Fill color when data-complete="true".
--goal-widget-border-width	CSS length	Root border width.
--goal-widget-border-radius	CSS length	Root and progress-bar corner radius.
--goal-widget-bar-height	CSS length	Progress track height.
--goal-widget-padding	CSS length	Space inside the root.
--goal-widget-font-family	Font family list	Font for the entire widget.
--goal-widget-font-size	CSS length	Base text size.
--goal-widget-min-width	CSS length or percentage	Minimum root width.
--goal-widget-max-width	CSS length or percentage	Maximum root width.
--goal-widget-progress	Percentage, runtime-owned	Live fill width. Read this value, but do not override it.

Set theme variables on .goal-widget. Do not override the live --goal-widget-progress value.

Custom font

Get a font import, then:

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

.goal-widget {
  --goal-widget-font-family: "Roboto", sans-serif;
}

Emphasize value and fill

.goal-widget__value {
  text-shadow: 0 0 10px currentColor;
}

.goal-widget__fill {
  box-shadow: 0 0 14px var(--goal-widget-progress-fill-color);
}

Completed state

.goal-widget[data-complete="true"] .goal-widget__title::after {
  content: " complete";
}

.goal-widget[data-complete="true"] .goal-widget__fill {
  box-shadow: 0 0 18px var(--goal-widget-completed-fill-color);
}