Skip to main content

Setup

Seedling (icon)

Get started

Easily add the donate form to any page using an embed code.

Introduction​

The donate form can be used in a number of ways. Depending on the need and use case, the form can take a variety of shapes with each providing slightly different functionality — in our terminology these are called "variants".

There is a "mini", "small", and "large" variant which could be used on a website to allow supports to give either one-off and recurring donations.

There's also a "power" variant. With this, rather than a multi-step form, all the form fields are presented on one screen. This could be useful for any user needing to process donations quickly or on behalf of others; for example: calling parties, fundraising drive, or telefundraising.

How to Embed​

In order to embed the donate form, you just include the compiled JavaScript file and a small snippet of HTML:

<div
  id="gpap-donate-widget"
></div>
<script src="https://static.greenpeace.org.au/assets/js/donate-form-0.2/widget-production.js"></script>

Once the script loads, it will replace the <div> with the complete donate form.

Note that the <script> tag comes after the <div>. When the script loads, it looks for your <div>, and will complain (in the development console) if it can't find it. By placing your script tag later (usually just before the closing </body> tag, you ensure the script will be able to find your <div>).

Alternatively, you could use a loader to make the loading more seamless. This will also help if you are unable to place the script after the <div> as noted above.

<script>
  function ready(fn) {
  if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}
  var donateLoader = function() {
   var url = "https://static.greenpeace.org.au/assets/js/donate-form-0.2/widget-production.js";
   var cache = false; // change true to false to always use very latest version (at cost of bandwidth).
   var d = document, e=d.getElementsByTagName('script')[0], s=d.createElement('script');
    s.src= url + (cache?"":('?v='+Date.now()));
    e.parentNode.insertBefore(s, e.nextSibling)
  }
  ready(donateLoader);
</script>

The above might go in your <head>, for example. Then anywhere inside the <body>, you'd place your <div>:

<div
  id="gpap-donate-widget"
></div>

That's it! Next up, learn how to configure the form.