More options

Include the script on your website

Include the Donate Button SDK somewhere within the HTML of your page. Include this script only once on your site.

<%= render 'include_snippet' %>

Get a basic donate button

Place an empty link with 'commitchange-donate' as the class wherever you want the button to appear.

<a class='commitchange-donate'></a>

Embed the form directly in your page

You can embed the donation form directly into your page by adding the "data-embedded" attribute.

<a class='commitchange-donate' data-embedded></a>

Add a custom button image or text

If you want to provide some custom text or a custom image for the donate button, add the "data-custom" attribute.

<a class='commitchange-donate' data-custom>Your Custom Button Text or Image</a>

Automatically add a preset designation

To preset a custom designation for every donation made through the button, set the "data-designation" attribute.

<a class='commitchange-donate' data-designation="Back to School Program"></a>

You can also provide a description of your designation using the "data-designation-desc" attribute.

<a class='commitchange-donate' data-designation="Back to School Program" data-designation-desc="Provide backpacks and school supplies for first graders."></a>

Preset a custom single amount

To provide a preset single amount for the button, use the "data-single-amount" attribute. Set its value to an amount in dollars.

For example, for a button that only takes $15 donations:

<a class='commitchange-donate' data-single-amount="15"></a>

Create custom multiple amounts

To provide custom multiple amounts, use the "data-custom-amounts" attribute. You must provide multiple amounts separated by commas. Set each amount to dollars.

<a class='commitchange-donate' data-custom-amounts="10.50,20,30,40,50,60,70"></a>

Preset recurring or one-time donations

You can set all donations through your button as either recurring or one-time by specifying the data-type attribute as either "one-time" or "recurring."

<a class='commitchange-donate' data-type='recurring'></a>

Redirect donors to a custom thank-you page

After the donation is completed, you can have the donor redirect to your own custom thank you page. Give a URL for the data-redirect attribute to get this functionality. Be sure to specify "http://" or "https://" in the url.

<a class='commitchange-donate' data-redirect='<%= request.base_url %>'></a>

Set the campaign

Use the ID of the campaign in the data-campaign-id attribute for the button (or the "campaign_id" URL parameter). You can find the campaign ID at the top of the campaign page, near the settings buttons, when you are signed in as an admin:

<a class='commitchange-donate' data-campaign-id=619></a>

You can also set a gift option ID. The gift option ID can be found in the 'Manage Gift Options' popup on the associated campaign page

<a class='commitchange-donate' data-campaign-id='619' data-gift-option-id='13'></a>

Set custom supporter fields

You can set the data-custom-fields attribute to add custom fields to the info step of the donate form. Each custom field attribute is comprised of two parts separated by an colon character (example: "shirt size: T-shirt size"). The first part is the name of the custom field and the second part is the text to display on the input. If the second part isn't provided, the name of the custom field will be displayed on the input. Each custom field should be separated by a comma. If the custom field doesn't already exist it will be created.

<a class='commitchange-donate' data-custom-fields='shirt size: T-shirt size, company: Company name'></a>