Sahim Widgets Demo

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>
Recent Donations Widget data-element-type="recent-donations"

Live preview is in the sidebar. The widget uses width: 100% so it also scales on full-width pages.

Available Attributes

Attribute Accepted Values Description
data-campaign-idrequired "<uuid>" Campaign whose successful donations are listed (newest first). New rows animate in at the top when the list updates.
data-element-coloroptional any CSS color Color for the donation amount text. Defaults to the primary blue.
data-recent-countoptional integer 3–20 (default 3) How many recent successful donations to show. Values outside the range are clamped. If set to 11–20, the list scrolls: about 10 rows stay visible and the rest appear below the fold.
data-refresh-afteroptional seconds 10–300 (default 10) How often to poll for updates (10 s = minimum, 300 s = 5 minutes maximum). Values outside the range are clamped.
Sample Embed Code 
<div
  data-element-type="recent-donations"
  data-campaign-id="YOUR_CAMPAIGN_ID"
  data-element-color="#1a56db"
  data-recent-count="3"
  data-refresh-after="10"></div>

Omit data-recent-count and data-refresh-after to use defaults (3 donations, refresh every 10 seconds).

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>
Recent Donations Widget
data-element-type="recent-donations"

Default: 3 donations, refresh every 10s (configurable via data-recent-count and data-refresh-after). New rows use a short enter animation.

Sample Embed Code 
<div
  data-element-type="recent-donations"
  data-campaign-id="YOUR_CAMPAIGN_ID"
  data-element-color="#1a56db"
  data-recent-count="3"
  data-refresh-after="10"></div>