Overview

The most powerful way to drive donations to your campaigns is to put calls to action right where your donors already are: on your website!

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. The following Givebutter Elements are available to add to your website:

Donation Bubble

Add a customized Donation 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. Learn more →

Donate Buttons

Add a customized Donate Button anywhere on your website that displays a donation form when clicked. Learn more →

Donation Form

Add our donor-friendly donation forms to any page on your website. Learn more →

Live Example

Check out examples of Givebutter Elements in real-time on The Eat, Sleep, Give Foundation webpage.

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.


Enabling Dynamic Elements

Dynamic Elements allow you to create Elements and manage their configuration through the Dashboard easily. Creating your Elements from the Dashboard will allow you to dynamically update your customizations without needing to update your site's code.

To create and manage Elements, visit the Dashboard > Account Settings > Integrations > Elements

Installing the library

Add a short HTML snippet on your page containing the Element ID to use Dynamic Elements. This short snippet will be provided to you in the Dashboard upon creation.

To retrieve your installation snippet, visit your Dashboard > Account Settings > Integrations > Elements. Add the following code snippet inside the <head></head> tag of your website, and the rest is automatically taken care of. We recommend including the code snippet on every page of your site.

Creating Elements

  • 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, confirming the desired campaign, adjusting the default design settings, then press Create Element.

  • Finally, if you're creating a new Button or Form Element, you'll need to add additional HTML code to the desired location on your website.

  • 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.


Source Tracking & Analytics

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.

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 in your 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 they are blocked 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.


Questions? Click the chat bubble in the bottom right corner and send us a message anytime 💬.

Did this answer your question?