Put CauseMissions on your site

Add one script, then drop in a placement. Clicking it opens CauseMissions in a popup, so visitors can start missions right from your page. This page is a live playground — edit any box and its preview updates instantly.

Your nonprofit's EIN

This EIN fills in every snippet below — change it to preview the widgets for your own nonprofit. You can also edit any snippet by hand to tweak just that one; each preview runs the code in its box.

1. Add the script (once)

Drop this in your page once — it powers every placement below.

<script src="https://causemissions.com/embed/v1.js" async></script>

2. Add a placement

Each placement is a single <div>. Point it at your cause to promote all of your missions, or at one specific mission to feature just that one.

A Promote your cause

Just your EIN — no data-mission. The popup shows all your missions, and a banner automatically reads “Support {your cause}”.

<!-- Button → opens your mission list -->
<div data-causemissions data-cause="131788491"
     data-type="button"
     data-label="Donate for free"></div>

Live preview

<!-- Banner -->
<div data-causemissions data-cause="131788491"
     data-type="banner"
     data-label="Do a mission, fund our work"></div>

Live preview

<!-- Full mission list (full-screen) -->
<div data-causemissions data-cause="131788491"
     data-type="missions"
     data-label="See all missions"></div>

Live preview

B Feature a specific mission

Add data-mission. We pull that mission's image, name and donation amount from CauseMissions automatically, so a card or banner stays accurate without you maintaining any copy.

<!-- Mission card -->
<div data-causemissions data-cause="131788491"
     data-type="card"
     data-mission="1666674"></div>

Live preview

<!-- Mission banner -->
<div data-causemissions data-cause="131788491"
     data-type="banner"
     data-mission="1666674"></div>

Live preview

<!-- An unavailable mission -->
<div data-causemissions data-cause="131788491"
     data-type="banner"
     data-mission="999999999"></div>

Live preview

Nothing renders — this mission isn't available.

Unavailable missions hide themselves. If the mission you point to isn't available right now — it ended, paused, or isn't offered in your visitor's region — the placement doesn't render at all. You'll never show a dead button or banner, or a broken link.

＋ Phone & tablet missions

Some missions run on a phone or tablet (Android, iPhone, iPad). By default such a mission only renders for visitors on a matching device — a desktop visitor sees nothing (you can place one embed per device and only the right one appears). Add data-desktop-devices="iphone,android" (any combination, or "all") to also offer it to desktop visitors: after they click, our partner shows a QR code they scan to do the mission on their device. It's purely a desktop override — a visitor already on a phone or tablet is never affected by it.

<div data-causemissions data-cause="131788491"
     data-type="card"
     data-mission="123456"
     data-desktop-devices="all"></div>

3. Make it yours

Add data-label to set your own text — the label on a button, or the call-to-action on a banner (try editing it):

<div data-causemissions data-cause="131788491"
     data-type="button"
     data-label="Give 5 minutes, fund a cure"></div>

Live preview

On a mission banner your label shows while it loads, then the mission's real name and amount take over.

Match your brand with data-color — pass any hex colour and the widget retints itself (readable text is picked for you). It themes your content placements (cards and mission banners); placements that carry the CauseMissions mark — buttons and the cause banner — stay in our brand green.

<div data-causemissions data-cause="131788491"
     data-type="banner" data-mission="1666674"
     data-color="#7c3aed"></div>

Live preview

The full set of optional attributes:

Attribute	Values	What it does
`data-type`	`card` · `button` · `banner` · `missions`	How the placement looks on your page. Defaults to `button`.
`data-size`	`lightbox` · `takeover`	How the popup opens — a centered lightbox or a full-screen takeover. Omit it and `missions` opens full-screen while everything else opens as a lightbox. On mobile every popup is full-screen.
`data-color`	any hex, e.g. `#7c3aed`	Retints content placements (cards, mission banners) with your brand colour. Ignored on placements that show the CauseMissions mark.
`data-desktop-devices`	`android` · `iphone` · `ipad` (comma list) · `all`	Desktop-only override: also offer this phone/tablet mission to desktop visitors, who continue via a QR-code handoff. Never affects visitors already on a mobile device. On a `missions` placement it pre-selects the device filter.

Reference: data-cause is the only required attribute. data-mission turns any placement into a single-mission embed (auto-filled, and hidden when unavailable).

Deep links, for free. While the popup is open, your page's URL carries a #causemissions=… fragment tracking exactly where the visitor is — every back/forward step works, and copying the address bar at any moment gives a link that reopens the popup right there (e.g. link straight to one mission from your newsletter). Closing the popup restores your page's own URL.

How your nonprofit gets paid

Every mission a supporter completes turns into a donation to your cause. You never pay us and there's nothing to invoice — here's how the money reaches you:

1 Confirmed & settled. A finished mission is reported right away, then confirmed and settled with our partner before it can be paid out.
2 Paid on a monthly cycle. Settled donations are gathered up and paid out to your cause on a rolling monthly schedule.
3 $5 minimum. We send a payout once a cause has at least $5 in donations ready to go. Anything under that rolls over and goes out with a future payout that clears the minimum.

Because the money clears through settlement and then a monthly payout, plan on a few weeks — sometimes longer — between a supporter finishing a mission and the funds landing with your cause. It's normal; it's just the settlement and payout cycle running its course.