All Collections
Website Embeds
How to use Givebutter Elements on a WordPress website
How to use Givebutter Elements on a WordPress website
Add donation buttons, bubbles, and forms directly to your own Wordpress website
Sunny avatar
Written by Sunny
Updated over a week ago

Contents:

Before you start

In your WordPress account, download and activate the free WPCode - Install Headers, Footers, and Code Snippets Plugin.

  • In your WordPress dashboard, go to Plugins and then Add new.

  • Search for "WPCode".

  • Click Install and then click Activate.

  • You should now see Code Snippets in your left-hand menu bar.

    an arrow points to code snippets

Copy the Elements library from Givebutter

  • In your Givebutter dashboard, go to Account in the left-hand menu bar, and then Integrations.

  • Click on Elements.

  • Click Next.

  • Click the Copy button, then click Next again.

  • For now, choose Enable Later. We'll come back to creating a button/bubble/form later.

Install the Elements library into your WordPress account

  • In your WordPress dashboard, click on Code Snippets.

  • Click on Header & Footer

  • Paste your copied code in the Header field.

  • Click Save Changes.

    • If you have a bubble element currently set as a default, it will automatically install with this library code. To prevent that, click the three dots (...) next to the default bubble and choose Disable Element.

      disable default bubble

Types of Elements

  • Donation Bubbles add a 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.

  • Donation Buttons can be added anywhere on your website that displays a donation form when clicked.

  • Donation Forms are our donor-friendly donation forms you can add to any page on your website.

Create an Element

  • In your Givebutter dashboard, click New Element.

    • If you've left the Elements section, you can return there by going to Account in the left-hand menu bar, then Integrations, then Elements.

numbered steps
  • Choose which type of Element you want to create.

  • Customize your Element.

  • Click Create Element.

  • Click Copy on the page that pops up next.

  • Close the pop up screen.

Install a bubble or button in WordPress

  • In your WordPress dashboard, click on Code Snippets and then Header & Footer.

    • Buttons can be pasted in the header or footer section, and will always be positioned at the far left.

    • Bubbles can be pasted in any section and will float on the bottom-right corner of your webpage.

  • Click Save Changes.

Install a donation form in WordPress

  • In your WordPress dashboard go to your home page or the page you want to add the form to.

  • Click the blue plus button at the top-left and choose Custom HTML.

  • Drag the Custom HTML block to where you want it on your page.

  • Paste the Elements Form code inside the HTML block.

  • Click Update or Save.

Did this answer your question?