Donation Button Widget

The Philantro Donation Button Widget provides a clean and simple donation button that instantly opens the modal donation form. The widget uses the same technique as the donation form link; the only difference is the button is already styled to look great and does not require a web designer/developer.

---

Topics On This Page

• Live Example
• Integration Code
• Additional Customizations

How helpful was this article?

---

Live Example

Philantro's Donation Button Widget is mobile responsive and lives in whatever area it's placed in. As showcased below, you can customize the color, text and default donation amount using data-attributes to fit your needs.

DonateGive $10 to Food Pantry

---

Integration Code

On Line 1 of the code snippets below, replace "WEBSITE" with your website address.

The following assumes you already you have the Philantro integration working on your website. If you do not, consult the Integration documentation first. Add the following code snippet to the area you would like the donation button to appear. If you're using a website builder, consult their respective documentation regarding embedding HTML content. It's important to note, the Donation Button Widget is not supported by Wix, Google Sites or GoDaddy Website Builder.

• The Philantro integration is a prerequisite.
• <a href="#_givealways" class="philantro-btn">Donate</a>

• Donation Button Example
• If your website address was https://www.philantro.org
• <a href="https://www.philantro.org#_givealways" class="philantro-btn">Donate</a>

Contact Support about this Topic

---

Additional Customizations

You can also designate a specific campaign, default donation amount and color by adding data attributes to the integration code.

• Change the Button's Text
• <a href="#_givealways" class="philantro-btn">CUSTOM_TEXT</a>

• Whole Dollar Amount without currency symbol (i.e. 100)
• data-amount=""

• Specific Color in HEX Format (i.e. #CC00000)
• data-color=""

• Specific Campaign
• data-campaign=""

• For Example
• If you want Red donation button to say "Give $10 Today"
• Defaulted to $10 toward Campaign ID 99
• <a href="https://www.philantro.org#_givealways" class="philantro-btn" data-amount="10" data-campaign="99" data-color="#CC00000">Give $10 Today</a>

Contact Support about this Topic