Widget Embed Demo

Live preview of all embeddable widgets. Drop the snippet into any webpage to get started.

Button Widget data-element-type="button"

Available Attributes

Attribute	Accepted Values	Description
data-campaign-idrequired	"<uuid>"	The unique ID of the campaign this button should open a donation dialog for.
data-labeloptional	any string	Text shown on the button. Defaults to `"Donate"` if omitted.
data-element-coloroptional	any CSS color	Background color of the button — e.g. `"red"`, `"#1a56db"`. Defaults to the primary brand color.
data-element-alignmentoptional	"left" \| "center" \| "right"	Horizontal alignment of the button within its container. Defaults to `"left"`.
data-element-widthoptional	"standard" \| "full"	`"standard"` sizes to content; `"full"` stretches to fill the container. Defaults to `"standard"`.

Sample Embed Code

<div
  data-element-type="button"
  data-campaign-id="YOUR_CAMPAIGN_ID"
  data-label="Donate Now"
  data-element-color="#1a56db"
  data-element-alignment="center"
  data-element-width="standard"></div>

Goal Meter Widget data-element-type="goal-meter"

Available Attributes

Attribute	Accepted Values	Description
data-campaign-idrequired	"<uuid>"	The unique ID of the campaign whose fundraising progress is displayed.
data-element-coloroptional	any CSS color	Color of the progress bar fill and accent text — e.g. `"red"`, `"#e02424"`. Defaults to the primary brand color.

Sample Embed Code

<div
  data-element-type="goal-meter"
  data-campaign-id="YOUR_CAMPAIGN_ID"
  data-element-color="#e02424"></div>

Card Widget data-element-type="card"

Available Attributes

Attribute	Accepted Values	Description
data-campaign-idrequired	"<uuid>"	The unique ID of the campaign to display as a card. Shows the campaign image, title, description, raised amount, and a donate button.

Sample Embed Code

<div
  data-element-type="card"
  data-campaign-id="YOUR_CAMPAIGN_ID"></div>

Form Widget data-element-type="form"

Available Attributes

Attribute	Accepted Values	Description
data-campaign-idrequired	"<uuid>"	The unique ID of the campaign. Embeds a full inline donation form with amount selection, donor info, and payment — no dialog required.

Sample Embed Code

<div
  data-element-type="form"
  data-campaign-id="YOUR_CAMPAIGN_ID"></div>

Donation Options Widget

data-element-type="donation-options"

Available Attributes

Attribute	Accepted Values
data-campaign-idrequired	"<uuid>"
data-element-coloroptional	any CSS color

data-campaign-id — Campaign to load donation tiers for.
data-element-color — Accent color for tier amounts and donate buttons.

Sample Embed Code

<div
  data-element-type="donation-options"
  data-campaign-id="YOUR_CAMPAIGN_ID"
  data-element-color="#e02424"></div>