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:

  1. Then go to ACCOUNT SETTINGS on the left side panel

  2. INTEGRATIONS in the left panel or top white bar of the Account page

  3. ELEMENTS in the white box under the menu

A screenshot of a Givebutter Dashboard, with arrows pointing to the sections needed to be clicked to navigate to the Elements page.

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.

A screenshot of the Elements page with an arrow pointing to the Installation button.

The installation code will appear in a white box, with instructions on where to place it.

A screenshot of the Installation code and how it appears in the Dashboard.

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.

Creating Elements

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.

A screenshot of the dashboard showing how to get to the Elements section of your Dashboard.

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.

A screenshot showing how the customization of an element appears in the Dashboard.

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.

A screenshot showing how the element's code snippet appears in the Dashboard.

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

If you'd like complete control over Elements, you can create them directly with our library. Visit the Coded Elements section to learn how to develop Elements using HTML, JavaScript, and more.

Additional features

Source tracking

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

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.

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.

Related Content

Did this answer your question?