All Collections
Website Widgets
How to use Givebutter Widgets on your website
How to use Givebutter Widgets on your website

Add donation buttons and forms directly to your own website. Supporters can donate without leaving your site!

Alyssa avatar
Written by Alyssa
Updated over a week ago

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

Supported payment methods 💸

Donors can complete transactions in a Widget using the following payment options:

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 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 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, Form, and Goal bar 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.

  • 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'd like to display on the Button Widget.

  • 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 included at the top of your Form Widget.

Goal bar options

  • Goal bar type – Choose between Progress Bar or 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 options to edit the text color and the progress (fill) color.

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 you'd like 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 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

widgetaccount_id
  • Replace CAMPAIGN_ID with the campaign ID for the campaign you'd like 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.

campaign id

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.

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

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

Goal bar (Thermometer):

Goal bar (Progress bar):


Related content 📚

Did this answer your question?