Install the Kindful Donation Plugin on Wordpress

Kindful's Donation Plugin is the easiest way to accept donations anywhere - and to have those donations automatically flow into your Kindful account.

Instructions to add the Donation Plugin to your Wordpress website follow.


 
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 active 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.)

 

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

  1. Include the button tag to your page or post’s html:
    <a href="#" class="kindful-donate-btn">Donate</a>
  2. 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:

  1. 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
  2. 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/”  

 

Was this article helpful?
1 out of 2 found this helpful
Have more questions? Submit a request

Comments