Goal Widget

The Goal Widget 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.

Quick setup

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

Customization

You can customize the title, target, base amount, display mode, unit, currency, dates, sources, multipliers, colors, font, bar size, border and visibility settings.

Custom CSS

The Goal Widget can be styled using custom CSS.

CSS Classes

Class	Description
.goal-widget	Main goal widget container.
.goal-widget--disabled	Applied when the widget is disabled.
.goal-widget__header	Header row containing title and percentage.
.goal-widget__title	Goal title.
.goal-widget__percentage	Percentage text.
.goal-widget__bar	Progress bar track.
.goal-widget__fill	Progress bar fill.
.goal-widget__meta	Bottom row containing value and deadline.
.goal-widget__value	Current and target value text.
.goal-widget__deadline	Countdown text.

CSS Variables

Variable	Description
--goal-widget-text-color	Main text color.
--goal-widget-secondary-text-color	Value and deadline text color.
--goal-widget-background-color	Widget background.
--goal-widget-border-color	Widget border color.
--goal-widget-track-color	Progress bar track color.
--goal-widget-fill-color	Progress fill color before completion.
--goal-widget-accent-color	Percentage color.
--goal-widget-complete-color	Progress fill color after completion.
--goal-widget-border-width	Widget border width.
--goal-widget-border-radius	Widget and bar corner radius.
--goal-widget-bar-height	Progress bar height.
--goal-widget-font-family	Widget font family.
--goal-widget-font-size	Base font size.
--goal-widget-max-width	Maximum widget width.
--goal-widget-progress	Current progress percentage.

Example

.goal-widget {
  --goal-widget-bar-height: 28px;
  padding: 16px 20px;
}

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