Embedding a Donation Form on Your Website

Check out this video to see Donation Embeds explained at the 21-minute, 15 second timestamp.
Want more amazing video content? 
Check out our YouTube channel!


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. For more information on configuring donation options, be sure to check out the Knowledgebase article devoted to defining Giving Options.

Next, expand the FUNDRAISING option from the main menu and select "Donation Forms (Embeds)" under Online Fundraising.

After opening the page, you will be able to create, copy code, and preview your existing Embed Donation Forms. For created Donation Forms, you will see something that looks like the example below, where you are given the form Name, a preview of the donation option, and the ability to copy the code or preview the form. To edit any of them, simply select the edit icon.

To "Create a New Embedded Form" click the link.


Each donation form includes a few settings to configure:

  • Name of 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?

    Expand the FUNDRAISING option from the main menu and select "Donation Forms (Embeds)" under Online Fundraising. Click "Copy embed code". Now the HTML for embedding the form is now on your clipboard and ready to paste into another document! 

    To add it to your site, just paste it into your site's HTML the same way you'd embed a YouTube video or other embedded media!


    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!