Adding online giving buttons to your website

4312 views 21

Add Online Giving To Your Website

In order to participate in online giving, your organization must have a verified account with Givelify. If your organization does not have an account with us, you must sign up here.

Getting Started

  1. Log in to your organization’s Givelify dashboard
  2. Click Settings
  3. Click Website Giving
  4. Click on Get the code
  5. Choose which button fits best with your site design
  6. A text window will open with the embed code
  7. Click Copy
  8. Paste the code into your website where you want the button to appear

Note: You can select multiple badges to use on your site, but only one badge can be displayed per page.

Your website will now include the Givelify online giving button. When your donors click the button, your organization’s profile will pop up.

Once donors create an account, they can use either the mobile giving app or the online giving widget. All donor features of the mobile app are present in the online giving widget.

Important Note About Banking Information

Your organization must have a verified bank account for next day deposits on file in order to use the online giving button. To set up your organization for next day deposits:

  1. Log in to your account
  2. Click Settings
  3. Click Banking
  4. Click Add Bank Account and enter your bank account information.

You must attach a copy of a voided check. The voided check must bear the name of the organization. If you do not have checks with your organization’s name and address, we do accept official bank account verification letters or the first page of your bank statement. The information submitted must include the name of the organization, the routing number and the bank account number.

If you haven’t already provided your IRS issued EIN/Tax ID, you will be required to enter that information before you can add the bank account information.

See “How Do I Set Up My Organization For Next Day Deposits?” for more help

Adding Buttons To Your Site

Depending on the platform on which your website is built, the process may be different for adding a Javascript “virtual phone” button. Below is basic documentation for several of the major website platforms to help get you started.

WordPress

If your organization has a WordPress site that is hosted on WordPress.com, you will not be able to use the Javascript “virtual phone” giving widget. Instead, please use the “Open a new browser tab” version of the app.

If your organization has a site NOT hosted on WordPress.com, but that uses the WordPress software, you should be able to copy and paste the code from your dashboard by using the instructions above.

In either case, the code you copy must be placed in a Post or Page while editing in “Text” rather than “Visual” mode.

Some WordPress themes allow you to place a widget on arbitrary locations of pages. This is usually accomplished by selecting “Widgets” from the “Appearance” menu.

  1. Choose a Text widget (“Arbitrary text or HTML”)
  2. Select the area of the site into which the Text widget should be placed, then click ‘Add Widget’
  3. Copy & Paste the badge code into the widget text area. A title is not required, but you may enter something like “Give to [Organization] Here”

Click “Save” and load the public-facing page in a new window to see your work. You may have to refresh the page once or twice to get the old version out of your browser cache. In very few cases, actually clearing your browser cache with ctrl+shift+del may be necessary.

GoDaddy

According to this GoDaddy support article, you can add scripts and HTML to your web pages by following these instructions:

  1. Log in to your GoDaddy account.
  2. In your Products list click Website Builder, and then click Manage next to the account you want to use.
  3. Click Design Your Pages.
  4. If necessary, from the Page menu, select the page you want to modify.
  5. Click Popular, and then drag and drop the Script icon over a Drop Zone. Drop Zones display on your Web pages when you hover over them.
  6. In the Enter JavaScript text box, delete the default scripting, and then enter your script.
  7. Click OK.
  8. Click Publish in the upper right.

Joomla

The page/article editor for Joomla allows you to enter HTML by clicking on the [html] button when editing the page. Simply copy and paste the code from Deep Linking.

Wix

According to Wix support, you can add the integrated widget using their HTML app. More information can be found on the Wix support page.

Squarespace

Based on the documentation available at SquareSpace, it may be possible to copy and paste the code into your site. See the Squarespace documentation for details.

Drupal

Drupal makes it fairly easy to add custom Javascript tags to a page, simply copy the code from the Deep Linking page in your Givelify Dashboard into the page and you’re ready to receive donations on your website.

Alternatively, you can add the payment widget to a side menu Block. After you have logged in as a site administrator:

  1. Click on the “Structure” menu in the admin bar at the top of the page.
  2. Find and click on “Blocks”
  3. Click “Add Block”
  4. Fill in the Block Title field with something like, “Donate Now” or leave it empty if the badge is explanation enough.
  5. Fill in the Block description field with something like, “Online Donations” – this only appears in the Blocks administration page.
  6. Paste your code into the “Block body” text area.
  7. IMPORTANT, change Text format to “Full HTML”
  8. Select the page region. This can be a little confusing. Find the theme that is labelled “(default theme)” and select the page region in which to display the payment widget.

Was this helpful?