Live Example
Philantro's Fundraising Widget is mobile responsive and automatically takes the width of whatever container it's placed in. The height of the widget will auto-adjust based on the contents of the window.
Fundraising Widget
The Philantro Fundraising Widget gives you the power to showcase your donation campaign's fundraising progress. When creating a donation campaign in your Philantro dashboard, a fundraising goal, image and description is required. The progress shown on the Fundraising widget will automatically update as donors support your campaign.
Topics On This Page
How helpful was this article?
Integration Code
On line 1 below, replace "CAMPAIGN_ID" and "BUTTON" with your desired Philantro Campaign ID and Button Text.
The following assumes you already you have the Philantro integration working on your website. Add the following code snippet to the area you would like the fundraising widget to appear. The fundraising widget takes the width of its parent container but the height will auto-adjust. 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-progress" data-campaign="" data-button=""></div>
- For Example
- If your Donation Campaign has an ID of 99
- Fundraising widget button will show "Donate"
- <div class="philantro-progress" data-campaign="99" data-button="Donate"></div>
Contact Support about this Topic
Integration for Google Sites, Wix.
On line 1 below, replace "CAMPAIGN_ID" with your desired Philantro Campaign ID. On line 8, replace XXXXXXXXX with your Philantro Organization ID.
Google Sites, Wix and GoDaddy Website Builder does not fully support the Philantro Fundraising widget's auto-height capability. Be sure to give your widget frame enough width and height so that it is displayed correctly.
The integration process is for these two website builders are slightly different than officially supported method. Use the code snippet below using your respective builder's HTML embed method.
- <div class="philantro-progress" data-campaign=""></div>
- <script>
- (function() {
- const s = document.createElement('script');
- const ph = document.getElementsByTagName('script')[0];
- s.type = 'text/javascript'; s.async = true;
- s.src = 'https://philantro.s3.amazonaws.com/pdf/philantro.js';
- window.options = {OID: ''};
- ph.parentNode.insertBefore(s, ph);
- })();
- </script>
- For Example
- If your Campaign's ID was 99 and your Organization ID was 000000000
- <div class="philantro-progress" data-campaign="99"></div>
- <script>
- (function() {
- const s = document.createElement('script');
- const ph = document.getElementsByTagName('script')[0];
- s.type = 'text/javascript'; s.async = true;
- s.src = 'https://philantro.s3.amazonaws.com/pdf/philantro.js';
- window.options = {OID: '000000000'};
- ph.parentNode.insertBefore(s, ph);
- })();
- </script>
Contact Support about this Topic