Skip to main content

How do I create and embed an #iGiveCatholic donation button on my website?

Learn how to customize, brand, and embed a button for your organization's website that donors can use for #iGiveCatholic on GivingTuesday!

Updated over 2 weeks ago

Step 1: Navigate to Your Admin Dashboard

Once you have logged into GiveGab and are on your personal "Home" page, click "Manage" next to your organization. This will take you to the admin dashboard for the selected organization. If you are an administrator for multiple organizations participating in #iGiveCatholic, you can select the one you would like to manage.

Step 2: Navigate to Your #iGiveCatholic Dashboard

From your Admin Dashboard on www.givegab.com, click on the "Giving Days" section highlighted in the left-hand navigation bar. This section is an archive of all present and past Giving Days you've participated in. After you've registered for the most recent #iGiveCatholic on GivingTuesday, you'll be able to select the "#iGiveCatholic" dashboard for this year to complete your profile. If you need to switch organization profiles within GiveGab from here, the blue Navigation bar at the bottom of the screen will help you get around!

Step 3: Customize Your Button

While on your #iGiveCatholic dashboard, scroll to the bottom of the page, and locate the "Embed a Donate Button" button beneath the "Donation Tools" section. Select this option.

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 #iGiveCatholic donate 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 #iGiveCatholic form snippet into the body of the newly added Text widget and click ‘Save’

To use this widget on WordPress, you will need to have a business plan subscription with WordPress. Javascript is not supported on free WordPress sites.

Embedding a snippet in a Theme Layout

If you would like your #iGiveCatholic donate 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 #iGiveCatholic button display in your blog’s sidebar, select the "Sidebar.php" template

  3. Next, paste the #iGiveCatholic code snippet into the template file’s code

  4. Click ‘Update File’

Embedding a snippet in an individual post

If you would like your #iGiveCatholic 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.

Did this answer your question?