Goal Bar Widget

The Goal Bar Widget displays a dynamic progress bar showing how much of your fundraising goal has been reached. It’s a powerful social proof tool that creates urgency and motivates donors to contribute by visualizing campaign progress in real-time.

Prerequisites

Before using the Goal Bar Widget, make sure you’ve installed the Widgets library.

Quick Setup

The fastest way to add a goal bar widget is through the Givebutter Dashboard:

Visit your Givebutter Dashboard
Select your campaign and navigate to Sharing > Widgets
Choose Goal Bar as the widget type and customize the appearance
Copy the generated code and paste it on your site

<givebutter-widget id="YOUR_WIDGET_ID"></givebutter-widget>

Manual Setup

For full control without using the dashboard, create goal bars directly with the <givebutter-goal-bar> tag:

<givebutter-goal-bar campaign="YOUR_CAMPAIGN_CODE"></givebutter-goal-bar>

<givebutter-goal-bar
  campaign="YOUR_CAMPAIGN_CODE"
  progress-bar-color="#3B82F6"
  size="lg"
></givebutter-goal-bar>

<givebutter-goal-bar
  campaign="YOUR_CAMPAIGN_CODE"
  show-raised-percentage="false"
  show-goal-amount="false"
  size="sm"
></givebutter-goal-bar>

Configuration Options

Customize your goal bar’s appearance by adding attributes to the <givebutter-goal-bar> element:

Required Attributes

Attribute	Description	Example
`campaign`	Your campaign code (from your dashboard)	`my-campaign`

Styling Attributes

Attribute	Description	Default	Type
`progress-bar-color`	Color of the progress bar fill	`green`	Hex Color Code
`background-color`	Background color of the container	`#FFFFFF`	Hex Color Code
`text-color`	Color of text labels	`#000000`	Hex Color Code
`border-color`	Border color of the container	None	Hex Color Code
`border-width`	Border width in pixels	`1`	Number
`border-radius`	Corner roundness in pixels	`0`	Number
`padding`	Inner padding in pixels	`16`	Number
`size`	Height of the progress bar	`md`	`sm`, `md`, `lg`
`max-width`	Maximum width of the widget	`100%`	CSS value
`show-amount-raised`	Show the amount raised	`true`	Boolean
`show-raised-percentage`	Show the percentage complete	`true`	Boolean
`show-goal-amount`	Show the goal amount	`true`	Boolean
`type`	Style of the goal display	`progress-bar`	`progress-bar`, `thermometer`

Examples

Default Style
Brand Colors
Minimal
Large
Thermometer

<givebutter-goal-bar campaign="YOUR_CAMPAIGN_CODE"></givebutter-goal-bar>

<givebutter-goal-bar
  campaign="YOUR_CAMPAIGN_CODE"
  progress-bar-color="#8B5CF6"
  text-color="#1F2937"
></givebutter-goal-bar>

<givebutter-goal-bar
  campaign="YOUR_CAMPAIGN_CODE"
  show-raised-percentage="false"
  show-goal-amount="false"
  size="sm"
></givebutter-goal-bar>

<givebutter-goal-bar
  campaign="YOUR_CAMPAIGN_CODE"
  progress-bar-color="#DC2626"
  size="lg"
></givebutter-goal-bar>

The thermometer style displays your fundraising progress as a vertical thermometer, which is a classic visual metaphor for fundraising campaigns.

<givebutter-goal-bar
  campaign="YOUR_CAMPAIGN_CODE"
  widgetType="thermometer"
  progress-bar-color="#DC2626"
></givebutter-goal-bar>

Troubleshooting

Goal bar not appearing? Make sure you’ve installed the Widgets library on your page and that your campaign code is correct.

Goal bar shows $0 or 0%

Common causes:

Campaign hasn’t received any donations yet
Campaign goal not set in Dashboard
Campaign is not published/active
Incorrect campaign code

Solution: Verify your campaign is active and has a goal set in your Givebutter Dashboard.

Goal bar doesn't fit container

The goal bar is responsive and will fill its container width. If it appears too wide or narrow:

Wrap it in a container with max-width
Use CSS to control the parent element’s width
Check for conflicting CSS styles

<div style="max-width: 600px; margin: 0 auto;">
  <givebutter-goal-bar campaign="YOUR_CAMPAIGN_CODE"></givebutter-goal-bar>
</div>

Introduction

Widget Types

Website Builders

Advanced

Prerequisites

Quick Setup

Manual Setup

Configuration Options

Required Attributes

Styling Attributes

Examples

Troubleshooting

​Prerequisites

​Quick Setup

​Manual Setup

​Configuration Options

​Required Attributes

​Styling Attributes

​Examples

​Troubleshooting

Prerequisites

Quick Setup

Manual Setup

Configuration Options

Required Attributes

Styling Attributes

Examples

Troubleshooting