Widgets Overview

CrowdChange widgets let you embed a donation form, progress bar, or thermometer directly into your own website. You add the embed script once, then drop in as many widgets as you like — either declaratively with a <crowdchange> element or programmatically through the CrowdChange JavaScript API.

Step 1 — Enable embedding for your campaign

In your CrowdChange admin, open the campaign and go to Setup → Embed. Enable the Embed option, save your settings, and copy the snippet provided there.

Step 2 — Add the embed script

Include the embed script once per page, just before the closing </body> tag:

<script type="module" crossorigin="anonymous" src="https://[your-site-domain]/js/embed/v2"></script>

Replace [your-site-domain] with your CrowdChange domain, for example site.crowdchange.co. The script registers the <crowdchange> element, exposes the global CrowdChange object, and automatically initializes any widgets already on the page (and any added later).

There are two ways to add a widget.

1. Using the `<crowdchange>` element

Place a <crowdchange> element anywhere on your page and configure it with attributes. This is the simplest approach and works without writing any JavaScript.

<crowdchange widget="donation-form" fundraiser="16" mode="inline"></crowdchange>

See each widget’s page for its full list of supported attributes.

2. Using the JavaScript API

For programmatic control — for example, opening a donation form from your own button — use CrowdChange.createWidget(). It returns a widget instance you can act on; in popup mode, call expand() to open it. For the fastest first open, create the widget once during page load and only call expand() inside your click handler:

<button type="button" id="open-donation-widget">Donate</button>

<script>
  const donationWidget = CrowdChange.createWidget({
    widget: 'donation-form',
    fundraiser: 16,
    colorPrimary: '#ccc',
    colorBackground: '#e3ae7a',
    language: 'en'
  });

  document
    .getElementById('open-donation-widget')
    .addEventListener('click', () => donationWidget.expand());
</script>

Attribute names use kebab-case on the <crowdchange> element (for example color-primary) and camelCase in the JavaScript API (for example colorPrimary).

Analytics & Tracking

Widgets

Step 1 — Enable embedding for your campaign

Step 2 — Add the embed script

Step 3 — Add a widget

1. Using the `<crowdchange>` element

2. Using the JavaScript API

​Step 1 — Enable embedding for your campaign

​Step 2 — Add the embed script

​Step 3 — Add a widget

​1. Using the <crowdchange> element

​2. Using the JavaScript API

Step 1 — Enable embedding for your campaign

Step 2 — Add the embed script

Step 3 — Add a widget

1. Using the `<crowdchange>` element

2. Using the JavaScript API