Skip to main content
Givebutter Widgets enable you to embed donation buttons, forms, and goal bars directly on your Squarespace website. These dynamic widgets automatically update when changes are made in your Givebutter dashboard.

​
Prerequisites

Squarespace Plan with Code Injection RequiredCode Injection is available only with Squarespace Core, Plus, or Advanced plans. Basic plans do not have access to Code Injection features.
Before getting started, you’ll need:
  • A Squarespace Core, Plus, or Advanced 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) formats

Form Widget

Complete donation forms embedded directly on any page

Goal Bar

Real-time campaign progress display with thermometer-style option

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)
Note about Apple Pay: Apple Pay cannot function in embedded widgets due to Apple restrictions on iframe usage.

​
Installation

The installation process has two main steps: adding the library code to your site header, then embedding specific widgets on pages.

​
Step 1: Add the Library Code

1

Get Your Library Code

  1. Log into your Givebutter dashboard
  2. Navigate to Settings → Developers → Widgets
  3. Click the Squarespace button
  4. Copy the provided library code
2

Access Code Injection

  1. In your Squarespace account, go to Website → Pages 2. Under Utilities, select Website Tools 3. Click Code Injection
3

Paste Library Code

  1. Paste the library code in the Header section
  2. Click Save at the top right
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 the widget embed code
2

Add to Squarespace Page

  1. Navigate to the page where you want the widget 2. Click Edit to enter edit mode 3. Click the + icon where you want to add the widget 4. Select Code block from the menu
3

Paste Widget Code

  1. Paste your widget’s embed code in the Code block
  2. Click outside the code block to save
  3. Click Save in the top left
  4. Click Exit to leave edit mode

​
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 that page’s Code Injection:
  1. Go to Pages → select the page
  2. Click the gear icon → Advanced
  3. Scroll to Page Header Code Injection
  4. Add:
<style>
  givebutter-widget[id='YOUR_WIDGET_ID'] {
    display: none;
  }
</style>
Replace YOUR_WIDGET_ID with your actual Widget ID.

​
Advanced: Static Button in Header

You can add a static donation button to your Squarespace header navigation using custom JavaScript.
1

Add JavaScript Code

  1. Go to Website Tools → Code Injection
  2. Paste this code in the Footer section:
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const nav = document.querySelector('.header-nav-list');
    if (nav) {
      const donateButton = document.createElement('a');
      donateButton.className = 'header-nav-item';
      donateButton.href = '#';
      donateButton.textContent = 'Donate';
      donateButton.onclick = function(e) {
        e.preventDefault();
        document.querySelector('givebutter-widget').shadowRoot
          .querySelector('button').click();
      };
      nav.appendChild(donateButton);
    }
  });
</script>
  1. Replace the selector with your actual widget element
  2. Click Save
2

Add Button in Squarespace

  1. Go to Design → Navigation
  2. Add a new navigation link
  3. Set the URL to match your button’s trigger
  4. Style to match your header

​
Important Notes

Your campaigns must be live and published in Givebutter 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
  • Code Injection (Header): Use for the library code (site-wide, once)
  • Code Blocks: Use for individual widget embed codes (per page, as needed)

​
Troubleshooting

Check these items:
  • Library code is in Code Injection → Header section
  • Widget embed code is in a Code block on the page
  • Campaign is live and published (not a draft)
  • Widget ID is correct (no typos)
  • Page changes are saved and published
Squarespace templates have different content widths. Try: - Adding more space above/below the Code block - Using a full-width section for the widget - Adjusting your template’s section padding settings
If a floating widget shows on pages where you don’t want it: - Use the CSS hiding method above for specific pages - Or place the widget code only on pages where you want it 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)

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