How do I add a Campaign Embeddable Donation button to my website?

It's easy to set up and keeps your supporters on your website, while hosting your campaign on GiveGab!

Gwendolyn Bobst avatar
Written by Gwendolyn Bobst
Updated over a week ago

Step 1: Navigate to Your Admin Dashboard

If your home page is not your Admin Dashboard, click on the drop down box at the bottom of the screen next to “Viewing Dashboard For” to view a list of organizations that you are an administrator for. Click on the name of your organization you’d like to access.

Step 2: Navigate to Your Campaign Editor 

From the “Fundraising Campaigns” tab of your Admin Dashboard, click the “Edit” button within the campaign you’re looking to access.

Step 3: Navigate to Your Donation Form

While in the Campaign editor, select the "Donation Form" button in the side bar on the left side of the screen. Once in this menu, select the "Configure!" button under Embeddable Donation Button.

After making that selection, you'll be brought to a page where you can customize the button's call to action, then even select the color of the button. This is a great opportunity to make it clear to donors exactly what their gift will go towards.

Step 4: Embedding the Button Into Your Site

Based on the type of site you have, there are different ways to approach implementation. Below is a quick-guide based on some types of sites you might have!

Standard HTML Sites: Simply copy and paste the code directly into the HTML of your site. We recommend pasting a snippet inside any block-level HTML element, including but not limited to:

•<body>...</body> •<div>...</div> •<span>...</span>

•<td>...</td> •<p>...</p>

Be sure to follow the guidelines for valid HTML (http://validator.w3.org/docs/help.html), including the closing of all tags.

WordPress: 

Embedding a snippet in a Sidebar Widget (v2.8 and greater)

If you would like the campaign donation button to appear in the sidebar on every page of your WordPress blog, we recommend adding the code snippet in a Text sidebar widget. Once you are logged into your WordPress blog dashboard, you'll need to do the following:

  1. Click the ‘Widgets’ link from the ‘Appearance’ tab in version 2.8 or higher

  2. Next, drag a Text widget from the list of Available Widgets into the Sidebar set of widgets of your choosing

  3. Next, paste the campaign donation button form snippet into the body of the newly added Text widget and click ‘Save’

Embedding a snippet in a Theme Layout

If you would like your campaign donation button to appear on every page of your WordPress blog, we recommend adding the snippet to your blog’s Theme using a custom template. Once you are logged into your WordPress blog dashboard:

  1. Click the ‘Editor’ link from the ‘Appearance’ tab in version 2.8 or higher. In version 2.7, click the ‘Theme Editor’ link from the ‘Design’ tab

  2. Next, select the template you wish to add the snippet to from the list of templates. For example, if you wish to have the campaign donation button display in your blog’s sidebar, select the "Sidebar.php" template

  3. Next, paste the campaign donation button code snippet into the template file’s code

  4. Click ‘Update File’

Embedding a snippet in an individual post

If you would like your campaign donation button to appear on a single post on your blog, load the ‘Edit’ screen for the post you wish to use. Next, simply paste the snippet into the ‘HTML’ content tab, then click ‘Publish’ or ‘Save Draft’.

NOTE: if your WordPress version is 2.6 or earlier, you may need to add a </p> tag before the snippet and a <p> after it, with no line breaks.

If you have any questions, feel free to reach out to our customer success team via the blue chat bubble on the bottom right of the screen, or send us an email at customersuccess@givegab.com.

Did this answer your question?