The donation-form widget embeds a fully functional CrowdChange donation form on your website. It can render inline within the page or open as a popup triggered by your own button or link, and it supports a compact basic layout as well as the full layout.
New to widgets? Start with the Widgets Overview to add the embed script.
Usage examples
Renders the donation form directly in the page flow.
<crowdchange widget="donation-form"
fundraiser="1000"
mode="inline"
language="en"
color-primary="#cc0000"
color-background="#e3ae7a"
></crowdchange>
fundraiser with your fundraiser ID from Step 1 of the overview.
For inline embeds, you can supply your own placeholder by nesting an element marked with data-crowdchange-loading="true" inside the <crowdchange> element. It is shown until the form finishes loading.
A popup needs a trigger — a button or link — to open it. Set target to a CSS selector that matches the trigger.
<crowdchange widget="donation-form"
fundraiser="10000"
mode="popup"
target=".my-donate-button"
></crowdchange>
<button type="button" class="my-donate-button">Donate Now</button>
The basic layout renders a more compact form.
<crowdchange widget="donation-form"
fundraiser="16"
layout="basic"
mode="popup"
target="#btn-donate-2"
color-primary="#23990d"
></crowdchange>
<button type="button" id="btn-donate-2">Donate Now</button>
Supported settings
| JS Setting | Element Attribute | Description | Default |
|---|
widget | widget | Widget type: donation-form. | Required |
fundraiser | fundraiser | The ID of the fundraiser. | Required |
mode | mode | inline or popup. | popup |
layout | layout | full or basic. | full |
language | language | The language code, e.g. en, fr. | en |
target | target | CSS selector for the element that triggers the popup. | |
colorPrimary | color-primary | Custom primary color. | Fundraiser’s theme. |
colorBackground | color-background | Custom background color. | |
refSource | ref-source | Reference source, used only for reporting. | embed |
