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.
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.
How helpful was this article?
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.
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
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
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.