Donation button
How it works for charities, Giving Groups, and Campaigns
The Charitable Impact donation button 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 is free to use on your website and 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. 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 the Home screen, select the charity under Manage charities and companies.
- Select the charity avatar in the top-right corner.
- Select Edit page.
- Select Add donation button from the left navigation.
Campaigns
- Select your Impact Account on the Home screen.
- Select Giving Groups & Campaigns in the left navigation.
- Select the Campaign tab.
- Find the Campaign you want to edit and select the pencil icon in the top-right corner.
- Select Donation Widget from the left navigation.
Giving Groups
- Select your Impact Account on the Home screen.
- Select Giving Groups & Campaigns in the left navigation.
- Under the Giving Groups tab, find the Giving Group you want to edit and select the pencil icon in the top-right corner.
- Select Add donation button from the left 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>