> ## 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)   | `25`    | Number                                                                                |
| `horizontal-offset` | Horizontal offset from edge (pixels) | `25`    | 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>