Install the giving button

This is the install guide for the person, or the AI agent, who edits the church's website. Donors click the button and set up their gift in a Roster pop-up on your page: how much of each paycheck, who they are, and their payroll. See What donors go through.

A giving platform that offers paycheck giving through the Partner API does not use this button: its own giving button opens each donor session, as described in Open the flow on your page. A church registered by a giving platform does not need this button either.

Before you start

• Save your website in the dashboard first (Integration Guide, step 2, or Your website on Donor Flow). The button only works on the addresses saved there. Enter the address with https://. Only the site counts, not the page, and www. makes no difference: saving https://yourchurch.org also covers https://www.yourchurch.org, and the step lists both after This snippet works on. Add another address, such as your members area, under Other addresses, one per line. If your site moves, add the new address there, and remove the old one only after both buttons load on the new one.
• Copy the code from the dashboard. It carries your church's ID (ch_…). Never type or guess the ID: the code below is only its shape.

Paste the code

<div data-roster-church="ch_…"></div>
<script src="https://flow.rostergiving.com/v1/roster.js" async></script>

1. Copy the code from Integration Guide, step 2.
2. Paste it on your Give page, next to your other giving options, or anywhere you want the button to appear.
3. Publish your site.

On common site builders:

• Wix: Add → Embed Code → Embed HTML → paste.
• Squarespace: Add Block → Code → paste.
• WordPress: add a Custom HTML block → paste.

Email these instructions to your web person, in the same step, opens an email from your own inbox with the code and these tips, ready to send to whoever edits your site.

Sites built with React, Next.js or Vue, which change pages without reloading, need nothing extra: the button appears as soon as the page with the code is shown.

If your site has a Content Security Policy

A site that sends a Content-Security-Policy header has to let the button in. Allow these in your policy (a directive your policy doesn't set falls back to default-src):

• script-src: https://flow.rostergiving.com, for the script and the button it loads.
• frame-src: https://flow.rostergiving.com, for the pop-up.
• connect-src: https://flow.rostergiving.com, where the script checks its current version, and a second Roster address the button reports to (how to find it is below). That report is how the dashboard sees your button, and the same address sends the look you chose in Donor Flow: without it, the button keeps our default look.
• style-src: 'unsafe-inline'. The button and the pop-up window carry their own styles, and a policy without it leaves them unstyled.

If the step still says we haven't seen your button after you publish, open your browser's console on that page: the Content Security Policy error names the address your policy refused. Add it to connect-src, or send us that line.

Use your own button

If you'd rather keep a button you already made in your site builder, there are two ways, neither needs your own JavaScript. The dashboard's Donor Flow page has both with your ID filled in.

• Add an attribute. If you can edit the button's code, add data-roster-open with your church's ID, and paste the script on the same page:

  <button type="button" data-roster-open="ch_…">Give from my paycheck</button>
  <script src="https://flow.rostergiving.com/v1/roster.js" data-roster-church="ch_…" async></script>
  

  htmlCopyCopied

• Point a link. If your builder only lets you set a link, paste the script on the page and point your button to #roster-give:

  <script src="https://flow.rostergiving.com/v1/roster.js" data-roster-church="ch_…" async></script>
  <a href="#roster-give">Give from my paycheck</a>
  

  htmlCopyCopied

Both buttons on the same page? One script serves the giving button and the cancel button, ours or yours: paste it once. If either one is a link to #roster-give or #roster-manage, that script carries data-roster-church, as above.

To change how our button looks (its text, colors, corners, icon, size and shadow) or to match the pop-up to your site, use Donor Flow in the dashboard. Remember to save.

Check that it works

Open the page where you pasted the code. Once the button loads there, step 2 of the Integration Guide turns green in about a minute and reads On your site, and Giving button detected is checked under To start receiving gifts. On Donor Flow it reads Giving button on your site. Check now looks again.

• Not on your site yet, or "We haven't seen your button yet." The page with the code isn't published, or it is on an address that isn't saved. Publish, open the page and check again.
• No signal. The button hasn't reported in for 3 days. It was probably removed in a site update: paste the code again. The top of the Integration Guide reads No signal from your giving button, the Overview lists it under Needs you, and we email the church. If you removed the button on purpose, no action is needed.
• "Your button was last seen on an address that isn't on your list." If your site moved, or the button is on another address too, add that address under Change addresses.

What donors go through

The pop-up opens on your page, and your website never sees what the donor types in it.

1. How much. A percentage of each paycheck, from 1% to 35%.
2. Who they are. Their mobile phone and date of birth, then a code we text them. We fill in the rest for them to check, and they accept the Terms, Privacy Notice and E-Sign Consent. A few donors are asked for a photo of their ID, which they take on their phone.
3. Confirm your gift. The donor authorizes the recurring gift to your church.
4. Their payroll. The donor finds their employer and signs in to their payroll account in a secure window, where the gift is saved. If the payroll can't take a percentage, the donor can give a fixed amount instead. If it can't be set up online, the pop-up shows how to set it up with the payroll office.
5. You're all set. From then on, the gift comes out of each paycheck. It shows in Gifts once the first paycheck deposit arrives.

When we need more time to confirm a donor, the pop-up says their account is in review and that we'll email them. Nothing is needed from your church.

For AI agents

If you are an AI agent asked to install the giving button:

1. Use the code from the person's dashboard. The Integration Guide, step 2, gives them a prompt for you with the code in it (Or ask an AI assistant to add it); without it, ask them for the code. Do not invent the church ID.
2. Paste it on the Give page, next to the existing giving options, and publish.
3. Ask the person to open the page and click Check now.

Never ask for, store or reuse the person's Roster sign-in link. The cancel button is installed the same way: see Install the cancel button.