Install the Kindful Donation Plugin on Wordpress – Kindful Help Center

Overview

Kindful's Donation Plugin is the easiest way to accept donations anywhere - and to have those donations automatically flow into your Kindful account. Read on for steps on how to install the Kindful Donation Plugin on your Wordpress site.

Linked Articles:

- Creating a Donation Plugin

Part 1: Security (SSL)

Kindful recommends you secure your Wordpress website with an SSL certificate. This allows your donors to stay on your website to complete their transaction. If you choose not to secure your website with SSL, then your donors will be routed to Kindful's secure checkout page to finish their transaction.

Here are two resources to add an SSL certificate to your website

Part 2: Wordpress Plugin for embedding code

To add the Kindful plugin to your Wordpress site, please install and activate a Wordpress plugin that allows you to embed code into the head tag. We have used this plugin: https://wordpress.org/plugins/embed-code/ , but any one you prefer that allows you to put in full script tags will work great. (Or, if you’re a developer, you can add the Donation Plugin code it in whatever way is best for your site setup.)

Be sure you have entered the full Kindful-supplied script from the embed code. This entire part would need to be inputted to the head of your site.

Of Note: This needs to be inputted to the head of the WordPress site, not the header.

Reference this article for additional information.

Part 3: Embedding your donate button to a page or post:

Include the button tag to your page or post’s html:
<a href="#" class="kindful-donate-btn">Donate</a>
Add the Kindful plugin script tag to your website’s head (via the embed-code plugin, or elsewhere)

Optional: Using one of your nav-links as a donate button:

View your website and open up developer tools. Grab the id (or very specific class) of the link you’re wanting to turn into a donate button (or the link of it’s wrapper div)... ie: .page-item-52 a
Add the Kindful plugin script tag to your website’s head (via the embed-code plugin, or elsewhere). Use ‘jquery-selector’ lookupType option and use your unique jquery selector you found w/ developer tools (ie: “.page-item-52 a”) as lookupValue. If you want button styles applied, leave as is, otherwise set the option: data-styles-off='true'

Finding Developer Tools in your Browser

As well as a menu shortcut, you can access the Developer Tools easily either pressing "F12" in Windows or "Cmd" ⌘, "Option" ⌥ and "I" on the Mac, or by right clicking on the page and selecting “Inspect Element”.

In Safari, you will need to enable the Developer Tools by checking the option in Preferences > Advanced > Show Develop Menu first.

In Opera, you will need to enable Developer Tools by checking the option in More Tools > Enable developer tools.

Since Firebug is an extension for Firefox, you will need to install the add on from http://getfirebug.com/

Comments