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:

Visit your Givebutter Dashboard
Select your campaign
Navigate to Sharing > Widgets
Choose Goal Bar as the widget type
Customize the appearance
Copy the generated code
Paste it where you want the goal bar to appear on your site

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

Manual Setup

For greater control, you can manually create goal bar widgets using 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

Attribute	Description	Example
`campaign`	Your campaign code (find it in your campaign URL)	`my-campaign`

Styling Attributes

Attribute	Description	Default	Type
`color`	Color of the progress bar fill	`#FF8A00`	Hex Color Code
`background-color`	Background color of the unfilled portion	`#E5E7EB`	Hex Color Code
`text-color`	Color of text labels (amount, percentage)	`#111827`	Hex Color Code
`height`	Height of the progress bar in pixels	`12`	Number
`border-radius`	Corner roundness of the bar	`8`	Number
`show-percentage`	Display percentage complete	`true`	Boolean
`show-amount`	Display amount raised vs goal	`true`	Boolean
`show-goal-only`	Only show goal amount (not current amount)	`false`	Boolean
`animate`	Animate the bar fill on page load	`true`	Boolean

Examples

Default Style
Brand Colors

<givebutter-goal-bar campaign="spring-fundraiser"></givebutter-goal-bar>

A standard goal bar with default Givebutter styling showing both amount and percentage.

<givebutter-goal-bar
  campaign="spring-fundraiser"
  color="#8B5CF6"
  background-color="#F3F4F6"
  text-color="#1F2937"
></givebutter-goal-bar>
``` Customize colors to match your brand identity.
</Tab>

<Tab title="Minimal Progress Bar">
```html
<givebutter-goal-bar
  campaign="spring-fundraiser"
  show-percentage="false"
  show-amount="false"
  height="6"
  border-radius="3"
></givebutter-goal-bar>
``` A sleek, minimal progress indicator without text labels.
</Tab>

<Tab title="Bold & Chunky">
```html
<givebutter-goal-bar
  campaign="spring-fundraiser"
  color="#DC2626"
  height="24"
  border-radius="12"
  show-percentage="true"
></givebutter-goal-bar>
``` A prominent, attention-grabbing goal bar for campaign landing pages.
</Tab>

<Tab title="Percentage Only">
  ```html
  <givebutter-goal-bar
    campaign="spring-fundraiser"
    show-amount="false"
    show-percentage="true"
  ></givebutter-goal-bar>

Display completion percentage without dollar amounts.

Use Cases & Placement

Campaign Landing Pages

Place the goal bar prominently near the top of your campaign page to immediately show progress:

<section class="campaign-hero">
  <h1>Help Us Build a New Community Center</h1>
  <givebutter-goal-bar
    campaign="community-center"
    color="#3B82F6"
    height="16"
  ></givebutter-goal-bar>
  <p>Join 247 supporters who have already contributed!</p>
</section>

Email Campaigns

Embed goal bars in email newsletters to show campaign momentum (ensure your email client supports custom HTML elements): ```html

We’re 73% of the way to our goal!

Help us reach 100% by donating today!

</Accordion>

<Accordion title="Event Registration Pages">
Show ticket sales progress to create urgency: ```html
<div class="ticket-status">
  <h3>Tickets Selling Fast!</h3>
  <givebutter-goal-bar
    campaign="gala-2026"
    color="#DC2626"
    show-percentage="true"
  ></givebutter-goal-bar>
  <p>Only 23 tickets remaining</p>
</div>

Website Headers & Banners

Add a site-wide banner showing fundraising progress: ```html

</Accordion>

<Accordion title="Social Proof Sections">
  Combine goal bar with donor count and testimonials:
  ```html
  <div class="social-proof">
    <h3>Join Our Community of Supporters</h3>
    <givebutter-goal-bar campaign="monthly-giving"></givebutter-goal-bar>
    <p>347 monthly donors are making a difference</p>
  </div>

Layout Patterns

<div style="background: #F9FAFB; padding: 2rem; margin: 2rem 0;">
  <div style="max-width: 800px; margin: 0 auto;">
    <h3 style="margin: 0 0 1rem 0; text-align: center;">Help Us Reach Our Goal</h3>
    <givebutter-goal-bar campaign="{YOUR_CAMPAIGN_CODE}"></givebutter-goal-bar>
  </div>
</div>

<aside style="background: white; padding: 1.5rem; border-radius: 8px; border: 1px solid #E5E7EB;">
  <h4 style="margin: 0 0 1rem 0;">Campaign Progress</h4>
  <givebutter-goal-bar campaign="{YOUR_CAMPAIGN_CODE}"></givebutter-goal-bar>
  <p style="font-size: 0.875rem; color: #6B7280; margin: 1rem 0 0 0;">
    Every donation brings us closer to our goal
  </p>
</aside>

Inline with Content

<section>
  <h2>Making an Impact Together</h2>
  <p>
    Thanks to generous supporters like you, we've already raised significant funds toward our
    $50,000 goal for new educational programs.
  </p>
  <givebutter-goal-bar campaign="{YOUR_CAMPAIGN_CODE}"></givebutter-goal-bar>
  <p>With your help, we can reach 100% and launch these vital programs this fall.</p>
</section>

Psychology & Best Practices

The Momentum Effect

Goal bars work best when you’ve already made significant progress. Consider:

