How to use Givebutter Widgets on a WordPress website | Givebutter Help Center (2024)

In order to install Widgets on your WordPress.com or WordPress.org site, you'll first need to download the free Givebutter Widgets plugin.

Widgets can be used with any campaign type, including Forms, Pages and Events. Please note that an embedded Widget will not embed the entire campaign page for Pages and Events –it will embed the checkout flow.

• Button – Buttons can be added anywhere on your website, and display a donation form when clicked. Buttons can be added to the header or footer section of your website. Buttons have two configurable formats, Static and Floating.

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

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

• Credit or debit card

• Paypal

• Venmo

• Google Pay

• ACH (if enabled)

• DAF (if enabled)

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.

Shortcodes are better supported across WordPress pages and posts, as well as across WordPress versions that use different text editors.

To get started with creating and managing Widgets, visit your Givebutter dashboard.

You will need Administrator access in order to download the Givebutter widget plugin in Wordpress.

• Go to Account on the left-hand menu bar.

• Click Integrations – only account admins have access to the Integrations page.

• Click Widgets, and click on the WordPress button.

• The following window will appear, with instructions on how to add the library code to your WordPress site. Follow the instructions shown, or read on for details and images showing the steps!

• After downloading the Givebutter Widgets plugin, head to your WordPress dashboard.

• Click on Plugins and then click Add new.

• Click Upload in the upper right corner of the page and upload the Givebutter Widgets plugin file you downloaded.

• You should now see Givebutter Widgets under your Installed Plugins menu. Click Activate to enable the plugin.

• Click on Settings in the left-hand sidebar menu, and select Givebutter Widgets.

• Enter your Givebutter Account ID and Save Changes.

Where is my Givebutter Account ID?

This Givebutter Account ID is specific to Widgets. To locate it, go to your campaign's Sharing tab, click on Widgets, WordPress, and then click Installation, then click WordPress. Your Account ID is located here.

• In the desired location of the Widget, click on the Block Inserter icon (the large plus sign) and click on or search for Shortcode.

• Once you click Shortcode, a new block will be added to your site. In the Shortcode code block, paste the Widget's shortcode, found in your Givebutter dashboard. The shortcode will be formatted like this:

[givebutter-widget id="WIDGET_ID"]

Where is my Widget shortcode?

Go to your campaign's Sharing tab, and click Widgets in the sub-menu. Click Embed on the Widget you want to embed. You'll find the shortcode in the popup window.

• Save your changes, and take a look at your published site! Click on the Widget to open up the donation checkout flow.

• In the desired location of the Widget, click on the Block Inserter icon (the large plus sign) and click on or search for Custom HTML.

• Once you click Custom HTML, a new block will be added to your site. In the Custom HTML code block, paste the Widget's HTML embed code, found in your Givebutter dashboard. The HTML code will be formatted like this:

<givebutter-widget id="WIDGET_ID"></givebutter-widget>

Where is my Widget HTML embed code?

Go to your campaign's Sharing tab, and click Widgets in the sub-menu. Click Embed on the Widget you want to embed. You'll find the HTML embed code at the top of the popup window.

• Save your changes, and take a look at your published site! Click on the Widget to open up the donation checkout flow.

Removing a Floating Button Widget from specific pages on your site

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; }

• How to use Givebutter Widgets on your website

• General Widgets FAQ

• Available payment methods through Givebutter