How to Embed a Donation Form on Your Website

MonkeyPod offers your organization the flexibility of accepting online donations through two channels: 

  1. Fundraising Pages: Standalone pages that you can publish in five minutes or less
  2. Embedding a Donation Form on Your Website: Explained in this article!

Want to learn a little more about our standalone Fundraising Pages? Check out the making a Fundraising Page article.

What are Donation Forms (Embeds) in my MonkeyPod?

MonkeyPod's Donation Forms (Embeds) is a simple tool that allows you to accept credit card donations directly on your own website, all while having it recorded automatically for bookkeeping! Use MonkeyPod to create an unlimited number of these embedded donation forms to copy and paste into your organization's website.

How can I create Donation Forms (Embeds) in my MonkeyPod?

First, you need to define at least one donation option. That's how you'll define the basic giving parameters and configure the accounting settings for gifts that you receive.

Next, click on Fundraising then under Online Fundraising select Donation Forms (Embeds)

Screenshot showing where to find donation form embeds

After opening the page, you will see a list of the currently available forms. To add a form click on Create a New Embedded Form as shown below.

Screenshot showing embedded forms.


Each donation form includes a few settings to configure:

  • Name of the Embedded Form (internal only) - an internal (not public-facing) name for the embed for your reference.
  • Donation Option - the donation option that should be available. Note that, unlike Fundraising Pages (which support multiple donation options on the same page), donation embeds require that you select exactly one donation option to make available
  • Other Settings
    • Class for donation accounting (optional) - an optional Class that should be used for accounting purposes
    • Tag donations with (optional) - an optional Tag that can be used for admin purposes
    • Intro paragraph in donation receipts - a sentence or two that should appear at the top of donation receipts sent when someone gives through this form

Once you're happy with how the form is configured, click "Save" and you are ready to paste into your website!

How do I embed my Donation Form to my organization's website?

To embed your form, first click on your forms under Fundraising. From there you will see the forms for your site.

To embed a form, simply click on the Copy icon and the form code is on your clipboard and ready to embed into any site just like a YouTube video!

Screenshot showing embed code for form

  • What if I want to load in a modal window instead of using embeds in my MonkeyPod?

    As an alternative to loading the Donation Form as an embed on a web page, you might want to have it load in a modal window instead. There are a number of advantages to this approach, including reduced visual distractions while someone is donating and less risk of a jarring style contrast between the donation form and the rest of your site. MonkeyPod makes it easy, provided you have some basic knowledge of HTML and the ability to load an external javascript file on your site.

    How do I add Javascript references?

    Add the following script tag to the <head> section of your HTML document:

<script src="https://monkeypod.io/embed/modal.js" id="monkeypod-modal-js" defer></script>

  • How do I add a link to trigger the modal?

    Add a link that should trigger the modal window to open. This could be text, or a button, or an image, etc. Here's an example of a simple text link:

<a href="#" data-target="donation-modal" data-toggle="monkeypod-modal">Give now!</a>

  • The important part is the data-target="donation-modal" and the data-toggle="monkeypod-modal". That's what tells the javascript what to do when the link is clicked.

    How do I add the HTML for the modal?

    Finally, you'll add the HTML for the modal window itself. That should look something like this:

<div id="donation-modal" class="monkeypod-modal" style="display: none"> 
    <div class="monkeypod-modal-window"> 
        <span class="close" data-dismiss="monkeypod-modal">x</span> 
        [PASTE THE EMBED CODE HERE] 
    </div> 
</div>

  • Replace the "[PASTE THE EMBED CODE HERE]" with the embed code for the donation form you want to load in the modal. Notice the style="display: none", which is important because it ensures the modal window won't be visible until it is triggered. 

    Want more amazing video content? Check out our YouTube channel!