Donation button

How it works for charities, Giving Groups, and Campaigns

The Charitable Impact donation button is free to use on your website and enables your charity, Giving Group, or Campaign to accept credit card donations through Charitable Impact, rather than needing to process gifts through a separate credit card processor. The donation button provides a smooth giving experience for your supporters while keeping them on your website the entire time.

For charities using the donation button on their website, Charitable Impact takes care of issuing the tax receipts, and donor information will be included in your Charity Account dashboard under Disbursements.

Note:

Any donations processed via the donation button will incur the same third-party processing fees as donations made directly via a charity profile, Giving Group, or Campaign on Charitable Impact.

Select your button

This feature is currently only available on the web, and is not yet available on the mobile app.

Select a button design and paste the provided code on your website where you'd like the button to appear.

Charities

On your Home screen, select the charity under Charities and companies you administer.
Select the charity avatar in the top-right corner.
Select Edit page.
Select Add donation button from the left-hand navigation.

Campaigns

Select Giving Groups & Campaigns from the top menu.
Under Campaigns you manage, find your Campaign and select Edit in the top-right corner.
Select Donation Widget from the left-hand navigation.

Giving Groups

Select Giving Groups & Campaigns at the top of your screen.
Under Giving Groups you manage, find your Giving Group and select Edit in the top-right corner.
Select Add donation button from the left-hand navigation.

Troubleshooting

Free web hosting sites

The Charitable Impact donation button uses JavaScript, which is not supported on some free web hosting platforms. If this is the case for your website, we recommend that you link to your page on Charitable Impact and encourage people to donate there instead.

Custom donation button

Note:

Our team can’t assist with customizing the donation button (i.e. changing the colour or shape of the button).

We recommend that a web developer or designer complete the steps below.

If you’d like to use a donation button that’s different from the ones provided to you, follow these steps:

Add jQuery to your page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

The standard script tag has two additional custom attributes:

‘data-hide-button’ must always be ‘true’.
‘data-script-id’ can be any custom identifier, and its value is used later in the ‘postMessage’ call.

<script type="text/javascript" src="https://my.charitableimpact.com/widget/js/loader.js?XXXXXXXXXXXXCHARITY_CODEXXXXXXXXXXX" id="chimp-button-script" data-hide-button="true" data-script-id="main"> </script>

Note: Please replace “XXXXXXXXXXXXCHARITY_CODEXXXXXXXXXXX” with the key found in your charity, Campaign, or Giving Group’s original donation button code.

Your code for the custom button can be whatever you want, as long as it can respond to a JavaScript event of some sort.

<h1>Custom Widget: Your Button Here</h1><div id="custom-chimp-button" width="200px" height="200px" style="background: red; cursor: pointer; padding: 10px; margin: 10px;"> <strong>Button</strong><br> You can click on this div! It'll open the form.</div>

This custom JavaScript opens the Charitable Impact iframe. jQuery is used to capture the click event, however this is not required. Everything inside the function which responds to the click is pure vanilla js. The only aspect of this which should be changed is the call to ‘getElementById’. The value of this needs to match ‘chimp-form-[identifier]’ where the identifier is the value of the ‘data-script-id’ we defined above.

<script type="text/javascript"> $(document).ready(function() { $("#custom-chimp-button").on("click", function() { var frame = document.getElementById("chimp-form-main"); var content = frame.contentWindow; content.postMessage("open-chimp-frame", "*"); frame.style.opacity = 1; frame.style.display = "block"; }); }); </script>