Integration Guide

Getting Started

If you are using a website builder, follow the guide for your Builder. Whether your platform is listed or not, the fundamentals for integrating Philantro is the same. Insert the script on your website, preferably the footer. The philantro.js is JavaScript library used to allow you accept donations on your own website. Here are the basics for adding Philantro to your website. Low-level experience with web development / design is ideal.

Step One

Add the following code snippet to your website's footer, right before the closing body tag. This is the most effective way to integrate Philantro. This snippet is how Philantro and your website communicate with one another.

OID - An acronym for Organization ID. Your OID is a nine-digit identifier given to you by Philantro upon successful registration.

XXXXXXXXX should be replaced with your Philantro OID
(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);

Donate Button

After philantro.js has been added to your website, you have two options for Philantro's online Donation Form - Donate Button or Fully-Embedded Donation Form. Below are examples of the customizable Donate button that triggers the modal online donation form.

You can change the color, text and width of the standardized donate buttons or you create donate buttons from scratch giving your nonprofit organizations complete control to match your established branding.

Donate Give Today Hello
The text of the Donate Button can be whatever you wish.
<a href="#_givealways" class="philantro-btn">Donate</a>

Embedded Donate Form

If you prefer to have the fully embedded donation form, you can add the following code snippet to your donation page. For an example of this appears, you can visit the Donation Form example link.

The fully embedded donation form can also be customized via CSS. This gives your nonprofit organization the flexibility to change font, color, visible elements and more. This level of customization is best left to those confident in CSS.

Philantro's Donation form will take the full width of its parent container.
<div id="ph-root"></div>


Your donation form should now appear in its default nature.