About Givebutter Widgets 🔎
Givebutter Widgets 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! Donors can submit a transaction (or purchase tickets) directly on your site without being redirected.
Widgets can be used with any campaign type, including Forms, Pages, and Events. If you're embedding a Form campaign, please note that the description set will not appear in an embedded Widget.
Widgets created from the Givebutter dashboard are dynamic, which means any changes you make on Givebutter will update your Widget without needing to update your site's code. You can embed Givebutter Widgets on specific parts of your website by copying and pasting the provided HTML code into the editor area of the website where you'd like them to appear.
Types of Widgets 🖥️
Button – Buttons can be added anywhere on your website, and display a donation form when clicked. Buttons have two configurable formats:
Static – Placed within your site formatting (such as your site navigation). Scrolls with the page when you scroll down.
Floating – Positioned in the lower right corner of the page and "floats" on top of your site formatting so it is always visible. Does not scroll when you scroll down the page.
Form – Donor-friendly donation forms can be added to any page on your website. Directly embeds the entire Form, which scrolls with the rest of the page content. Form Widgets can also include a goal bar.
Goal Bar – Showcase the progress of your campaign's success with a simple goal bar reflecting performance in real-time. Also available as a thermometer-style embed.
Signup Form – Add an embedded form (or popup) to your external website to capture potential donor information for your newsletter mailing list. Contact form entries are automatically added as new contacts in your Givebutter account.
Supported payment methods 💸
Donors can complete transactions in a Widget using the following payment options:
Credit or debit card
Paypal
Venmo (desktop only – will not appear on Widgets opened via mobile browser)
Google Pay
Apple Pay will not appear in embedded Widgets, as limitations set by Apple prevent it from being used in iFrames. If you would like to provide this option, you will need to direct supporters to your Givebutter campaign page directly.
Installing Widgets ⚙️
Widgets are installed in two parts: the library and the Widget itself. To get started with creating and managing Widgets, visit your Givebutter dashboard.
Go to Account on the left-hand menu bar.
Click Integrations – only account admins have access to the Integrations page.
Click Widgets.
Add the library 📖
Before you install a Widget, you'll need to add a short HTML snippet on your website's <head> containing the code you need to use Widgets on your website.
Click on the website platform you currently use, or click I use another platform for universal instructions. (In this guide, we'll use the universal instructions.)
Copy the provided code shown and install it in the <head> of your website. Make sure to save your changes!
Not sure how to add code to the <head> of your site? This article also includes detailed guides for the most popular platforms and links to popular website platform instructions.
Once the library code has been added successfully, the Widgets heading will say Library installed in green.
Embed a Widget ➕
In your Givebutter dashboard menu, click on the campaign you'd like to embed.
If you don't see it, click All Campaigns to view a full list.
Click on the Sharing tab at the top of the campaign manager and select Widgets from the menu on the left side. Available Widget options will be displayed here.
If you have not yet successfully installed the library code, you will be prompted to add it before you can see the available Widget options.
If you're creating a Button or Goal bar Widget, you can configure additional settings by clicking the settings icon to the right of the Embed button. You can also configure your Widget after you've embedded it on your site – dynamic Widgets will update without needing to edit the code.
Click Embed beneath the Widget you'd like to embed. An instructional popup window will appear.
The popup window will automatically populate using the platform you selected when you installed the library.
Copy the short snippet of code located at the top of the How to embed window, and paste it into your website's code, wherever you would like the Widget to appear.
Guides for specific platforms 📝
Do you use one of these website platforms? Check out a detailed guide for step-by-step instructions on installing a Widget, with screenshots specific to your site builder!
Customization options 🎨
Button, Form, and Goal bar Widgets have additional configuration options if you wish to customize your embed! Click the gear/edit button on the Widget you'd like to edit, which will bring up a Configuration page.
Widget name – An internal name used to identify this Widget in Givebutter.
Background color – Set the color of the Button or Goal bar background.
Label/text color – Set the color of the Button or Goal bar text.
Outline – Set the thickness of the outline or remove it.
Outline color – Set the color of the outline.
Corner radius – Set the radius of the rounded corners.
Set to 0 for a sharp rectangular Widget.
Set to 30 for a fully rounded Widget.
Button options
Button type – Choose between Static or Floating.
Button text – The text you want to display on the Button Widget. Keep in mind that this just refers to the text shown on the Button itself, not the Widget once it opens.
Icon – Set an icon or remove the icon.
Choices include Heart, Gift, Giving hands, Ticket, or no icon.
Shadow – Enable or disable a drop shadow on your Button.
Form options
Goal bar – Click the toggle to enable or disable an additional goal bar at the top of your Form Widget.
Goal bar options
Goal bar type – Choose between a Progress Bar or a Thermometer.
Size – Choose between Small, Medium, and Large. This alters the height of the text and progress bar thickness.
Please note that Thermometer Widgets only offer the option to edit the text color and the progress (fill) color.
URL and HTML parameters
Widgets support the usage of parameters to further customize their function. You can read more about this process in our URL parameter guide →
Widget alignment ➡️
You can customize the position of your Widget using the align attribute! Add the attribute to your Widget's embed code, and specify where to align it.
<givebutter-widget id="WIDGET_ID" align="left"></givebutter-widget>
To left-align a Widget, use align=left
To center a Widget, use align=center
To right-align a Widget, use align=right
If you do not set an alignment, Widgets will be aligned to the left by default.
Source tracking 🕵️
Widgets can automatically store attribution data for you and pass it along when a donation occurs. This gives you the data you need to track where your donations originated.
To pass source tracking data (attribution data) to your Givebutter Dashboard, add unique URL parameters to each marketing link/URL pointing to your website. All UTM parameters are supported.
Advanced: Make any website element into a Widget 🚧
You can create custom buttons, images, or text links that launch as a Widget when clicked.
This option is only available if you can add data attributes (attributes store extra information like class, style, etc.) to the HTML elements on your site – not all site builders support this customization. (GoDaddy does not support this option.)
Use the following code and replace the placeholder information in the steps below.
<button data-gb-account="WIDGETACCOUNT_ID"
data-gb-campaign="CAMPAIGN_ID">ABC</button>
Replace WIDGETACCOUNT_ID with the long account ID shown in your Widget Installation documentation.
You can find this by clicking Installation on any Widgets tab. It'll be listed in the script needed to install a Widget and formatted like this: GQ0CYPreD923uMBv.
Replace CAMPAIGN_ID with the campaign ID for the campaign you want to link to.
You can find this by clicking on the desired campaign – the campaign ID will be listed at the top of the page, above the campaign name. Campaign IDs are formatted as a series of randomized letters and numbers.
FAQ 🤔
How do I add code to my website header?
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.
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
I used Elements in the past. Will installed Elements still work?
Existing Elements will remain active in your account, and they will still work on your external site, however, we recommend switching from Elements to Widgets for the best performance. You cannot combine Elements and Widgets on one site – please remove your Elements code and use Widgets instead.
I'm using Widgets with my Page or Event campaign. Why is there a page asking supporters to leave a message?
This step will appear on Page and Event campaigns. If you want to remove this step, please contact our team, and we'd be happy to remove it from the campaign. Please note that it will be removed for your Widgets, but also on the main campaign page.
Can I change the text that says "Select amount" or "Choose amount" on the Widget?
No – the default text that says "Select amount" or "Choose amount" will display on all Widgets, and it cannot currently be customized.
Can I edit the size of a Widget?
It is important to note that the height of a Widget will automatically adjust as donors go through the checkout. For this reason, we do not recommend placing the Widget code in a container with 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 is the Apple Pay payment option?
Apple Pay will not appear in the embedded Widget, as limitations set by Apple prevent it from being used in iFrames. If you would like to provide this option, you will need to direct supporters to your Givebutter campaign page.
Are Widgets supported on free Google websites?
Unfortunately not – Widgets are currently not supported on free Google sites. Please see our list of supported platforms!
Can I remove a Floating Button Widget from specific pages on my site?
Yes, you can hide a Floating Button Widget from specific pages on your site using CSS. You'll nee the Widget ID in order to hide it. Add the following CSS to the page that you'd like to remove the Widget from, replacing "WIDGETID" with the ID of the relevant Widget: givebutter-widget[id='WIDGETID'] { display: none; }
Can I create multiple Widgets that point to the same campaign?
Yes! While the campaign-side Widgets will automatically populate based on the currently available options, you can manually create a new Widget for the same campaign from the Integrations page. Just click New widget, and select the correct campaign during setup.
Widget Examples
Static Button: Placed within your site formatting (such as your site navigation). Scrolls with the page when you scroll down.
Floating Button: Positioned in the lower right corner of the page and "floats" on top of your site formatting so it is always visible. Does not scroll when you scroll down the page. (The equivalent to our previous Bubble Element option.)
Form: Donor-friendly donation forms can be added to any page on your website. Directly embeds the entire Form, which scrolls with the rest of the page content.
Goal bar (Thermometer):
Goal bar (Progress bar):
