> ## Documentation Index
> Fetch the complete documentation index at: https://docs.givebutter.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Goal Bar Widget

> Display a visual fundraising progress bar to motivate donors and showcase campaign momentum.

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](/widgets/getting-started).

## Quick Setup

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

1. Visit your [Givebutter Dashboard](https://givebutter.com/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

```html theme={null}
<givebutter-widget id="YOUR_WIDGET_ID"></givebutter-widget>
```

<div style={{ padding: '2rem', background: '#f9fafb', borderRadius: '8px', marginBottom: '1rem' }}>
  <GivebutterWidget widgetType="goal-bar" campaign="KN5NON" />
</div>

## Manual Setup

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

<CodeGroup>
  ```html Basic Goal Bar theme={null}
  <givebutter-goal-bar campaign="YOUR_CAMPAIGN_CODE"></givebutter-goal-bar>
  ```

  ```html Customized Goal Bar theme={null}
  <givebutter-goal-bar
    campaign="YOUR_CAMPAIGN_CODE"
    progress-bar-color="#3B82F6"
    size="lg"
  ></givebutter-goal-bar>
  ```

  ```html Minimal Goal Bar theme={null}
  <givebutter-goal-bar
    campaign="YOUR_CAMPAIGN_CODE"
    show-raised-percentage="false"
    show-goal-amount="false"
    size="sm"
  ></givebutter-goal-bar>
  ```
</CodeGroup>

## 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

<Tabs>
  <Tab title="Default Style">
    <div style={{padding: '2rem', background: '#f9fafb', borderRadius: '8px', marginBottom: '1rem'}}>
      <GivebutterWidget widgetType="goal-bar" campaign="KN5NON" />
    </div>

    ```html theme={null}
    <givebutter-goal-bar campaign="YOUR_CAMPAIGN_CODE"></givebutter-goal-bar>
    ```
  </Tab>

  <Tab title="Brand Colors">
    <div style={{padding: '2rem', background: '#f9fafb', borderRadius: '8px', marginBottom: '1rem'}}>
      <GivebutterWidget widgetType="goal-bar" campaign="KN5NON" progress-bar-color="#8B5CF6" text-color="#1F2937" />
    </div>

    ```html theme={null}
    <givebutter-goal-bar
      campaign="YOUR_CAMPAIGN_CODE"
      progress-bar-color="#8B5CF6"
      text-color="#1F2937"
    ></givebutter-goal-bar>
    ```
  </Tab>

  <Tab title="Minimal">
    <div style={{padding: '2rem', background: '#f9fafb', borderRadius: '8px', marginBottom: '1rem'}}>
      <GivebutterWidget widgetType="goal-bar" campaign="KN5NON" show-raised-percentage="false" show-goal-amount="false" size="sm" />
    </div>

    ```html theme={null}
    <givebutter-goal-bar
      campaign="YOUR_CAMPAIGN_CODE"
      show-raised-percentage="false"
      show-goal-amount="false"
      size="sm"
    ></givebutter-goal-bar>
    ```
  </Tab>

  <Tab title="Large">
    <div style={{padding: '2rem', background: '#f9fafb', borderRadius: '8px', marginBottom: '1rem'}}>
      <GivebutterWidget widgetType="goal-bar" campaign="KN5NON" progress-bar-color="#DC2626" size="lg" />
    </div>

    ```html theme={null}
    <givebutter-goal-bar
      campaign="YOUR_CAMPAIGN_CODE"
      progress-bar-color="#DC2626"
      size="lg"
    ></givebutter-goal-bar>
    ```
  </Tab>

  <Tab title="Thermometer">
    <div style={{padding: '2rem', background: '#f9fafb', borderRadius: '8px', marginBottom: '1rem'}}>
      <GivebutterWidget widgetType="goal-bar" campaign="KN5NON" type="thermometer" progress-bar-color="#DC2626" />
    </div>

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

    ```html theme={null}
    <givebutter-goal-bar
      campaign="YOUR_CAMPAIGN_CODE"
      widgetType="thermometer"
      progress-bar-color="#DC2626"
    ></givebutter-goal-bar>
    ```
  </Tab>
</Tabs>

## Troubleshooting

<Warning>
  **Goal bar not appearing?** Make sure you've [installed the Widgets
  library](/widgets/getting-started) on your page and that your campaign code is correct.
</Warning>

<AccordionGroup>
  <Accordion title="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.
  </Accordion>

  <Accordion title="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

    ```html theme={null}
    <div style="max-width: 600px; margin: 0 auto;">
      <givebutter-goal-bar campaign="YOUR_CAMPAIGN_CODE"></givebutter-goal-bar>
    </div>
    ```
  </Accordion>
</AccordionGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.