Skip to main content
  1. Foundant Technologies
  2. GrantHub Pro
  3. GrantHub Pro - Miscellaneous

Embed Your Donation Hub

  • Last Updated

The content in this article includes functionality that is not included in the standard GrantHub Pro license. If you are interested in this functionality, reach out to Support.

The donation hub is a public facing donation experience that can be accessed using a sharable link or embedded in your website. It showcases and facilitates online donations from the public. There are two ways you can make use of the donation hub on your website. 

At least one donation option must be added to a single opportunity form in order for donors to donate.
 

If your nonprofit has a web developer, you can send a copy of your entire donation hub or single opportunity donation form using the code snippet found in Fundraising.

  1. Navigate to Fundraising and click Donation Hub on the navigation bar.
  2. Click Copy Code Snippet in the Configuration area to copy your donation hub snippet.
    • This action will copy the donation hub snippet for you to share with your web developer.copy code snippet button

If you wish to embed a single opportunity donation form onto your website for donors to specifically donate to, you can share the single opportunity donation form snippet. 

  1. Navigate to Fundraising and click Opportunities on the navigation bar.
  2. Click the opportunity name for which you need the donation form snippet.opportunity name

  3. Click the Donation Form tab.
    donation form tab

  4. Click Copy Code Snippet.
    • This action will copy only the code snippet for the single opportunity donation form you have chosen to embed. Once this code snippet is copied, you can share it with your web developer.
      copy code snippet button

 

If your nonprofit does not have a web developer, it is possible to embed the entire donation hub or single opportunity donation form on your website yourself. 

  • Foundant is not responsible for any website changes. It is highly recommended that you work with a web developer to embed this into your website.
  • Foundant Support may not be able to help you if you are having embedding issues. 
 
  1. Navigate to Fundraising and click Donation Hub on the navigation bar.
  2. Click Copy Code Snippet in the Configuration area to copy your donation hub snippet.
    • This action will copy the donation hub snippet.copy code snippet button

      The following code is a sample of what snippet code looks like. It is NOT the code you will be embedding into your site; it is meant as an example only. If this sample code is used, your donors will be directed to an incorrect hub.

      <iframesrc='https://app.foundant.io/fundraising/donation-hub/donate?e=s&client-site-id=c4c568ed-19e3-4f82-9b98-a2bc57504e98' style='border:0;' width='100%' height='100%'></iframe>
       
  3. Embed your donation hub using the following code:

    <iframe src='YOUR DONATION HUB CODE SNIPPET'></iframe>
  4. (OPTIONAL) If you wish to embed your donation hub with customizable dimensions that work for most websites, use the following code:

    <iframe src='YOUR DONATION HUB CODE SNIPPET' style='border:0;' width='595px' height='680px'></iframe>
    • border - How thick you want the border around your donation hub box.
    • width - How wide you would like your donation hub box.
    • height - How tall you would like your donation hub box.
  1. Navigate to Fundraising and click Opportunities on the navigation bar.
  2. Click the opportunity name for which you need the donation form snippet.opportuntiy name

  3. Click the Donation Form tab.
    donation form tab

  4. Click Copy Code Snippet.
    • This action will copy only the code snippet for the single opportunity donation form you have chosen to embed. 
      copy code snippet button

      The following code is a sample of what snippet code looks like. It is NOT the code you will be embedding into your site; it is meant as an example only. If this sample code is used, your donors will be directed to an incorrect hub.

      <iframe src='https://app.foundant.io/fundraising/donation-hub/donate?e=s&client-site-id=c4c568ed-19e3-4f82-9b98-a2bc57504e98&opportunity-id=a9ff427d-35f6-417e-a8b6-f13571870b32' style='border:0;' width='595px' height='680px'></iframe>

       
  5. Embed your single opportunity donation hub using the following code:

    <iframe src='YOUR SINGLE OPPORTUNITY CODE SNIPPET'></iframe>
  6. (Optional) If you wish to embed your single opportunity donation hub with customizable dimensions that work for most websites, use the following code:

    <iframe src='YOUR SINGLE OPPORTUNITY CODE SNIPPET' style='border:0;' width='595px' height='680px'></iframe>
    • border - How thick you want the border around your donation hub box.
    • width - How wide you would like your donation hub box.
    • height - How tall you would like your donation hub box.

Sector Education Resources

The following resources relate to this topic more broadly, beyond your site.

Was this article helpful?
0 out of 0 found this helpful
Return to top