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

# Button Widget

> Embed a customizable donation button that opens a popup form on your site.

export const GivebutterWidget = ({widgetType = 'widget', id, ...props}) => {
  const tagName = `givebutter-${widgetType}`;
  const attrs = Object.entries(props).map(([key, value]) => {
    const attrName = key.replace(/([A-Z])/g, '-$1').toLowerCase();
    return `${attrName}="${String(value)}"`;
  }).join(' ');
  const idAttr = id ? `id="${id}"` : '';
  const html = `<${tagName} ${idAttr} ${attrs}></${tagName}>`;
  return <div dangerouslySetInnerHTML={{
    __html: html
  }} />;
};

The Button Widget creates an attractive, clickable button on your website that opens a donation form in a popup modal. It's perfect for adding donation functionality without disrupting your page layout.

## Prerequisites

Before using the Button Widget, make sure you've [installed the Widgets library](/widgets/getting-started).

## Quick Setup

The fastest way to add a button 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 **Button** 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',
textAlign: 'center',
background: '#f9fafb',
borderRadius: '8px',
marginBottom: '1rem',
}}
>
  <GivebutterWidget id="L3zavj" align="center" />
</div>

## Manual Setup

For full control without using the dashboard, create buttons directly with the `<givebutter-button>` tag:

<CodeGroup>
  ```html Basic Button theme={null}
  <givebutter-button campaign="{YOUR_CAMPAIGN_CODE}"></givebutter-button>
  ```

  ```html Customized Button theme={null}
  <givebutter-button
    campaign="{YOUR_CAMPAIGN_CODE}"
    label="Support Our Mission"
    background-color="#FF6B6B"
    label-color="#FFFFFF"
    border-radius="8"
  ></givebutter-button>
  ```

  ```html Multiple Buttons theme={null}
  <!-- Different campaigns on the same page -->
  <givebutter-button campaign="general-fund" label="General Fund"></givebutter-button>

  <givebutter-button
    campaign="scholarship-fund"
    label="Scholarships"
    background-color="#4ECDC4"
  ></givebutter-button>
  ```
</CodeGroup>

## Configuration Options

Customize your button's appearance by adding attributes to the `<givebutter-button>` element:

### Required Attributes

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

### Styling Attributes

| Attribute | Description | Default | Type |
| - | - | - | - |
| `label` | Text displayed on the button | `Donate` | String |
| `hide-label` | Hide the label text (icon only) | `false` | Boolean |
| `label-color` | Color of the text and icon | `#FFFFFF` | Hex Color Code |
| `background-color` | Background color of the button | `#3366FF` | Hex Color Code |
| `border-color` | Color of the button border | None | Hex Color Code |
| `border-width` | Width of the border in pixels | `0` | Number |
| `border-radius` | Corner roundness (higher = more rounded) | `100` | Number |
| `drop-shadow` | Display a shadow beneath the button | `true` | Boolean |
| `icon` | Icon to display | `heart` | `heart`, `gift`, `giving_hands`, `ticket`, `none` |
| `icon-position` | Position of the icon | `left` | `left`, `right` |
| `type` | How the button opens the form | `modal` | `modal`, `link` |
| `max-width` | Maximum width of the modal | `560px` | CSS value |

### Positioning

Use these attributes to create a fixed-position floating button:

| Attribute | Description | Default | Options |
| - | - | - | - |
| `position` | Fixed position on the screen | None | `top-left`, `top-right`, `middle-left`, `middle-right`, `bottom-left`, `bottom-right` |
| `vertical-offset` | Vertical offset from edge (pixels) | `16` | Number |
| `horizontal-offset` | Horizontal offset from edge (pixels) | `16` | Number |

### Examples

<Tabs>
  <Tab title="Rounded Button">
    <div style={{padding: '2rem', textAlign: 'center', background: '#f9fafb', borderRadius: '8px', marginBottom: '1rem'}}>
      <GivebutterWidget widgetType="button" campaign="KN5NON" label="Buy Tickets" background-color="#6366F1" border-radius="100" icon="ticket" drop-shadow="true" />
    </div>

    ```html theme={null}
    <givebutter-button
      campaign="YOUR_CAMPAIGN_CODE"
      label="Buy Tickets"
      background-color="#6366F1"
      border-radius="100"
      drop-shadow="true"
      icon="ticket"
    ></givebutter-button>
    ```
  </Tab>

  <Tab title="Square Button">
    <div style={{padding: '2rem', textAlign: 'center', background: '#f9fafb', borderRadius: '8px', marginBottom: '1rem'}}>
      <GivebutterWidget widgetType="button" campaign="KN5NON" label="Donate Now" background-color="#DC2626" border-radius="4" drop-shadow="false" />
    </div>

    ```html theme={null}
    <givebutter-button
      campaign="YOUR_CAMPAIGN_CODE"
      label="Donate Now"
      background-color="#DC2626"
      border-radius="4"
      drop-shadow="false"
    ></givebutter-button>
    ```
  </Tab>

  <Tab title="Outlined Button">
    <div style={{padding: '2rem', textAlign: 'center', background: '#f9fafb', borderRadius: '8px', marginBottom: '1rem'}}>
      <GivebutterWidget widgetType="button" campaign="KN5NON" label="Become a Member" background-color="#FFFFFF" label-color="#059669" border-color="#059669" border-width="2" border-radius="8" drop-shadow="false" />
    </div>

    ```html theme={null}
    <givebutter-button
      campaign="YOUR_CAMPAIGN_CODE"
      label="Become a Member"
      background-color="#FFFFFF"
      label-color="#059669"
      border-color="#059669"
      border-width="2"
      border-radius="8"
    ></givebutter-button>
    ```
  </Tab>
</Tabs>

## Troubleshooting

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

<Note>
  **Color not working?** Hex codes must include the `#` symbol (e.g., `#FF8A00` not `FF8A00`).
</Note>


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