Campaign Embeds: Thermometers and Full Campaign Pages

Not every page needs a full donation form. Sometimes you want to show fundraising progress on a partner’s website, an event sponsor’s page, or a blog sidebar — without asking visitors to leave. Falaah offers two campaign embeds: a lightweight thermometer and a full campaign page with donor wall and donate link. Both update in real time and require no authentication.

Thermometer Embed

The standalone thermometer is a compact, read-only progress display. It shows four data points: amount raised, campaign goal, percentage toward goal, and number of donors.

Three Designs

Design	Layout	Best For
Horizontal Bar	Progress bar filling left to right, totals above, donor count below	Page headers, banners, full-width sections
Classic Vertical	Tall column filling bottom to top	Sidebars, narrow columns, vertical layouts
Radial Gauge	Circular indicator filling clockwise, total in center	Dashboards, mobile views, widget-dense pages

The design is chosen when you configure the campaign in the dashboard — the iframe renders whichever design is set. All three update in real time using server-sent events: when a new donation arrives, the fill animates, the total updates, and the donor count increments without a page refresh.

Thermometer Embed Code

<iframe
  src="https://muin-api.falaah.ai/embed/thermometer/{campaign-uuid}"
  width="100%"
  height="200"
  frameborder="0"
  style="border: none; max-width: 800px;"
  title="Campaign fundraising progress"
></iframe>

Replace {campaign-uuid} with the UUID from your campaign’s embed settings in the Falaah dashboard.

---

Full Campaign Page Embed

The full campaign embed combines everything — thermometer, campaign narrative, donate link, and donor wall — into a single iframe.

From top to bottom, visitors see:

• Campaign header — campaign name and description providing the narrative context behind the ask
• Thermometer — real-time progress display with goal, current total, percentage, and donor count
• Donate Now link — a prominent call-to-action directing visitors to the campaign’s giving page (a standard link, not a payment form)
• Recent donors — a live-updating list of contributors showing names (or “Anonymous”) that refreshes as new gifts arrive
• Powered by Falaah — a small footer attribution

The embed is responsive: full-width on desktop, vertically stacked on mobile with the donate link given maximum prominence.

Full Campaign Embed Code

<iframe
  src="https://muin-api.falaah.ai/embed/campaign/{campaign-uuid}"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none; max-width: 900px;"
  title="Campaign Details"
></iframe>

---

Locale Support

Both embeds support four locales. Append a locale query parameter:

?locale=en   (English — default)
?locale=es   (Spanish)
?locale=ar   (Arabic)
?locale=fr   (French)

Example with locale:

<iframe
  src="https://muin-api.falaah.ai/embed/campaign/{campaign-uuid}?locale=ar"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none;"
  title="Campaign Details"
></iframe>

Real-Time Updates via SSE

Both the thermometer and the full campaign page use server-sent events for live updates. When a donation is processed — online or offline — the display updates within seconds. No polling, no page refresh required. This makes the embeds ideal for live fundraising events, giving days, and telethon-style campaigns where visible momentum drives participation.

When to Use Which

Use the standalone thermometer (/embed/thermometer/{uuid}) when you want a compact progress indicator — in a sidebar, a partner’s page, or a blog post. It is read-only and takes up minimal space.

Use the full campaign page (/embed/campaign/{uuid}) when you want visitors to see the complete picture — progress, social proof, and a path to donate — without leaving the host site. It is the better choice for a dedicated campaign landing page on your own domain.

CORS and Security

Both embeds set frame-ancestors * and require no authentication. They load on any domain without cross-origin restrictions. Pair a thermometer with a Falaah widget button alongside it for one-click giving:

<script
  src="https://muin-api.falaah.ai/embed/widget.js"
  data-tenant="your-org-slug"
  data-type="button"
  data-text="Donate Now"
  data-campaign="your-campaign-slug"
></script>