Donation button

IN THIS ARTICLE: How it worksSelectionTroubleshootingCustom button

How it works

A donation button will enable you to accept credit card donations through CHIMP on your own website, without a merchant account. The donation button provides a smooth giving experience, and all donor information collected is passed along.

Selecting your button

Selecting and installing a donation button doesn't cost you anything. Select a button design and paste the provided code on your website where you'd like the button to appear. 

Charities

  1. Click Take donations online in the top toolbar of your CHIMP Charity Account.

Campaigns

  1. Click Manage Campaign on your Campaign page.
  2. Click Donation Widget on the left.

Giving Groups

  1. Click Donation Button at the top of your Giving Group.

If you’d like to use a button design that’s different from the options provided, you can use our custom donate button code found below.

Note:

For implementation, we recommend providing the code to the person responsible for your website.

Troubleshooting

Free web hosting sites

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

Custom donation button

If you’d like to use a donation button that’s different from the ones provided to you, you can do so with these instructions. It’s recommended that a web developer or designer complete these steps.

  1. Add jQuery to your page. 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    	
  2. 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="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.

  3. 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>
    	
  4. This custom JavaScript opens the CHIMP 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