Customizations

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 URI = window.location.href;
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 URI = window.location.href;
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>

Custom CSS

Add the "data-css" variable to your form embed code with a link to your securely (HTTPS) self-hosted css file.

<div id="ph-root" data-css="CSS File URL"></div>

Form Color

Add the "data-color" variable to your form embed code with the corresponding color HEX. Pick your favorite color via Google's Color Picker. The color HEX looks prefixed with a "#" symbol - for example #CCC000.

<div id="ph-root" data-color="Color HEX"></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-css="CSS File URL"
data-color="Color HEX"
data-language="en|es|it|fr
data-theme="light|dark">
</div>