Skip to main content
Givebutter Widgets enable you to embed donation buttons and forms directly on your GoDaddy website. This is the most powerful way to drive donations by putting calls to action right where your donors already are.

Prerequisites

Before getting started, you’ll need:
  • A GoDaddy Website Builder site (any plan)
  • A Givebutter account with at least one published campaign
  • Your Givebutter library code and Widget ID
Note: These instructions are for GoDaddy Website Builder (the drag-and-drop editor). If you’re using WordPress hosting from GoDaddy, see our WordPress Integration guide instead.

Widget Types Available

Button Widget

Static (scrolls with page) or Floating (fixed lower-right corner) formats

Form Widget

Complete donation forms that integrate with page content

Goal Bar

Real-time campaign progress displays, including thermometer-style options

Signup Form

Capture donor information for mailing lists with automatic contact creation

Supported Payment Methods

Widgets accept:
  • Credit and debit cards
  • PayPal
  • Venmo (desktop only)
  • Google Pay
  • ACH transfers (if enabled)
  • Donor-Advised Funds (DAF)
Apple Pay Unavailable: Apple Pay is not available in embedded widgets due to iframe restrictions.

Installation

GoDaddy requires both the library code and widget code to be added together in a single HTML section. Unlike other platforms, GoDaddy doesn’t support separate header/footer code injection.
1

Get Your Codes

  1. Log into your Givebutter dashboard
  2. Navigate to SettingsDevelopersWidgets
  3. Click the GoDaddy button
  4. Copy the provided library script code
  5. Go to your campaign’s Sharing tab → WidgetsEmbed
  6. Copy your widget embed code
2

Add HTML Section in GoDaddy

  1. Open your GoDaddy website editor 2. Navigate to the page where you want the widget 3. Click Add Section 4. Select HTML from the section types
3

Paste Both Codes

  1. In the Custom Code box, paste the library code first
  2. Immediately below it, paste your widget embed code
  3. Click Done
  4. Click Publish to make your changes live
Example of combined code:
<!-- Library code -->
<script async src="https://widgets.givebutter.com/latest.umd.cjs?acct=YOUR_ACCOUNT_ID"></script>

<!-- Widget code -->
<givebutter-widget id="YOUR_WIDGET_ID"></givebutter-widget>

GoDaddy-Specific Considerations

Global Placement Limitation

Important: GoDaddy Website Builder doesn’t support adding HTML to the site header or footer. This means you must manually install widgets on each page where you want them to appear.
For floating button widgets that should appear site-wide, you’ll need to:
  1. Add the widget to each page individually
  2. Copy and paste the combined code to every page

White Space Issues

GoDaddy may add white space around your widget. To fix this: For Static Buttons:
  • Set a smaller Forced Height in the HTML section settings
  • Adjust until the white space disappears
For Floating Buttons:
  • Floating buttons automatically remove excess white space
  • No height adjustment needed

Form Overlapping Content

If donation forms appear overlapped or cut off:
  1. Click on the HTML section
  2. Go to section settings
  3. Remove any Forced Height constraint
  4. This allows the form to expand to its full size

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

Since widgets must be added manually to each page in GoDaddy, simply don’t add the widget code to pages where you don’t want it to appear.

Important Notes

Your campaigns must be live and published in Givebutter before you can embed them as widgets. Draft campaigns will not work.
Unlike other platforms, GoDaddy requires you to manually add widgets to each page. There’s no site-wide header/footer option in Website Builder.
Once installed, changes made to your campaign in the Givebutter dashboard automatically update in your embedded widgets—no need to re-embed or update code.
After publishing, test the widget on your live site to ensure:
  • The widget loads correctly
  • Donation forms open and display properly
  • No white space issues
  • Mobile display works well

Troubleshooting

Check these items:
  • Both library code AND widget code are in the same HTML section
  • Library code is pasted first, widget code below it
  • Campaign is live and published (not a draft)
  • Widget ID is correct (no typos)
  • Page has been published
For static buttons:
  • Click the HTML section
  • Adjust the Forced Height to a smaller value
  • Keep reducing until white space disappears
For forms:
  • Remove any Forced Height setting
  • Let the form expand naturally
If donation forms appear truncated: - Select the HTML section - Remove any Forced Height constraint - Ensure the section has enough vertical space - Consider using a full-width section
Remember: GoDaddy requires manual installation on each page. You must copy and paste the complete code (library + widget) to every page where you want the widget to appear.
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)

GoDaddy-Specific Tips

Plan Ahead

Create a list of all pages that need widgets. This helps ensure you don’t miss any pages when installing manually.

Copy & Paste

After setting up on one page, copy the entire HTML section code to make installation on other pages faster.

Test Mobile First

GoDaddy’s mobile editor can have quirks. Always test on actual mobile devices after publishing.

Use Floating Buttons

Floating buttons work better than static ones in GoDaddy’s layout system and don’t create white space issues.

Next Steps

Need Help?