Skip to main content
Givebutter Widgets allow you to seamlessly integrate donation forms, buttons, and other fundraising elements directly into your website. With just a few lines of code, you can start accepting donations without redirecting users away from your site.

​
Prerequisites

Before you begin, you’ll need:
  • An active Givebutter account
  • A campaign set up in your Givebutter Dashboard
  • Access to edit your website’s HTML

​
Installing the Widgets Library

Installing Widgets is fast and easy. Simply add the following code snippet inside the <head></head> tag of your website and we’ll take care of the rest. 
<script async src="https://widgets.givebutter.com/latest.umd.cjs?acct={YOUR_ACCOUNT_ID}"></script>
Replace YOUR_ACCOUNT_ID with your Account ID from your Givebutter Dashboard. We recommend including the code snippet on every page of your site for consistent tracking and analytics.

​
Finding Your Account ID

To find your Account ID:
  1. Log in to your Givebutter Dashboard
  2. Navigate to Settings > Integrations
  3. Look for your Account ID in the Widgets section
  4. Copy and paste it into the script tag above

​
Embedding Widgets

Once you’ve installed the Widgets library, you can embed widgets anywhere on your website. Givebutter offers two types of widgets:
  • Button Widget - A customizable donation button that opens a popup form
  • Form Widget - An embedded donation form that displays inline on your page

​
Quick Setup via Dashboard

The easiest way to get started:
  1. Visit your Givebutter Dashboard
  2. Select the campaign you want to embed
  3. Navigate to the Sharing tab
  4. Click Widgets in the sidebar
  5. Customize your widget settings
  6. Copy the generated code snippet
  7. Paste it anywhere on your website where you want the widget to appear

​
Manual Setup

For more control, you can manually add widgets using HTML tags: 
<givebutter-widget id="{YOUR_WIDGET_ID}"></givebutter-widget>

​
Finding Your Campaign Code

Your Campaign Code is a unique identifier for each campaign:
  1. Go to your campaign in the Dashboard
  2. Look at the URL: givebutter.com/c/your-campaign-code
  3. The Campaign Code is the part after /c/
  4. Use this code in your widget tags

​
Browser Support

Givebutter Widgets work in all modern browsers:
  • Chrome, Edge, Safari, Firefox (latest 2 versions)
  • Mobile browsers (iOS Safari, Chrome Mobile)
  • Internet Explorer 11 (with limited support)

​
Next Steps

Button Widget

Create customizable donation buttons with popup forms

Form Widget

Embed full donation forms directly on your pages

Analytics

Track attribution data and campaign performance

​
Troubleshooting

​
Widget Not Appearing

If your widget isn’t showing up:
  1. Verify the Widgets library script is in your <head> tag
  2. Check that your Account ID is correct
  3. Ensure your widget/campaign code is valid
  4. Check browser console for JavaScript errors
  5. Make sure your campaign is active and published

​
Widget Loads Slowly

For optimal performance:
  • Use the async attribute on the script tag (included by default)
  • Place the script in your <head> rather than before </body>
  • Ensure your page isn’t loading too many other third-party scripts

​
Need Help?

If you run into any issues, our support team is here to help: