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 to accept credit card donations through Charitable Impact, rather than needing to process gifts through a separate credit card processor. Giving Groups and Campaigns on Charitable Impact can also take advantage of the donation button.

The donation button provides a smooth giving experience for your supporters while keeping them on your website the entire time. Charitable Impact takes care of issuing the tax receipts, and all donor information will be included in your Charity Account dashboard under Transfer Reports

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.

Selecting your button

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

Charities

  1. Switch to your Charity Account by selecting your Account Icon in the top-right corner, and selecting Switch Accounts.
  2. Select Take donations online in the top menu of your Charity Account.

Campaigns

  1. Select Giving Groups & Campaigns at the top of your screen.
  2. Under Campaigns you manage, find your Campaign and select the three dots in the top-right corner.
  3. Select Edit Campaign.
  4. Select Donation Widget on the left.

Giving Groups

  1. Select Giving Groups & Campaigns at the top of your screen.
  2. Under Giving Groups you manage, find your Giving Group and select the three dots in the top-right corner.
  3. Select Edit Giving Group.
  4. Select Donation Button on the top menu bar.

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 profile 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:

  1. Add jQuery to your page.
  2. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    	
  3. The standard script tag has two additional custom attributes:
  4. - ‘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="http://chimp.net/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.

  5. 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>
    	
  6. 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>
    	

Still need help? Contact Us Contact Us