Multi-Widget Landing Page for Multiple Campaigns

Not every donor walks in knowing exactly where they want to give. When an organization runs multiple campaigns or programs simultaneously, presenting them side by side — each with its own progress, its own story, its own donate button — lets the donor choose the cause that resonates and give on the spot.

The multi-widget landing page combines multiple Muin embeds on a single page: campaign thermometers, giving buttons, and brief descriptions arranged in a layout that invites browsing and immediate action.

Who Uses This

Community foundations with multiple grant areas display all active campaigns on a single giving page. Religious organizations present multiple funds — general operations, youth programs, building fund, community outreach — on one page. Universities show departmental giving campaigns during giving day events.

Any organization managing multiple concurrent campaigns and wanting to offer donors a choice benefits from this layout.

How It Works

The pattern is straightforward: multiple <script> tags on the same page, each pointing to a different campaign or form. The widget loader at https://muin-api.falaah.ai/embed/widget.js supports multiple instances on a single page, each with its own data-type and campaign configuration.

Example: Three Campaign Thermometers with Donate Buttons

<!-- Campaign 1: Building Fund -->
<div class="campaign-card">
  <h3>New Building Fund</h3>
  <p>Help us build a new community center.</p>
  <script
    src="https://muin-api.falaah.ai/embed/widget.js"
    data-tenant="your-org"
    data-type="thermometer"
    data-campaign="building-fund"
  ></script>
  <script
    src="https://muin-api.falaah.ai/embed/widget.js"
    data-tenant="your-org"
    data-type="button"
    data-campaign="building-fund"
  ></script>
</div>

<!-- Campaign 2: Scholarship Program -->
<div class="campaign-card">
  <h3>Scholarship Program</h3>
  <p>Fund scholarships for deserving students.</p>
  <script
    src="https://muin-api.falaah.ai/embed/widget.js"
    data-tenant="your-org"
    data-type="thermometer"
    data-campaign="scholarships"
  ></script>
  <script
    src="https://muin-api.falaah.ai/embed/widget.js"
    data-tenant="your-org"
    data-type="button"
    data-campaign="scholarships"
  ></script>
</div>

<!-- Campaign 3: Emergency Relief -->
<div class="campaign-card">
  <h3>Emergency Relief</h3>
  <p>Provide immediate aid to families in crisis.</p>
  <script
    src="https://muin-api.falaah.ai/embed/widget.js"
    data-tenant="your-org"
    data-type="thermometer"
    data-campaign="emergency-relief"
  ></script>
  <script
    src="https://muin-api.falaah.ai/embed/widget.js"
    data-tenant="your-org"
    data-type="button"
    data-campaign="emergency-relief"
  ></script>
</div>

The widget loader is only fetched once by the browser — subsequent <script> tags with the same src use the cached copy. Each instance renders in its own Shadow DOM container, so campaigns do not interfere with each other’s styles or state.

Alternative: Iframe Thermometers

If you prefer iframes, each campaign thermometer can be embedded directly:

<iframe src="https://muin-api.falaah.ai/embed/thermometer/{uuid}" width="100%" height="120" frameborder="0"></iframe>
<iframe src="https://muin-api.falaah.ai/embed/campaign/{uuid}" width="100%" height="400" frameborder="0"></iframe>

A multi-widget page does not have to be all thermometers. You can mix widget types on a single page:

A banner at the top announcing an aggregate goal across all campaigns
Thermometer widgets for each campaign card showing individual progress
Button widgets on each card opening a popup giving form for that specific campaign
A floating action button in the corner for visitors who scroll past all campaigns and want a general donate option

Each widget type uses its own data-type attribute. The same data-tenant value ensures all widgets authenticate against the same organization.

Real-Time Across the Page

Every thermometer on the page maintains its own SSE connection to the API at https://muin-api.falaah.ai. When a donation comes in for any campaign, the corresponding thermometer updates immediately. If a visitor is browsing the page and another donor gives to a different campaign, that thermometer ticks upward in real time.

This creates a dynamic, living display of generosity — a giving day dashboard that visitors can both watch and participate in.

What the Visitor Sees

The page opens with a headline and campaign cards in a responsive grid. Each card shows the campaign name, a brief description, a progress thermometer, and a donate button. The visitor browses, picks the cause that resonates, and gives. The popup form means they never leave the page — they give to one cause, the thermometer updates, and they scroll to the next.

Campaign thermometer

Full campaign card

Coordination Rules

When mixing widgets on a single page, coordination matters. The widget system supports rules that prevent multiple widgets from competing for attention at once:

Suppress the popup if the visitor already interacted with a campaign button
Suppress the floating button if the visitor completed a donation through any campaign card
Set cool-down periods between widget interactions

These rules are configured in the admin when creating a multi-widget deployment.

Getting Started

Create each campaign individually with its own goal, description, and giving page.
Build your landing page in your CMS or static site generator.
Add the <script> tags for each campaign widget where you want them to appear.
Optionally add a banner, FAB, or popup for additional touchpoints.

Every widget on the page shares the same contact resolution — a visitor who gives to two campaigns in one session has one contact record with two gifts.

For the full widget placement options, see Popup, Floating, and Banner Widgets. For the complete 26-combination matrix, see 26 Ways to Accept Payments, Donations, and Registrations with Muin.

Multi-Widget Landing Page: Choose Your Cause on One Page