Donation Form Widget - CrowdChange API

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. CrowdChange donation form widget

Usage examples

Inline donation form

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>

Replace 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`

​Usage examples

​Inline donation form

​Popup donation form (full layout)

​Popup donation form (basic layout)

​Supported settings

Usage examples

Inline donation form

Popup donation form (full layout)

Popup donation form (basic layout)

Supported settings