Embedding Givebutter’s payment/donation form on your own site is a great way to collect donations year-round or retain your own branding for campaigns, events, etc. Embeds work seamlessly with every campaign type and format on Givebutter across Collect (simple donations), Fundraise (peer-to-peer team fundraising), and Events (ticketing/registrations + donations).
Please note: The Venmo and Apple Pay payment options will not appear in the embedded widget, as they are blocked from appearing in iFrames. If you are interested in having Venmo and Apple Pay appear as payment options, you will need to use a Givebutter-hosted page. Venmo and Apple Pay do appear in Custom Branded Pages for Givebutter Premium Customers.
Follow the steps below and you'll be set up in under 5 minutes.
Embedding your donation form
Navigate to your code snippet
- In your Dashboard’s sidebar, select the campaign you’d like the embedded widget to represent
- Navigate to your campaign's Sharing tab, Embed section
- Select the entire code snippet and copy to your clipboard
Paste the code onto your site
4. Paste the code into your site editor, wherever you'd like the form to appear. You should now be all set!
Embedding on Squarespace
If your website is hosted on Squarespace you'll want to add an extra line of code under the Footer, after following the above directions.
Navigate to Settings > Advanced > Code Injection.
<script src="https://givebutter.com/js/widget.js"></script> under the footer and Save.
If you're having trouble embedding your donation forms, feel free to message us by clicking the chat button in the bottom right-hand corner of this page.
Troubleshooting the size of your widget
It is important to note that the height of the widget will adjust as donors go through the checkout flow. For this reason, we do not recommend placing the widget code in a container that has a fixed size. When placing the widget in a container in your HTML, we recommend allowing the container to grow and shrink to fit the iFrame (height: auto).
Our good friends at Project Embrace are using an embedded Collect campaign with Recurring Donations and Custom Donation Amounts on their Squarespace website here: https://projectembrace.org/donate-money
Embeddable Widgets can be used with all of Givebutter's free products:
- Collect – donation form, donate button, dues/payments
- Fundraise – crowdfunding, team/peer-to-peer fundraising
- Events – ticketing & registration
- See how you can use Givebutter to fundraise with Venmo
- Read about our 0.5% fee and commitment to transparency
- Check out these inspiring stories of Givebutter Changemakers
- If you haven't yet, sign up for free in minutes