30-70% complete: Optimal range showing momentum and attainability
Under 30%: May discourage donors; emphasize early supporter benefits
Over 80%: Creates urgency; highlight “almost there” messaging
100%+: Show “stretch goals” or new milestones to maintain momentum

Strategic Goal Setting

Set realistic, achievable goals: - Start with a lower “public goal” you’re confident hitting - Create stretch goals to maintain excitement after hitting initial target - Consider displaying multiple campaign bars for different projects - Update goals mid-campaign if you significantly exceed expectations

Placement Matters

Where you place the goal bar affects conversion: - Above the fold: Immediate visibility, best for urgent campaigns - After compelling story: Build emotional connection first - Near donation button: Provides social proof at decision point - Multiple locations: Repeat on long pages (header, mid-content, footer)

Color Psychology

Choose colors that align with your message: - Blue (#3B82F6): Trust, stability, professionalism - Green (#10B981): Growth, success, money - Purple (#8B5CF6): Creativity, inspiration, luxury - Red/Orange (#DC2626): Urgency, passion, action - Brand colors: Always a safe choice for consistency

Combining with Other Widgets

Goal bars work great alongside other widgets:

<div class="campaign-section">
  <h2>Support Our Annual Fund</h2>
  <givebutter-goal-bar campaign="annual-fund"></givebutter-goal-bar>
  <p>Every contribution counts!</p>
  <givebutter-button
    campaign="annual-fund"
    label="Donate Now"
  ></givebutter-button>
</div>

Real-Time Updates

Goal bars automatically update in real-time:

Live Progress: Updates instantly when donations come in
No Page Refresh: Uses Givebutter’s real-time API
Accurate Counts: Shows current totals including offline donations (if synced)
Cache Handling: Smart caching prevents excessive API calls

Performance Note: Goal bars check for updates every 60 seconds by default. The widget is optimized to minimize impact on page performance.

Accessibility

The Goal Bar Widget is built with accessibility in mind:

✅ ARIA labels for screen readers
✅ Semantic HTML structure
✅ Sufficient color contrast ratios
✅ Keyboard navigation support
✅ Respects user motion preferences (reduced animation)

For maximum accessibility, always provide text context around your goal bar explaining what the campaign is about and what the goal represents.

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>

Colors not displaying correctly

Ensure you’re using proper hex color format: - ✅ Correct: color="#3B82F6" - ❌ Incorrect: color="3B82F6" (missing #) - ❌ Incorrect: color="blue" (use hex codes, not color names)

Progress not updating

If the progress appears stuck:

Clear your browser cache
Check if your campaign recently received donations
Verify offline donations are synced in Dashboard
Wait 60 seconds for the automatic refresh

Advanced Customization

Custom Styling with CSS

You can add additional styling to the widget’s container:

<div class="custom-goal-bar">
  <givebutter-goal-bar campaign="{YOUR_CAMPAIGN_CODE}"></givebutter-goal-bar>
</div>

<style>
  .custom-goal-bar {
    padding: 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  }

  .custom-goal-bar givebutter-goal-bar {
    --gb-goal-color: #ffffff;
    --gb-goal-bg: rgba(255, 255, 255, 0.3);
    --gb-goal-text: #ffffff;
  }
</style>

Multiple Campaign Tracking

Display progress for multiple campaigns:

<div class="multi-campaign-tracker">
  <div class="campaign-item">
    <h4>General Fund</h4>
    <givebutter-goal-bar campaign="general-fund"></givebutter-goal-bar>
  </div>

  <div class="campaign-item">
    <h4>Scholarship Program</h4>
    <givebutter-goal-bar campaign="scholarships"></givebutter-goal-bar>
  </div>

  <div class="campaign-item">
    <h4>Building Campaign</h4>
    <givebutter-goal-bar campaign="new-building"></givebutter-goal-bar>
  </div>
</div>

Button Widget

Add donation buttons alongside goal bars

Form Widget

Embed full donation forms

Analytics

Track campaign performance and attribution

Live Examples

See interactive widget demonstrations

Overview

Widget Types

Integrations

Website Builders

Advanced

Prerequisites

Quick Setup

Manual Setup

Configuration Options

Required Attributes

Styling Attributes

Examples

Use Cases & Placement

Layout Patterns

Full-Width Banner

Sidebar Widget

Inline with Content

Psychology & Best Practices

Real-Time Updates

Accessibility

Troubleshooting

Advanced Customization

Custom Styling with CSS

Multiple Campaign Tracking

Button Widget

Form Widget

Analytics

Live Examples

Overview

Widget Types

Integrations

Website Builders

Advanced

​Prerequisites

​Quick Setup

​Manual Setup

​Configuration Options

​Required Attributes

​Styling Attributes

​Examples

​Use Cases & Placement

​Layout Patterns

​Full-Width Banner

​Sidebar Widget

​Inline with Content

​Psychology & Best Practices

​Real-Time Updates

​Accessibility

​Troubleshooting

​Advanced Customization

​Custom Styling with CSS

​Multiple Campaign Tracking

​Related Resources

Button Widget

Form Widget

Analytics

Live Examples

Prerequisites

Quick Setup

Manual Setup

Configuration Options

Required Attributes

Styling Attributes

Examples

Use Cases & Placement

Layout Patterns

Full-Width Banner

Sidebar Widget

Inline with Content

Psychology & Best Practices

Real-Time Updates

Accessibility

Troubleshooting

Advanced Customization

Custom Styling with CSS

Multiple Campaign Tracking

Related Resources