Goal Meter

Visualize advancement toward a fundraising goal with an animated progress bar.

Goal Meter is an animated progress bar that visualizes the summed amount raised for one or more Campaigns versus a goal. The component includes a count-up animation for the amount raised value and automatically updates the amount raised every minute.

Unlike other components like Impact Slider or Message Bar, Goal Meter does not include a button or link for launching a Checkout.

Code snippet

Goal Meter is installed by placing its code snippet on your website using a CMS or code editor. The code snippet is automatically generated when you create a Goal Meter in the Fundraise Up Dashboard.

Behavior

These settings control how Goal Meter counts donations toward a set goal.

Campaigns: Choose which Campaigns will be counted toward the amount raised figure. You can include multiple Campaigns.

Start date: Define a data at which Goal Meter will begin counting donations toward the goal.

End date: Define a date at which Goal Meter will stop counting donations toward the goal.

Currency: The currency that is used to display amount raised and goal values.

Goal: A static goal value. The value is specific to each Goal Meter instance and is unrelated to the goal amount that can be set for individual Campaigns.

Add amount: Set a static amount to count toward the amount raised. This value is unrelated to the offline amount value that can be set for individual Campaigns. However, both the Add amount value and the offline Amount value count toward the amount raised.

Matching funds: This option enables you to set a multiplier value for the amount raised. This functionality is useful for fundraising activities that include a sponsored match that you want to visualize.

Appearance

These settings control the visual characteristics of Goal Meter.

  • Show label: This settings hides or shows the amount raised and goal labels. By default, the option is selected. When the option is deselected, only the progress bar and the percentage of goal value are shown.
  • Labels color: The color of the amount raised and goal labels. We recommend maintaining a WCAG-compliant contrast between the labels color and the component’s background.
  • Progress bar color: The foreground color of the progress bar. We recommend maintaining a WCAG-compliant contrast between the progress bar foreground and background colors, and the background of the container where Goal Meter has been added.
  • Background color: The background color of the progress bar. We recommend maintaining a WCAG-compliant contrast between the progress bar background color and foreground colors, and the background of the container where Goal Meter has been added.
  • Border size: The width of the progress bar’s border. Range: 0-4px. When the value is set to 0px, no border is shown.
  • Border radius: The rounded of the progress bar’s corners. Range: 0-20px. A lower value will create a box-like appearance. A higher value will create a pill-like appearance.
  • Show animation: This option controls whether a count-up animation is applied to the amount raised and goal labels, and whether the progress bar foreground color is animated.

Localization

When Localization is enabled, you can set a default language for Goal Meter and configure other languages that should be used for localization.

 

In this article