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