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.
Widgets created from the Givebutter dashboard are dynamic, which means any changes you make on Givebutter will update on 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 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.
Supported payment methods 💸
Donors can complete transactions in a Widget using the following payment options:
Credit or debit card
Paypal
Venmo
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 display 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 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 in 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 how to install a Widget, with screenshots specific to your site builder!
Customization options 🎨
Button Widgets have some additional configuration options, if you wish to customize your embed! Click the gear/edit button on the Widget you'd like to edit, and this will bring up a Configuration page.
Widget name – An internal name used to identify this Widget in Givebutter.
Button type – Choose between Static or Floating.
Background color – Set the color of the Button's background.
Button text – The text you'd like to display on the Button Widget.
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 Button.
Set to 24 for a fully rounded Button.
Label color – Set the color of the Button text.
Icon (New!) – Set an icon, or remove the icon.
Choices include Heart, Gift, Giving hands, Ticket, or no icon.
Shadow (New!) – Enable or disable a drop shadow on your Button.
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 your own buttons, images, or text buttons that launch as a Widget when clicked. Use the following code, and replace the placeholder information included 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 specifically used for Widgets.
You can find this by clicking on the Sharing tab of the desired campaign, clicking Widgets in the submenu, and clicking Embed on a Widget. It'll be listed in the embed code for this campaign, and formatted like this: L4qVwg
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?
Yes! Existing Elements will remain active in your account, and they will still work on your external site, however we recommend switching over to Widgets for the best performance.
I'm using Widgets with my Page or Event campaign. Why is there a page asking supporters to leave a message?
This slide will appear on Page and Event campaigns, and it cannot currently be disabled or removed (including on Widgets). If you want to sell tickets, you'll need an Event campaign, and this slide will be present.
Can I edit the size of a Widget?
It is important to note that the height of an Widget will automatically adjust as donors go through the checkout. 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 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.
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 current 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.
