Getting Started
Your donation form's color, default campaign, language (BETA) and theme (BETA) can be customized by adding variables to your form embed code. Whether you are using a website builder or building from scratch, the technique is essentially the same.
To customize the form, you only need to edit the ph-root line.
<div id="ph-root"></div>
<script>
(function() {
var s = document.createElement('script');
var ph = document.getElementsByTagName('script')[0];
s.type = 'text/javascript'; s.async = true;
s.src = '<link provided via dashboard>/philantro.js';
window.options = { OID: 'XXXXXXXXX'};
ph.parentNode.insertBefore(s, ph);
})();
</script>
Show A Single Donation Campaign
Add the "data-campaign" variable to your donation form embed code with the corresponding Campaign ID. You can find all your Campaign IDs under "Manage Campaigns" on your dashboard.
<div id="ph-root" data-campaign="Campaign ID"></div>
So with this example, the code will look like the following.
<div id="ph-root" data-campaign="
Campaign ID"></div>
<script>
(function() {
var s = document.createElement('script');
var ph = document.getElementsByTagName('script')[0];
s.type = 'text/javascript'; s.async = true;
s.src = '<link provided via dashboard>/philantro.js';
window.options = { OID: 'XXXXXXXXX'};
ph.parentNode.insertBefore(s, ph);
})();
</script>
Sell Event Tickets
Add the "data-event" variable to your form embed code with the corresponding Event ID. You can find all your Event IDs under "Upcoming Events" on your dashboard.
<div id="ph-root" data-event="Event ID"></div>
Light / Dark Theme Websites
Add the "data-theme" variable to your form embed code with either "light" or "dark" as the value.
This feature is currently in BETA and not available to all nonprofits.
<div id="ph-root" data-theme="light|dark"></div>
Language
Add the "data-language" variable to your form embed code with either "en","es","it" or "fr" as the value. Only English, Spanish, Italian and French.
This feature is currently in BETA and not available to all nonprofits.
<div id="ph-root" data-language="en|es|it|fr"></div>
Use More Than One
Use any of the variables together to build the perfect form to suite your needs.
You can only use one of each variable at the same time.
<div id="ph-root"
data-campaign="Campaign ID"
data-language="en|es|it|fr
data-theme="light|dark">
</div>