Skip to main content
Givebutter Widgets enable you to embed donation buttons, forms, and goal bars directly on your Weebly website. Donors can complete transactions directly on your site without being redirected.

​
Prerequisites

Before getting started, you’ll need:
  • A Weebly website (any plan)
  • A Givebutter account with at least one published campaign
  • Your Givebutter library code and Widget ID

​
Widget Types Available

Button Widget

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

Form Widget

Complete donation forms that scroll with page content

Goal Bar

Real-time campaign progress with thermometer-style variant

Signup Form

Capture donor information for mailing lists

​
Supported Payment Methods

Donors can complete transactions using:
  • Credit and debit cards
  • PayPal
  • Venmo (desktop only)
  • Google Pay
  • ACH transfers (if enabled)
  • Donor-Advised Funds (DAF)
Apple Pay Limitation: Apple Pay will not appear in embedded widgets due to limitations set by Apple that prevent it from being used in iFrames.

​
Installation

The installation process has two main steps: adding the library code to your site header, then embedding specific widgets where you want them.

​
Step 1: Add the Library Code

1

Get Your Library Code

  1. Log into your Givebutter dashboard
  2. Navigate to Settings → Developers → Widgets
  3. Select the Weebly option
  4. Copy the provided library code
2

Access Weebly SEO Settings

  1. Log into your Weebly account 2. Navigate to Settings → SEO
3

Paste Library Code

  1. Paste the library code into the Header Code field
  2. Click Save at the bottom of the page
The library code needs to be added only once and enables all widgets across your entire site.

​
Step 2: Embed the Widget

1

Get Your Widget Embed Code

  1. Go to your campaign’s Sharing tab in Givebutter
  2. Click Widgets
  3. Select the widget type you want to embed
  4. Click Embed
  5. Copy both the library code and widget embed code
2

Add to Weebly Page

  1. Navigate to Weebly’s Build tab 2. Drag an Embed Code block to your desired location on the page 3. Click on the Embed Code placeholder
3

Paste Code

  1. Paste both the library code and widget embed code into the text field
  2. Click outside the embed block to save
  3. Click Publish to make your changes live
Important: Widgets installed on a Weebly site will not display in the Site Editor after being added. You must view your published, live website to see your widgets.

​
Widget Customization

​
Positioning Floating Buttons

By default, floating button widgets appear in the lower-right corner. To change the position, add the position attribute to your embed code: 
<givebutter-widget id="YOUR_WIDGET_ID" position="bottom-left"></givebutter-widget>
Available positions:
  • bottom-right (default)
  • bottom-left

​
Hiding Widgets from Specific Pages

To hide a floating widget from specific pages, add this CSS to your Weebly site:
  1. Go to Settings → SEO
  2. Add this code to the Header Code section:
<style>
  givebutter-widget[id='YOUR_WIDGET_ID'] {
    display: none;
  }
</style>
Replace YOUR_WIDGET_ID with your actual Widget ID.
You can also use page-specific CSS by adding the code to individual pages instead of the global header.

​
Important Notes

Your campaigns must be live and published in Givebutter before you can embed them as widgets. Draft campaigns will not work.
This is normal Weebly behavior. Widgets will not display in the Weebly Site Editor. You must publish your site and view it live to see the widgets functioning properly.
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 properly
  • Payment methods appear as expected
  • Mobile display works well

​
Troubleshooting

Check these items:
  • Library code is in Settings → SEO → Header Code
  • Widget embed code is in an Embed Code block on the page
  • Campaign is live and published (not a draft)
  • Widget ID is correct (no typos)
  • Page has been published (not just saved)
  • Clear your browser cache and refresh
Weebly templates have different content widths. Try: - Dragging the Embed Code block to span the full width - Adding the embed to a section with more vertical space - 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)
You can add multiple widgets to the same page by:
  • Dragging multiple Embed Code blocks
  • Each block should contain only the widget embed code (not the library)
  • The library code in the header handles all widgets

​
Weebly-Specific Tips

Full-Width Sections

For best results, place Form and Goal Bar widgets in full-width sections to ensure proper display.

Floating Buttons

Floating buttons work well site-wide. Add them once and they’ll appear on all pages automatically.

Mobile Testing

Always test on mobile devices. Weebly’s mobile rendering can differ from desktop, especially for custom code.

Page Load Speed

The library code is cached, so widgets won’t significantly impact your site’s loading speed.

​
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?