Skip to main content
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:
  1. Visit your Givebutter Dashboard
  2. Select your campaign and navigate to Sharing > Widgets
  3. Choose Goal Bar as the widget type and customize the appearance
  4. 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>

​
Configuration Options

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

​
Required Attributes

AttributeDescriptionExample
campaignYour campaign code (from your dashboard)my-campaign

​
Styling Attributes

AttributeDescriptionDefaultType
progress-bar-colorColor of the progress bar fillgreenHex Color Code
background-colorBackground color of the container#FFFFFFHex Color Code
text-colorColor of text labels#000000Hex Color Code
border-colorBorder color of the containerNoneHex Color Code
border-widthBorder width in pixels1Number
border-radiusCorner roundness in pixels0Number
paddingInner padding in pixels16Number
sizeHeight of the progress barmdsm, md, lg
max-widthMaximum width of the widget100%CSS value
show-amount-raisedShow the amount raisedtrueBoolean
show-raised-percentageShow the percentage completetrueBoolean
show-goal-amountShow the goal amounttrueBoolean
typeStyle of the goal displayprogress-barprogress-bar, thermometer

​
Examples

<givebutter-goal-bar campaign="YOUR_CAMPAIGN_CODE"></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.
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.
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>