Embedding Donation Forms

Embed Script & Partner Key

Make sure to read our guide on the embed script and partner key and include the script on your page before embedding the donation form.

You can embed a donation form from your fundraisers on your website. Fundraisers can be created in a variety of ways, and so have several different ways of being embedded.

API Fundraisers

Fundraisers created via the fundraiser API can be embedded by using your partner key and the fundraiser ID. Replace [PARTNER KEY] with your partner key and [FUNDRAISER ID] with the ID of your fundraiser in the following embed code, and place it where you want the donation form to appear on your page.

<div class="plg-donate"
  data-partner-key="[PARTNER KEY]"
  data-item-id="[FUNDRAISER ID]"></div>

Creating & Updating Fundraisers Understand the difference between POST, PATCH, and PUT when creating fundraisers via the API.

Impact Hub Fundraisers

Fundraisers created via the Impact Hub typically have a widget ID that you can find on the share dialog for the fundraiser that you can access within the Impact Hub. Replace [WIDGET ID] with the widget ID in the following embed code and place it where you want the donation form to appear on your page.

<div class="plg-donate" data-widget-id="[WIDGET ID]"></div>

EIN Direct Embed

You can also embed a donation form without creating a fundraiser by using a nonprofit’s EIN directly. See the Donation Form Reference for details.

Additional Embed Code Parameters

You can customize the donation form by adding additional attributes to the embed code. The following reference will also explain how to embed donation forms without creating fundraisers.

Donation Form Reference Learn how to embed and customize your donation form.

Donation Completed Message

When a donation is made it triggers events (via postMessage) that your application can consume. The format for the postMessage payload is a stringified JSON object specifying the associated data. Our donation widgets come in two variations, “Tipping” and “Cover costs”. Each one has a slightly different postMessage payload. Alternatively, if you have a webhook endpoint configured, you will be notified of donations that way. See our webhook documentation for more information.

Tipping Widget `postMessage` Payload

{
  "message": "DonateCompleted",
  "data": {
    "amount": "20",
    "tip": "3",
    "total": "23"
  }
}

Cover Costs Widget `postMessage` Payload

{
  "message": "DonateCompleted",
  "data": {
    "amount": "20",
    "fees": "1.93",
    "total": "21.93"
  }
}