Put CauseMissions on your site

Add one script, then drop in a placement. Clicking it opens CauseMissions in a popup, so your visitors give without ever leaving 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.

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.

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