Creating a Campaign-Specific Donate Button

We try to make the implementation of a CommitChange campaign-specific donate button as painless as possible.

The first step to implementing a campaign-specific button is to create a campaign in CommitChange. 

Once you have your campaign created, it's time to build your button. You can navigate to our button builder directly from anywhere on our platform. Just click on the Donate Button icon.

Click on the Guided tab to view all of your options. (You can also go directly to the Advanced Tab if you know how to use HTML and CSS for code styling.)

Choose from the different button settings in the menu that comes up to customize your button; once you've chosen your basic customizations, you can connect your button to your campaign through special code. We currently do not have the option to add the code to connect your button to your campaign in the button builder; however, you will find instructions on how to add the necessary code to your button below. 

Click the Finish button to "See the Code" or "Email the Code." (Note: To implement your campaign-specific button, you will need to complete two extra steps beyond copying and pasting the Button Builder code, but the steps below will walk you through what you need to do.)

If you are implementing the button yourself, copy the code and paste it into a text editor. At the end of the shorter code snippet, add data attributes: data-campaign-id='###' data-gift-option-id='###' before the closing ">".

Example: <a class='commitchange-donate' data-amount='30' data-type='one-time' data-campaign-id='###' data-gift-option-id='###' ></a>

Replace the "#"s with the campaign and gift option ID numbers, which you can find within the campaign you created. You can find the campaign ID number at the top of your campaign page. 

You can find your data option ID by pressing the Gift Options button under "Manage Campaign" at the top of your campaign page.

So, for example, if you wanted to create a donate button that went specifically to the Gift of Life campaign for the "A backpack full of puppies" gift option, your code snippet would look like this:

<a class='commitchange-donate' data-amount='30' data-type='one-time' data-campaign-id='786' data-gift-option-id='2734' ></a>

If you wanted to create a donate button that went to the campaign but to no specific gift option, you could use this code:

<a class='commitchange-donate' data-amount='30' data-type='one-time' data-campaign-id='786'></a>

Once you have your campaign and/or gift options connected to your button, navigate to the system you use to manage your website, and inject the code into the page you would like a donate button. Make sure that you are able to edit and add to the code for the page (do not paste directly into a "What You See is What You Get" style of editor).

If you have a webmaster, "Email the Code" to them to have it implemented on your site. Make sure to let them know to use the attributes (data-campaign-id='###' data-gift-option-id='###') and the IDs to the campaigns and gift options you need to connect to your button. 

While setting up a campaign-specific button takes a little extra work, it is worth the effort in creating a campaign that you can run from your own website. 

Need help with this part? Contact our con