Every embed shape, working live
One donation form (Quick Give) embedded into this
marketing page in seven different shapes — inline iframe, side
widget, modal, scroll-popup, exit-intent, FAB, and banner. All
loaded cross-origin from muin.falaah.ai
(or your configured environment) into this falaah.ai page.
Full surface. Every shape here embeds the same donation page — a complete page that lives at its own web address. You could embed it (any of these seven ways) or just share the link; the shape only changes how it appears on your site, never what it is.
For form-pattern variety (single-page · multi-step · Every.org · etc.), see /live/form-flavors.
1 · Inline iframe
The form embedded directly in the page flow. Most common pattern — drop it on a 'Donate' page or below the hero on your homepage.
Best for: Dedicated donate pages, content-flow placements, sidebar widgets that need full vertical space.
▸ Show embed code ▾ Hide embed code
<script src="https://muin-stg.falaah.ai/embed/loader.js" async></script>
<div data-muin-embed="https://muin-stg.falaah.ai/go/muin-demo/donate/donate" data-muin-height="700" data-muin-title="Donate to Falaah Foundation" style="width: 100%;"></div>2 · Side widget
Compact donation card pinned in a sidebar — common for blog posts, content pages, and 'Help fund this work' placements.
Best for: Content-page sidebars, footer columns, after-article CTAs.
▸ Show embed code ▾ Hide embed code
<script src="https://muin-stg.falaah.ai/embed/loader.js" async></script>
<div data-muin-embed="https://muin-stg.falaah.ai/go/muin-demo/donate/donate" data-muin-height="600" data-muin-title="Donate widget" style="width: 100%; max-width: 360px;"></div>3 · Click-to-modal
Button triggers an overlay dialog. The most common pattern for 'Donate' CTAs in nav bars and hero sections — it doesn't take page real estate until the visitor opts in.
Best for: Nav-bar CTAs, hero call-to-actions, pages where you want the form available but not always visible.
Click below to open a donation modal — exactly the pattern most nav- bar “Donate” CTAs use.
▸ Show embed code ▾ Hide embed code
<button onclick="document.getElementById('donate-modal').showModal()">
Donate Now
</button>
<dialog id="donate-modal">
<script src="https://muin-stg.falaah.ai/embed/loader.js" async></script>
<div data-muin-embed="https://muin-stg.falaah.ai/go/muin-demo/donate/donate" data-muin-height="600" data-muin-title="Donate" style="width: 100%; max-width: 640px;"></div>
</dialog>4 · Scroll-triggered popup
Appears when the visitor reaches a configured scroll depth. Less intrusive than a load-time modal — only fires for engaged readers.
Best for: Long-form content, blog posts, mission/about pages where engagement signals readiness.
Scroll down the page — once you cross 50% of the page height, a centered popup will appear with the donation form. Triggers once per visit.
▸ Show embed code ▾ Hide embed code
<script src="https://muin-stg.falaah.ai/go/muin-demo/donate/widgets/scroll-popup.js" data-depth="0.5" defer></script>5 · Exit-intent modal
Triggers when the visitor's mouse leaves the top of the viewport — a strong proxy for 'about to close the tab.' Last-chance pattern, used carefully.
Best for: High-converting landing pages, year-end appeals, GivingTuesday surfaces.
Move your cursor up to the very top of the browser as if to close the tab — an exit-intent modal will appear with the donation form. Suppressed once shown.
▸ Show embed code ▾ Hide embed code
<script src="https://muin-stg.falaah.ai/go/muin-demo/donate/widgets/exit-intent.js" defer></script>6 · Floating action button
Always-available 'Quick Give' affordance pinned to the bottom-right corner. The lowest-friction donate CTA — visitors don't have to find a button or scroll back to top.
Best for: Site-wide footer CTAs, persistent campaign drives, mobile-first sites.
On a real site this button is position: fixed in the viewport corner. Here it's scoped to this section so it doesn't permanently float over the rest of the demo. Click it to expand the donation form.
▸ Show embed code ▾ Hide embed code
<!-- Drop this once near the bottom of <body>. The form opens on FAB click. -->
<script src="https://muin-stg.falaah.ai/go/muin-demo/donate/widgets/fab.js" defer></script>Different forms, same shapes
See the same embed shapes powering 10 different donation patterns — single-page · two-page progressive · three-page guided · monthly sustainer · stock · crypto · DAF · pledge · gala · event reg.
See all 10 form patterns →