Customizations

Quick Start Guide

Philantro integration is copy and paste for most instances.


Website Builders

Integration guides for organizations using any of the following website builders.


Customizations

Customizing your donation or event ticketing form. There are two ways - hard coding and dynamic links.


Fundraising Widgets

Add Fundraiser Widgets to your website or stream a live fundraiser to rally supporters.


Security

The basics of SSL and securing your website.


Philantro Support

We strive to respond amazingly fast, but please be aware of our time zone differences and Code of Conduct. We're fairly responsive between the hours of 8AM - 5PM Central Standard Time, Monday - Friday.

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>

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-color="Color HEX"
data-language="en|es|it|fr
data-theme="light|dark">
</div>