Visit Philantro's homepage.

Donation Bar Widget

The Philantro Donation Bar Widget gives you the power to add passive donation solicitation to every page. When added to strategic locations, for example the bottom of every blog post, each page provides an opportunity for your supporters to donate a custom amount or one of up-to 5 suggested amounts that you control. You can customize the donation button text, color scheme and/or specify a specific donation campaign from your Philantro account via data-attributes.

  • Supported By
  • Squarespace, WordPress, Weebly and most others.
  • Not Supported By
  • Wix, Google Sites or GoDaddy Website Builder.

How helpful was this article?

Live Example

Philantro's Donation Bar Widget is mobile responsive and automatically takes the width of whatever container it's placed in. It's a novel way of adding a tactful donation call-to-action to the bottom of every content-heavy webpage.

Integration Code

On line 1 below, replace "AMOUNT-AMOUNT" with up-to 4 amounts separated by a hyphen.

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 bar widget to appear. The donation bar widget takes the width of its parent container. If you're using a website builder, consult their respective documentation regarding embedding HTML content. At the time of this write-up, Philantro Fundraising Widget is fully supported by all popular website builders we've encountered except for Wix, Google Sites and GoDaddy Website Builder.

  • The Philantro integration is a prerequisite.
  • <div class="philantro-bar" data-amount=""></div>
  • For Example
  • If you want boxes for $50, $100, $1000 (up-to 4 amounts)
  • <div class="philantro-bar" data-amount=""></div>
Contact Support about this Topic

Additional Customizations

You can also customize the donation bar heading, donation button text and designate a specific campaign by adding data attributes to the integration code.

  • Donation Button Text (Default "Donate")
  • data-button=""
  • ISO 3166 3-Letter Currency Code (Default "usd")
  • data-currency=""
  • Custom Section Heading (Default "Thank You For Donating")
  • data-heading=""
  • Specific Campaign
  • data-campaign=""
  • Specific Color in HEX Format (i.e. #CC00000)
  • data-color=""
  • For Example
  • A section with the heading "Thank you"
  • Suggested amounts of £50, £100, £1000 for Campaign ID 99
  • Donation button that says "Give Today"
  • Red Buttons
  • <div class="philantro-bar"
  • data-heading="Thank you"
  • data-currency="gbp"
  • data-campaign="99"
  • data-button="Give Today"
  • data-color="#CC0000"
  • data-amount="50-100-1,000"></div>
Contact Support about this Topic

Sustainable Fundraising Tips and Techniques

Whether you're doing research on Philantro® or learning more about sustainable fundraising techniques for micro and major nonprofits - our newsletter is a great resource. No gimmicks, no spam - 100% Philantro.