What is Givebutter Elements?
Givebutter Elements is the most powerful way to drive donations to your campaigns by putting calls to action right where your donors already are: on your website!
You can embed Givebutter Elements on specific parts of your website by copy-pasting provided HTML code into the editor area of the website where you'd like them to appear. We have three types of Elements you can use:
Donation Bubbles add a bubble to your website that displays a donation form when clicked. By default, your Donation Bubble will float in the bottom right-hand corner of every page of your website.
Donation Buttons can be added anywhere on your website that displays a donation form when clicked.
Donation Forms are our donor-friendly donation forms you can add to any page on your website.
⛔️ Warning: At this time Donation Forms and Donation Buttons are not compatible with Wix websites. You may use the Donation Bubble in the meantime! For updates on when Forms and Buttons will be available on Wix again, please add your vote to our Community Board!
How to add Elements to your website
What are Dynamic Elements?
Dynamic Elements allow you to create Elements and manage their configuration through the Dashboard easily. Creating your Elements from the Givebutter Dashboard will allow you to dynamically update your customizations without needing to update your site's code.
Step 1: Installing the library
To get started with creating and managing Elements visit the Dashboard:
Then go to ACCOUNT SETTINGS on the left side panel
INTEGRATIONS in the left panel or top white bar of the Account page
ELEMENTS in the white box under the menu
To start, you'll need to add a short HTML snippet on your website's Head containing the code you need to use Elements on your website. This short snippet will be provided to you in the Dashboard upon getting started with creating an Element.
✅ Pro Tip: If you have already walked through the tutorial and need to revisit the installation code, you can click the INSTALLATION button under the ELEMENTS section of your ACCOUNT SETTINGS at any time.
The installation code will appear in a white box, with instructions on where to place it.
Add the code snippet from your installation box inside the Head of your website, which is labeled as <head></head>. We recommend including the code snippet on every page of your site.
✅ Pro Tip: Scroll down later in the article for links to popular website builders' instructions on adding custom code to the Head of your website.
Once you've added the installation code to your Head, you are ready to make your first Element!
Again, navigate to the ELEMENTS tab, and select the type of Element you're interested in creating.
Next, configure the Element by giving it an internal name (only visible to you in your Dashboard), confirming the desired linked campaign, adjusting the default design settings, then press CREATE ELEMENT.
Finally, if you're creating a new Element, you'll need to add additional HTML code to the desired location on your website. After you've completed creating an element, the code will automatically appear in a white box afterward. Copy that code, and add it as custom code to your website wherever you want it to live.
✅ Pro Tip: If you're using a Bubble, its code will also go in the head of the website, as it's going to float on top of all of your website pages!
✅ Bonus Pro Tip: If you update your Elements at any time, the code doesn't change! The element will automatically reconfigure to any changes you made in the Givebutter Dashboard.
🎊 Now you're ready to start collecting donations! 🎊
🚧 [Advanced] Coded Elements
Whether you are using a Bubble, Button, or Form, Source Tracking is automatically available on every page of your website when adding Givebutter Elements.
Make smarter marketing decisions by knowing how each donor found your fundraising campaign.
Filter, analyze, and take action on the results as all donation Source Tracking data automatically flows directly into Track, Givebutter's completely free donor management CRM.
Track source data no matter what page of your website a donor visits first and for up to 30 days when the donor leaves and comes back later to make their donation.
Givebutter Elements can automatically store attribution data for you and pass it along when a transaction or donation occurs. This data will be available for viewing in your Dashboard and downloaded for further analysis.
To pass source tracking data (aka attribution data) to your Givebutter Dashboard, add unique URL parameters to each marketing link/URL pointing to your website.
All UTM parameters are supported.
Pass unlimited custom parameters using Givebutter's gba_ prefix
Parameters also pass to Google Analytics when installed on your website
Learn how to use UTM parameters and Givebutter's gba_ prefix.
FAQs and support
Help with adding the header code to your website
Here are some resources for adding code to popular website providers. If your service isn't listed here, go to your provider's site and search their help documents, or contact their customer support team for assistance with creating or updating your records.
GoDaddy: Add HTML or custom code to my site
Squarespace: Using code injection
Strikingly: Add custom code
Webflow: How to add custom head and body code
WordPress: Adding Code to Headers
Troubleshooting the size of your Donation Form
It is important to note that the height of the Donation Form Element 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 with HTML, we recommend allowing the container to grow and shrink to fit the iFrame (height: auto).
Where's the Apple Pay payment option?
The Apple Pay payment options will not appear in the embedded widget, as Apple has blocked them from appearing in iFrames. If you are interested in having Apple Pay appear as a payment option, you will need to use a Givebutter hosted page.