Skip to main content
Givebutter Widgets enable you to embed donation buttons, forms, and goal bars directly on your WordPress website. These dynamic widgets automatically update when you make changes in your Givebutter dashboard, without requiring any code modifications.

​
Prerequisites

WordPress.com Business or eCommerce Plan RequiredYou cannot add plugins to free WordPress plans. You must have a Business or eCommerce plan to install the Givebutter Widgets plugin.
Before getting started, you’ll need:
  • A WordPress.com Business or eCommerce plan (or self-hosted WordPress.org site)
  • A Givebutter account with at least one campaign
  • Your Givebutter Account ID

​
Widget Types Available

Button Widget

Clickable donation triggers in Static or Floating formats

Form Widget

Full donor-friendly donation forms embedded directly on your page

Goal Bar

Real-time campaign progress display

Signup Form

Newsletter subscription capture for your mailing list

​
Supported Payment Methods

Your donors can use multiple payment methods through the embedded widgets:
  • Credit and debit cards
  • PayPal
  • Venmo (desktop only)
  • Google Pay
  • ACH transfers (if enabled)
  • Donor-Advised Funds (DAF)
Note about Apple Pay: Apple Pay will not appear in embedded widgets due to technical limitations set by Apple that prevent it from being used in iFrames.

​
Installation

1

Download the Plugin

  1. Log into your Givebutter dashboard
  2. Navigate to Settings → Developers → Widgets
  3. Click the WordPress button
  4. Download the free Givebutter Widgets plugin
2

Install in WordPress

  1. Log into your WordPress admin panel 2. Go to Plugins → Add New → Upload Plugin 3. Upload the downloaded plugin file 4. Click Install Now and then Activate
3

Configure the Plugin

  1. Go to Settings → Givebutter Widgets
  2. Enter your Givebutter Account ID
  3. Click Save Changes
Your Account ID can be found in your Givebutter dashboard under Settings → Developers → Widgets. It’s displayed at the top of the page.
4

Embed a Widget

Choose one of two methods to add widgets to your pages:

​
Embedding Methods

The shortcode method offers better cross-version compatibility and is the easiest way to embed widgets.
1

Get Your Widget ID

  1. Go to your campaign’s Sharing tab
  2. Click Widgets
  3. Select the widget type you want to embed
  4. Click Embed
  5. Copy the Widget ID (shown in green in the code)
2

Add to WordPress

  1. Edit the page or post where you want the widget
  2. Add a Shortcode block
  3. Enter: [givebutter-widget id="YOUR_WIDGET_ID"]
  4. Replace YOUR_WIDGET_ID with your actual Widget ID
  5. Publish or update the page
Example: 
[givebutter-widget id="abc123"]

​
Method 2: Custom HTML

1

Get Your Widget Code

  1. Go to your campaign’s Sharing tab
  2. Click Widgets → Embed
  3. Copy the widget embed code
2

Add to WordPress

  1. Edit your page or post
  2. Add a Custom HTML block
  3. Paste the widget code: <givebutter-widget id="YOUR_WIDGET_ID"></givebutter-widget>
  4. Publish or update the page

​
Widget Customization

​
Positioning Floating Buttons

By default, floating buttons appear in the lower-right corner. To change the position: 
<givebutter-widget id="YOUR_WIDGET_ID" position="bottom-left"></givebutter-widget>
Available positions:
  • bottom-right (default)
  • bottom-left

​
Hiding Widgets on Specific Pages

If you need to hide a floating widget from specific pages, add this CSS to your theme’s Custom CSS: 
givebutter-widget[id='YOUR_WIDGET_ID'] {
  display: none;
}
Replace YOUR_WIDGET_ID with your actual Widget ID.

​
Important Notes

Your campaigns must be live and published before you can embed them as widgets. Draft campaigns will not work.
Changes made to your campaign in the Givebutter dashboard automatically update in your embedded widgets—no need to re-embed or update code.
After embedding, test the widget on your live site to ensure: - The widget loads correctly - Donation forms open properly - Payment methods appear as expected - Mobile display works well
You can add multiple widgets to the same page by repeating the embedding process with different Widget IDs.

​
Troubleshooting

Check these items:
  • Account ID is correctly entered in plugin settings
  • Campaign is live and published (not a draft)
  • Widget ID is correct (no typos)
  • Page is published and cache is cleared
  • No JavaScript errors in browser console
Some themes may restrict widget height. Try: - Adding the widget to a full-width section - Adjusting your theme’s content width settings - Using a different page template
If certain payment methods don’t appear:
  • Verify they’re enabled in your Givebutter account settings
  • Remember Apple Pay won’t work in embedded widgets
  • Check that you’re viewing on a supported device (Venmo is desktop-only)

​
Next Steps

Widget Examples

See live examples of all widget types

URL Prefill

Pre-fill donation forms with donor information

Analytics

Track widget performance and attribution

Widget Types

Learn about different widget configurations

​
Need Help?