Skip to main content
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.

​
Quick Setup

The fastest way to add a button widget:
  1. Visit your Givebutter Dashboard
  2. Select your campaign
  3. Navigate to Sharing > Widgets
  4. Choose Button as the widget type
  5. Customize the appearance
  6. Copy the generated code
  7. Paste it where you want the button to appear on your site
<givebutter-widget id="{YOUR_WIDGET_ID}"></givebutter-widget>

​
Manual Setup

For greater control and flexibility, you can manually create button widgets using the <givebutter-button> tag: 
<givebutter-button campaign="{YOUR_CAMPAIGN_CODE}"></givebutter-button>

​
Configuration Options

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

​
Required Attributes

AttributeDescriptionExample
campaignYour campaign code (find it in your campaign URL)my-campaign

​
Styling Attributes

AttributeDescriptionDefaultType
labelText displayed on the buttonDonateString
label-colorColor of the text and icon#FFFFFFHex Color Code
background-colorBackground color of the button#FF8A00Hex Color Code
border-colorColor of the button borderNoneHex Color Code
border-widthWidth of the border in pixels0Number
border-radiusCorner roundness (higher = more rounded)100Number
drop-shadowDisplay a shadow beneath the buttontrueBoolean

​
Examples

<givebutter-button
  campaign="annual-gala"
  label="Buy Tickets"
  background-color="#6366F1"
  border-radius="100"
  drop-shadow="true"
></givebutter-button>
Creates a fully rounded button with a shadow effect.

​
Positioning

The button widget will display inline wherever you place the HTML tag. For common positioning scenarios: 
<div style="text-align: center;">
  <givebutter-button campaign="{YOUR_CAMPAIGN_CODE}"></givebutter-button>
</div>

​
Best Practices

Keep button labels short and action-oriented:
  • ✅ “Donate Now”, “Give Today”, “Support Us”
  • ❌ “Click here to make a donation to our organization”
Ensure sufficient contrast between label-color and background-color for accessibility: - Light text on dark backgrounds - Dark text on light backgrounds - Test with WebAIM Contrast Checker
When using multiple buttons on one page, differentiate them clearly: - Use distinct labels - Consider different colors per campaign - Provide context about what each campaign supports
The button automatically scales for mobile devices. For best results:
  • Ensure adequate spacing around buttons
  • Test on various screen sizes
  • Avoid placing too many buttons in a row on mobile

​
Troubleshooting

Button not appearing? Make sure you’ve installed the Widgets library on your page and that your campaign code is correct.
Color not working? Hex codes must include the # symbol (e.g., #FF8A00 not FF8A00).

Form Widget

Embed a full donation form inline on your page

Analytics

Track where your donations come from

Getting Started

Installation and setup guide