Skip to main content
Givebutter Widgets enable donors to complete transactions directly on your Wix website without leaving your site. These are dynamic embeds—changes made in your Givebutter dashboard automatically update on your live widgets.

​
Prerequisites

Paid Wix Plan RequiredYou must have a paid Wix plan (Light, Core, Business, or Business Elite) with a custom domain and no ads to access the Custom element feature. Free Wix sites cannot install custom elements.
Before getting started, you’ll need:
  • A paid Wix plan (Light, Core, Business, or Business Elite)
  • A custom domain connected to your Wix site
  • A Givebutter account with at least one published campaign
  • Your Givebutter Account ID and Widget ID

​
Widget Types Available

Button Widget

Static or Floating buttons that trigger donation forms when clicked

Form Widget

Complete donor-friendly donation interfaces embedded on your page

Goal Bar

Real-time campaign progress displays

Signup Form

Capture donor information for your mailing lists

​
Supported Payment Methods

Donors can use multiple payment methods:
  • 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 limitations set by Apple that prevent it from being used in iFrames.

​
Installation

1

Get Your Library Code and Widget ID

  1. Log into your Givebutter dashboard
  2. Navigate to Settings → Developers → Widgets
  3. Click the Wix button
  4. Copy your Library Code (Server URL)
  5. Go to your campaign’s Sharing tab → Widgets → Embed
  6. Copy your Widget ID (shown in green in the code)
2

Add Custom Element in Wix

  1. Open your Wix site editor 2. Click the blue + (plus) button to add elements 3. Navigate to Embed Code → Custom element 4. Click on the custom element box that appears on your page
3

Configure the Custom Element

  1. Click Choose Source 2. In the popup, enter: - Server URL: Paste your library code from Givebutter - Tag name: givebutter-widget 3. Click Apply
4

Set Widget Attributes

  1. Click Set Attributes 2. Click Add Attribute 3. Enter: - Attribute name: id - Value: Your Widget ID from Givebutter 4. Click Apply
5

Publish Your Site

  1. Position the widget where you want it on your page
  2. Click Save in the top right
  3. Click Publish to make your changes live

​
Finding Your Widget ID

  1. Go to your campaign’s Sharing tab in Givebutter
  2. Click Widgets
  3. Select the widget type you want
  4. Click Embed
  5. Your Widget ID appears at the top of the popup or highlighted in green within the code
Example: If the code shows <givebutter-widget id="abc123">, your Widget ID is abc123

​
Widget Customization

​
Positioning Floating Buttons

By default, floating buttons appear in the lower-right corner. To move them to the lower-left:
  1. Click Set Attributes on your custom element
  2. Click Add Attribute
  3. Enter:
    • Attribute name: position
    • Value: bottom-left
  4. Click Apply
Available positions:
  • bottom-right (default)
  • bottom-left

​
Hiding Widgets on Specific Pages

If you want to hide a floating widget from specific pages:
  1. Go to Settings → Custom Code in Wix
  2. Add this CSS to the page-specific code:
givebutter-widget[id='YOUR_WIDGET_ID'] {
  display: none;
}
Replace YOUR_WIDGET_ID with your actual Widget ID.

​
Making Widgets Appear Site-Wide

To display a widget across all pages:
  1. Add the widget to your site’s header or footer
  2. This makes it visible on every page automatically
  3. Particularly useful for floating button widgets

​
FAQ & Troubleshooting

This is normal behavior in the Wix preview. The widget will display properly on your published, live site. Always test on your live site after publishing to see the true appearance.
If your widget should be site-wide but only shows on one page: - Move the custom element to your site’s header or footer - This ensures it displays across all pages - Floating button widgets work best when added site-wide
Check these items: - You’re on a paid Wix plan (not free) - Server URL is correctly entered (your library code) - Tag name is exactly givebutter-widget (lowercase, hyphenated) - Widget ID attribute is correct - Campaign is live and published in Givebutter
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 - Venmo is desktop-only
Your campaigns must be live and published in Givebutter before they can be embedded as widgets. Draft campaigns will not work.

​
Important Notes

Widgets Update Automatically: Changes made to your campaign in the Givebutter dashboard automatically update in your embedded widgets—no need to re-embed or update code.
Test on Mobile: After publishing, test your widgets on mobile devices to ensure they display correctly and function properly for mobile donors.

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